Home

Building LOGD Visualizations

Level: 
LOGD 101
Contributor: 
Contributor: 
Description: 
This tutorial presents a simple example that visualizes the LOGD data mashups.
Prerequisites: 
Prerequisites: 

What to Expect

By the end of this tutorial you should be able to generate a Javascript-based visualization, through use of the Google Visualization API.

What You Need to Know

This tutorial assumes you are familiar with concepts found in the following resources:
  • Javascript is a Web programming language. See [1]

The LOGD Mashup

The code described in the tutorial uses Dataset 353:State Library Agency Survey: Fiscal Year 2006 and Dataset 1356:Tax Year 2007 County Income Data from Data.gov. The expected output is a map of "Adjusted Gross Income(AGI) per Capita": a US map where each state is colored according to the average AGI per person living in that state. We obtain a state's AGI data from Dataset 1356 and a state's population data from Dataset 353. We also assume that state's population remain the same from fiscal year 2006 to fiscal year 2007. The LOGD data mashup is enabled by the following SPARQL query 
 http://logd.tw.rpi.edu/demo/building-logd-visualizations/mashup-353-population-1356-agi.sparql

Static Visualization

Defining the HTML Layout

To make a visualization web-accessible, an accompanying HTML layout is necessary. HTML layouts can be managed through use of division (div) elements, which define different sections of a page. The HTML layout for our LOGD demo is given below, with a div element for representing the demo description, and another for defining where the visualization will be placed (with id='map_canvas'). 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  	<title>AGI per Capita Map</title>
  </head>
  <body>
      <div>AGI per Capita Map: average adjusted gross income per person in dollar amount in US states.</div>
      <div id='map_canvas'>Loading Map ...</div>
  </body>
</html>
 

Inserting Visualization Code

Following the creation of an HTML layout, javascript-based visualization code may be inserted in the HEAD section. This code has the following objectives in our LOGD demo:
  1. Load the appropriate Google Visualization API packages (in this case, the GeoMap package).
  2. Define a callback function for loading visualization code, which is called upon the loading of the HTML page.
  3. Obtain data from a given source to pass to our GeoMap instance. The Google Visualization API is designed to accept data in the form of specially-formatted JSON (represented by the URI http://logd.tw.rpi.edu/demo/building-logd-visualizations/mashup-353-population-1356-agi.js) , which can then be fed to a JSON processing function.
  4. Following a call to the JSON processor, verify that it successfully processed the passed file.
  5. Get back a response from the query processor, containing the data from the JSON file.
  6. Define a data table to store the response data in. This process starts by defining header entries of the form TABLE.addColumn(DATATYPE, NAME).
  7. For each entry in the response, create a new data table row for the corresponding data.
  8. Define a configuration for the GeoMap instance to be visualized, containing information such as resolution.
  9. Define the GeoMap instance in the HTML div with id='map_canvas', using the configuration from Step 8 and data table from Step 7. 
    <!--   import Google visualization  API -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

    <!--   customize function -->
    <script type="text/javascript">
    /* <![CDATA[ */
      

      // load google visualization packages - STEP 1
      google.load('visualization', '1', {'packages': ['geomap']});
        
      // set callback function for drawing visualizations - STEP 2
      google.setOnLoadCallback(drawMap);
   
      function drawMap() {
      	//load static data - STEP 3
      	var queryurl = "http://logd.tw.rpi.edu/demo/building-logd-visualizations/mashup-353-population-1356-agi.js";
      	var query = new google.visualization.Query(queryurl); // Send the query.
      	query.send(handleQueryResponse);
      }
  
      function  handleQueryResponse(response){
      	// Check for query response errors. - STEP 4
      	if (response.isError()) {
           alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
           return;
      	}

      	// read data  - STEP 5
      	var data = response.getDataTable();
      	
      	// create new data - STEP 6
      	var newdata = new google.visualization.DataTable();
      	newdata.addColumn('string', 'State');
      	newdata.addColumn('number', 'AGI per Capita');

        // populate each row - STEP 7
      	var rows = data.getNumberOfRows();
      	for (var i = 0; i < rows; i++ )
      	{
      	  var state = 'US-' + data.getValue(i, 0);
      	  var value =  Math.round(data.getValue(i, 1)*1000/data.getValue(i, 2)); // AGI figure uses thousand-dollar unit
      	  newdata.addRow([state, value]);
      	}
      	
      	// configure map options - STEP 8
      	var options = {};
      	options['region'] = 'US';	// show US map
      	options['dataMode'] = 'regions';
      	options['width'] = 900;
      	options['height'] = 550;

        // define geomap instance - STEP 9
        var viz = document.getElementById('map_canvas');
        new google.visualization.GeoMap(viz).draw(newdata, options );    
      }
    /* ]]> */
    </script>
Once this code is inserted in the HEAD section, the visualization will appear: http://logd.tw.rpi.edu/demo/building-logd-visualizations/agi-per-capita-v2.html . NOTE: View in Firefox!

Build a SPARQL-based Dynamic Visualization

Our SPARQL endpoint (http://logd.tw.rpi.edu/ws/sparqlproxy.php) is designed to be capable of formatting results in JSON compatible with the Google Visualization API. In the above code, the section: 
  var queryurl = "http://logd.tw.rpi.edu/demo/building-logd-visualizations/mashup-353-population-1356-agi.js";
corresponding to Step 3 above can be replaced with: 
  //load data using SPARQL query
  var sparqlproxy = "http://logd.tw.rpi.edu/ws/sparqlproxy.php";
  var queryloc = "http://logd.tw.rpi.edu/demo/building-logd-visualizations/mashup-353-population-1356-agi.sparql";    
  var service = "http://logd.tw.rpi.edu/sparql";
  var queryurl = sparqlproxy 
                + "?" + "output=gvds"
                + "&service-uri=" + encodeURIComponent(service)
                + "&query-uri=" + encodeURIComponent(queryloc) ;
The above code passes a SPARQL query to our endpoint, returning the same information that is contained in the static JSON file. The modified coded is located at: http://logd.tw.rpi.edu/demo/building-logd-visualizations/agi-per-capita-v3.html NOTE: View in Firefox!

Extending this demo

The above code may be used as a starting point for generating your own GeoMap-based visualization. Doing this will require the following steps:
  1. Specifying a different SPARQL query (queryloc) in Step 3
  2. Modifying the column definitions in Step 6, to correspond to the new SPARQL query.
  3. Modifying the response processing code in Step 7.
Next: 
Your rating: None Average: 5 (1 vote)
  • Login to post comments
  • 11098 reads