Visualizing Data {Earthquakes}

Using USGS data, I visualize the magnitude and location of earthquakes that have occurred on a particular day. Disclaimer: This data includes ‘quarry blasts’ and ‘explosions’ that can be easily filtered out.

All Earthquakes from one day | 09.27.2017

All Earthquakes from one day | 09.27.2017

The first steps in this process are: create a new Processing sketch; download and clean the data; then import the cleaned data into the sketch. Pretty straightforward.

CREATE A NEW PROCESSING SKETCH

The main sketch starts with two functions: setup and draw. The setup() block runs once and is used for initializing the sketch by setting the screen size (this must be the first function inside the setup block), or applying color to the background. The draw() block runs repeatedly and is used for animation. Save the sketch as earthquake_viz.

def setup():
    size(1200, 600);

def draw():
    background(44, 62, 80)

DOWNLOAD AND CLEAN THE DATA

Download “All Earthquakes” from the “Past Day” on the USGS Earthquake Hazard Program website. It will be in csv format. Create a data folder inside the earthquake_viz sketch and save the csv as earthquakes.csv. Create a new Google Sheet and open the earthquakes.csv file. Freeze the header row and delete any rows that have empty cells in the 'mag' (earthquake magnitude) column.

IMPORT CLEANED DATA INTO SKETCH

Using Python's core library for handling csv files, include the import statement at the very top of the sketch file. Add the following with block to open the csv file.

with open("earthquakes.csv") as f:
    reader = csv.reader(f)
    header = reader.next() # Skip the header row.
        
    print header

Google Knowledge Graph Search

Recently, I built out a quick search widget using the Google Knowledge Graph Search Widget. The widget is a Javascript module that allows you to add topics to your input fields (I've limited mine to People) such as Movies, Places, etc. When a user starts typing, the widget finds a relevant match and it's rendered to the DOM.

artist-search-widget.gif

In this project, I called the KGSearchWidget() passed in a configuration object, limiting the language, type (here I chose Person) and event handler for selecting an item. In the config variable, I limit the number of results in the dropdown, the language searched, the entity type I want returned and the maximum number of characters in the description of each entity. 

var config = {
  'limit': 10,
  'languages': ['en'],
  'types': ['Person'],
  'maxDescChars': 100,
};

config['selectHandler'] = function(e) {
  console.log(e.row);

  artObject = {
    name: e.row.name,
    desc: e.row.description,
    content: e.row.json.detailedDescription.articleBody,
    url: e.row.json.detailedDescription.url,
    image: e.row.json.image.contentUrl
  }
}

KGSearchWidget(KG_API, document.getElementById("myInput"), config);

How to Make a Simple Database Server

A couple months ago, I started writing an http server using Node.js; but had to stop because, life. I've written a few of these before, as the foundation for larger Node projects using Express for routing and MongoDB for data storage; but never used local data storage. This is the first of three posts. For the first part this program, I will be creating the database server using only what's available to me with Node.js. Before I jump into the code, a quick outline sets me up for a smooth(ish) execution:

  1. Create an empty Node.js project
  2. Install any dependencies, e.g. request
  3. Create the server and have it accessible from http://localhost:4000/
  4. Give it two routes: http://localhost:4000/set?somekey=somevalue and http://localhost:4000/get?key=somekey
  5. Store the key and value in local memory on the set
  6. Retrieve the key on the get

CREATING THE EMPTY NODE PROJECT

Create a new directory and cd into it.

mkdir simple-database
cd simple-database
npm init

This creates the package.json file to store the dependencies. Then, create the main file file that will contain the server code:

touch index.js

INSTALLING DEPENDENCIES

npm install request --save

Check the package.json file:

{
  "name": "simple-server",
  "version": "1.0.0",
  "description": "simple database server",
  "main": "index.js",
  "scripts": {
  },
  "author": "your name",
  "license": "ISC",
  "dependencies": {
    "request": "^2.79.0"
  }
}

Running these dependencies adds the node_modules folder in the root directory. Installing the request package allows you to make http requests. The --save option automatically adds the package to the package.json file and saves that version to the project in the node_modules directory. 

WRITING THE SERVER CODE

The first step in creating an http server is to require the http module. http modules are included when Node is installed so no additional steps are needed to import it. Using the http module's createServer( ) method, the server is now created. The createServer( ) method takes a callback function as a parameter. Every time the server receives a new request, the callback function is executed. At this point, you can check the terminal and browser window ... each should say 'This works.' If you refresh three times, you should see 'This works' logged three times in the terminal.

The callback function takes two parameters, a request and a response. The request object contains information such as the URL, while the response object is used to return the headers and content to the user making the request.

The callback function begins by calling the res.writeHead() method which sends an HTTP status code - in this case it's 200, an indication of success - and response headers to the user making the request. If you don't specify headers, Node will send them for you. Next, the server calls the res.end() method which tells the server that the response headers have been sent and the request has been fulfilled. It can be called with no parameters, but in this case, I've included a message 'This works' as an indication that the request has been fulfilled.

The listen() method activates the server on port 4000. 

var http = require('http');

http.createServer(function(req, res){
    console.log('This works.');
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end('This works.');
}).listen(4000);

To-Do List | Module Pattern

So for my first foray into using a design pattern, I'm making a Todo program using the Revealing Module Pattern. This pattern is based on the Module Pattern which I spoke about in my last blog post. The benefit of using this structure is that you can easily see the publicly available functions and variables clearly listed within the return statement.

To-Do List Mock Up

To-Do List Mock Up

I start by assigning the module to a variable that I will then use to call the methods. In this case, I called it Todo because I'm building a Todo program. I then assigned each of the DOM elements that I would be referencing (e.g. the form, the add button and the unordered list) to variables.

This program has only one method -- it's called addListItem. Within it, I assign an event listener and pass in two parameters. The first parameter is the event, in this case I'm using submit and the second parameter is the function. In the function, I create the element (in this case it's a list item), set the attributes of the input element (for this program I am using a checkbox which later on I can make functional so that when someone checks off a task, it can disappear or the text can have a strike-through) and insert the elements into the DOM (whatever words the user types into the text input field).

Within this method, I've also included an event listener on the form which listens for when the user types in the todo item and presses enter -- in this case, I've used the submit event. I could have also used a click event on the button element. 

$(document).ready(function() {

    var Todo = Todo || {};
    
    Todo.Item = (function(){
        'use strict';
        // assigen DOM elements to variables
        var 
            _form = document.querySelector('form'),
            _inputItem = document.querySelector('.input_item'),
            _button = document.querySelector('button'),
            _ul = document.querySelector('ul');
            
            // set up event listeners
            var addListItem = _form.addEventListener('submit', function(event){
                event.preventDefault();

                // create elements
                var li = document.createElement('li');
                var checkbox = document.createElement('input');
                var label = document.createElement('label');

                // decorate elements
                checkbox.setAttribute('type', 'checkbox');
                checkbox.setAttribute('id', 'check');

                label.setAttribute('id', 'item_text');

                label.textContent = _inputItem.value;

                // insert elements into DOM
                _ul.appendChild(li);
                li.appendChild(checkbox);
                li.appendChild(label);
            });
        
        return {
            add: addListItem
        };

        Todo.Item.add();

    })();

});

Before I write any code, I tend to sketch out a short check list of steps that describes in human terms what the program will do. This one is still relatively technical, and can be outlined even simpler still. 

image.jpg
image.jpg