data visualization and mapping using javascript

Visualizing data using maps and other tools

Mack Hardy Director at Affinity Bridge

Presented Feb 5th, 2013at NetTuesday Vancouver

Data Visualization as Story Telling

http://en.wikipedia.org/wiki/Data_driven_journalism

Steps of Data Visualization

Acquire : Obtain the dataParse : Provide some structure for the data's meaningFilter : Remove all but the data of interest.Mine : Apply methods from statistics or data mining as a way to discern patterns or place the data in mathematical context.Represent : Choose a basic visual model, such as a bar graph, list, or tree.Refine : Improve the basic representation to make it clearer and more visually engaging.Interact : Add methods for manipulating the data or controlling what features are visible.

O'reilly book "Vizualizing Data " by Ben Fry http://benfry.com/

Excel Charts

Google Charts

Excel and Google Charts

So many other ways to show data

http://www.visual-literacy.org/periodic_table/periodic_table.html

Maps

Story Telling with Geographic Maps

Vision Vancouver Delivers Shale Gas Development in Fort Nelson

Geography provides the context for the story we are telling

http://votevision.ca/issues/map http://lands.fnnation.ca/story/shale_gas

Composite layers on maps

In our case

base map satellite images

tilestache provides the data layers from PostGIS via mapnik

leaflet map definition points to layers in the layer switcher

Image credit http://mike.teczno.com/notes/tilestache.html

Lot of Data on Geographic Maps

Meta Data Presentation from Tiles

Fusion Tables

Google Fusion Tables Build

Example of making Choropleth in Fusion Tables

https://github.com/affinitybridge/canada-provincial-population-choropleth

Fusion Tables as a Data Source

http://mapbox.com/blog/mapbox-fusion-tables-drones/

Chris Herwig from MapBox

http://hrwgc.github.com/places/drones/#8.00/32.886/70.467

Timeline of Events

http://livingunderdrones.org/timeline/

Review Christchurch table, show larger data set, and map styles

Illustrate that grouping is difficult in prepfor hexbin example

Fusion Tables - Larger Data Set

https://www.google.com/fusiontables/DataSource?docid=1YHk08Ojrfdsn67tXq5-395UkSIDAuVgTwCHKVwk#map:id=3

Cartograms

http://dl.dropbox.com/u/48433/datavis/canada/cartogram/cartogram_v1.html

A map on which statistical information is shown in diagrammatic form.

http://bl.ocks.org/4687146

Scaling Canada by Area Population

http://bl.ocks.org/4696122

Cartogram of population vs parliamentary seats

Source: Canadian Census

Ecumene of Canadian Population

http://www-personal.umich.edu/~mejn/election/2012/

Mark Newman, Department of Physics and Center for the Study of Complex Systems, University of Michigan

Contiguous Cartogram of 2012 US Results

http://wartard.blogspot.ca/2013/01/mali-french-go-to-desert.html

World Oil Reserves

Raphael http://raphaeljs.com

Making our Visualization Interactive

D3 http://d3js.org

Walmart Locations All Hexed Up

http://indiemaps.github.com/hexbin-js/tests/walmart.html

Graffiti in Vancouver

http://vancouver.ca/your-government/open-data-catalogue.aspx

http://bl.ocks.org/4711787

http://bl.ocks.org/4668062

Density Map of Christchurch Quakes

Hexbin Graph

http://bl.ocks.org/4677419

http://bl.ocks.org/4710662

Two aspects of dataset shown, plus geography

http://bl.ocks.org/4718717

Earthquakes = Now with Timeline!

Ethics & Open Data

Hugh StimsonGeocology Research

@geocology

http://geocology.ca/projects/net-tuesday/

Guide to publishing data responsibly

How to know if you’re doing it right

Here are the main questions to ask yourself to ensure you publish data responsibly.

1. Why publish this?Who could be harmed?

Is the data accurate?

Is it relevant to your story?

2. Why not publish this?

3. How best to publish this?What facets of the data are truly essential?

Discussion & Questions

mack@affinitybridge.comhttp://affinitybridge.com

@mackaffinity @affinitybridge

http://xkcd.com/523/

LinksFusion Tableshttp://www.visual-literacy.org/periodic_table/periodic_table.htmlhttp://votevision.ca/issues/map#creativity-jobs-and-financeshttp://lands.fnnation.ca/story/shale_gashttp://stage.rr.affinitybridge.com/http://stage.rr.affinitybridge.com/node/993#zoom=10&lat=48.9685&lng=-124.8322&layer=17http://hrwgc.github.com/places/drones/#9.00/32.6285/69.7405http://mapbox.com/blog/mapbox-fusion-tables-drones/http://livingunderdrones.org/timeline/https://www.google.com/fusiontables/DataSource?docid=1YHk08Ojrfdsn67tXq5-395UkSIDAuVgTwCHKVwk#map:id=3

Cartogramshttp://bl.ocks.org/4687146http://bl.ocks.org/4696122http://wartard.blogspot.ca/2013/01/mali-french-go-to-desert.html

Hugh Stimson from Geocologyhttp://geocology.ca/projects/net-tuesday/http://thetyee.ca/News/2012/07/05/BCCarbonMapLessons/http://www.lohud.com/interactive/article/20121223/NEWS01/121221011/Map-Where-gun-permits-your-neighborhood-?gcheck=1http://www.poynter.org/how-tos/digital-strategies/199834/programmers-explain-how-to-turn-data-into-journalism-why-that-matters-after-gun-permit-data-publishing/http://www.theatlanticcities.com/neighborhoods/2012/07/how-dramatically-alter-british-columbias-carbon-footprint/2489/

D3 Hexbin and Exampleshttp://indiemaps.github.com/hexbin-js/tests/walmart.html

http://bl.ocks.org/4711787http://vancouver.ca/your-government/open-data-catalogue.aspx

http://bl.ocks.org/4668062http://bl.ocks.org/4677419http://bl.ocks.org/4710662http://bl.ocks.org/4718717