Description:
This tutorial presents a simple example that visualizes the LOGD data mashups.
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:
- Load the appropriate Google Visualization API packages (in this case, the GeoMap package).
- Define a callback function for loading visualization code, which is called upon the loading of the HTML page.
- 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.
- Following a call to the JSON processor, verify that it successfully processed the passed file.
- Get back a response from the query processor, containing the data from the JSON file.
- Define a data table to store the response data in. This
process starts by defining header entries of the form
TABLE.addColumn(DATATYPE, NAME).
- For each entry in the response, create a new data table row for the corresponding data.
- Define a configuration for the GeoMap instance to be visualized, containing information such as resolution.
- 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:
- Specifying a different SPARQL query (queryloc) in Step 3
- Modifying the column definitions in Step 6, to correspond to the new SPARQL query.
- Modifying the response processing code in Step 7.