DATA(VIS) JOURNALISM

-Drawing Data Maps with Fusion Table

Nakho Kim (nkim3@wisc.edu)Feb 2012

Why Data Maps?

• Many interesting things are place-based– Distribution of social resources– Communities of people– Movements of people and resources– …and of course, cases

• Good for finding patterns – Difference, clustering, overlap

• Don’t confuse this with conceptual mappings

Good Data Map Stories

• Basic stories: Where things are going on– Putting pins on the board– http://spotcrime.com/wi/madison

• Better stories: Where patterns are stronger– Difference and clustering– http://www.wisconsinwatch.org/viz/graphics-mapping-scott-walkers-suppo

rt/

• Great stories: Clues on “why”– Often involves overlapping layers– http://www.guardian.co.uk/news/datablog/interactive/2011/aug/16

/riots-poverty-map

Google Fusion Tables

• Good for: Fusing data, visualizing as a map• Key characteristics– Uses Google docs ‘table’ file– Public / private repository of datasets– Single layers visualization for each table– But can use APIs to overlay layers

Basic Maps Provided

• Location pin map• Heat map (based on density of pins)• Intensity map• Only for country-scale and above • For smaller scales, color-coded custom polygons

are used

The Process

• Upload / Import datasets• Find other datasets to merge• Visualize• Save table files• Use code or apps to call overlay layer APIs

Preparing the Data

• DO YOU HAVE THE LOCATION DATA?– Latitude and longitude (decimal degrees)– Place names (addresses, country names)– KML snippets (point, line, polygon)

• Have it either in your dataset or merge one that has them

Upload / Import datasets

• A. Upload– Log in to Google Docs– Create “Table”– Upload your csv file

• Verify columns to import• Add description (source)

• B. Browse – Log in to Google Fusion Tables– Search around

• Example: US poverty

Merge Datasets

• Frequently Used Datasets– Geo shapes– Census and other large-scale public data

• Note– The data in the merged table is not a backup copy• It will be updated live when the owner does so• You cannot modify that data

– If you need to, export that data and re-upload

• Process– Sign in, enable Merge.–Click ‘Merge’ and paste the dataset URL– Specify the common column of the two

datasets• Reminder: clean up your data so there IS one.

– Select columns to merge– Enter new name for merged table

Visualize

• Visualizing the Map Display– Click "Configure styles“– Modify color, lines & images as needed

• Custom Intensity Map– Configure styles -> Polygon -> Fill color– Buckets -> Set number of categories, variable and

range

• Visualizing the Info Window– Click ‘Configure Info Window’– Modify the code• Change the message and variables• Enter data column names inside { }

– Other APIs can be inserted, too• Example:

http://www.google.com/fusiontables/DataSource?snapid=65503• Uses Google Chart API inside info window

Table Files

• Visualization settings are saved within the table file

• They are NOT saved when exporting to csv or KML– In another tool that imports the KML from the

table, it will not reflect the visualization setting

Building Overlays

• Example– Free health clinics in WI + WI median Income

intensity map• Go to each File -> About / get numeric ID• Use API, the coding way• …OR the app way

– http://gmaps-samples.googlecode.com/svn/trunk/fusiontables/fusiontableslayer_builder.html

– Specify layers to add, copy the code

Integrating Google Charts

• Make your choice(s)– http://code.google.com/apis/chart/

• Learn the API, or use a editor– http://imagecharteditor.appspot.com/

• Replace { } for column names• Paste the code into the info window.

Exercise: How Did They Do It?

• Keep a keen eye on parsing other projects• Example:

– http://www.projects.chrislkeller.com/ft-highcharts/

• Rundown– District boundary data (Shapes)– Voter turnout by district (dataset)– Info window (moved to bottom / done with CSS) • chart1(table) / Uses outside API• chart2(bar) / Uses outside API

Examples of the Week

• Good– WEAVE (tool)• Java based. Fast interactivity. Many windows.• Good for exploring data, not so for flexible mashups• Example: http://demo.oicweave.org:8080/weave.html?defaults=obesity.xml

• Bad– NYT: “Most mentioned NFL player”• Hard to read coded values from complex silhouettes • http://www.nytimes.com/interactive/2012/02/04/sports/football/most-mentioned-players-on-espn.html