data visualization and mapping using javascript

32
Visualizing data using maps and other tools Mack Hardy Director at Affinity Bridge Presented Feb 5th, 2013 at NetTuesday Vancouver

Upload: mack-hardy

Post on 27-Jan-2015

127 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: 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

Page 2: Data Visualization and Mapping using Javascript

Data Visualization as Story Telling

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

Page 3: Data Visualization and Mapping using Javascript

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/

Page 4: Data Visualization and Mapping using Javascript

Excel Charts

Google Charts

Excel and Google Charts

Page 5: Data Visualization and Mapping using Javascript

So many other ways to show data

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

Page 6: Data Visualization and Mapping using Javascript

Maps

Page 7: Data Visualization and Mapping using Javascript

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

Page 8: Data Visualization and Mapping using Javascript

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

Page 9: Data Visualization and Mapping using Javascript

Lot of Data on Geographic Maps

Page 10: Data Visualization and Mapping using Javascript

Meta Data Presentation from Tiles

Page 11: Data Visualization and Mapping using Javascript

Fusion Tables

Page 12: Data Visualization and Mapping using Javascript

Google Fusion Tables Build

Example of making Choropleth in Fusion Tables

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

Page 13: Data Visualization and Mapping using Javascript

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

Page 14: Data Visualization and Mapping using Javascript

Timeline of Events

http://livingunderdrones.org/timeline/

Page 15: Data Visualization and Mapping using Javascript

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

Page 16: Data Visualization and Mapping using Javascript

Cartograms

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

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

Page 17: Data Visualization and Mapping using Javascript

http://bl.ocks.org/4687146

Scaling Canada by Area Population

Page 18: Data Visualization and Mapping using Javascript

http://bl.ocks.org/4696122

Cartogram of population vs parliamentary seats

Page 19: Data Visualization and Mapping using Javascript

Source: Canadian Census

Ecumene of Canadian Population

Page 20: Data Visualization and Mapping using Javascript

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

Page 21: Data Visualization and Mapping using Javascript

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

World Oil Reserves

Page 22: Data Visualization and Mapping using Javascript

Raphael http://raphaeljs.com

Making our Visualization Interactive

D3 http://d3js.org

Page 23: Data Visualization and Mapping using Javascript

Walmart Locations All Hexed Up

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

Page 24: Data Visualization and Mapping using Javascript

Graffiti in Vancouver

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

http://bl.ocks.org/4711787

Page 25: Data Visualization and Mapping using Javascript

http://bl.ocks.org/4668062

Density Map of Christchurch Quakes

Page 26: Data Visualization and Mapping using Javascript

Hexbin Graph

http://bl.ocks.org/4677419

Page 27: Data Visualization and Mapping using Javascript

http://bl.ocks.org/4710662

Two aspects of dataset shown, plus geography

Page 28: Data Visualization and Mapping using Javascript

http://bl.ocks.org/4718717

Earthquakes = Now with Timeline!

Page 29: Data Visualization and Mapping using Javascript

Ethics & Open Data

Hugh StimsonGeocology Research

@geocology

Page 30: Data Visualization and Mapping using Javascript

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?

Page 31: Data Visualization and Mapping using Javascript

Discussion & Questions

[email protected]://affinitybridge.com

@mackaffinity @affinitybridge

http://xkcd.com/523/

Page 32: Data Visualization and Mapping using Javascript

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