data visualisation workshop (govhack brisbane 2014)
DESCRIPTION
TRANSCRIPT
![Page 1: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/1.jpg)
Open Knowledge Brisbane Data Visualisation Workshop
Anna Gerber
Data Visualisation Workshop
![Page 2: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/2.jpg)
GovHack Brisbane 2014
• July 11 – 13 2014 • The Cube, Level 6, P Block, QUT Gardens
Point Campus • Register at
http://www.govhack.org/register-2014/ • Tickets are almost sold out • We need volunteers and mentors
Data Visualisation Workshop
![Page 3: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/3.jpg)
GETTING STARTED
Data Visualisation Workshop
![Page 4: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/4.jpg)
"Communica*ng complex data and intricate ideas through clear and beau*ful visual storytelling."
-‐ Tobias Sturt – Design Manager, The Guardian Digital Agency
Data Visualisation Workshop
![Page 5: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/5.jpg)
If a picture paints 1000 words…
… what do you want your visualisation to say?
– Insightful vs Infotainment – Exploratory vs Explanatory
• What data will you use? • Does the data need processing? • What type(s) of visualisations will you use? • What tools can you use to build it?
Data Visualisation Workshop
![Page 6: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/6.jpg)
Data-Driven Journalism
Data Visualisation Workshop
http://en.wikipedia.org/wiki/File:Data_driven_journalism_process.jpg
![Page 7: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/7.jpg)
DATA
Data Visualisation Workshop
![Page 8: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/8.jpg)
Where to find Open Gov Data?
• Open Data Portals: – http://data.gov.au/ – http://data.qld.gov.au/ – http://data.brisbane.qld.gov.au/
• Clearing houses (reports) • See http://www.govhack.org/data/ for more
Data Visualisation Workshop
![Page 9: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/9.jpg)
Preparing the Data
• Processing for machine readability – Data extraction, scraping – Splitting / parsing
• Cleaning: – Normalizing values / units – Correcting errors
• Filtering • Geocoding • Connecting / mapping
Data Visualisation Workshop
![Page 10: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/10.jpg)
Data Preparation Tools
• DataWrangler http://vis.stanford.edu/wrangler/
• OpenRefine (formerly Google Refine)http://openrefine.org/
• CSVKit https://github.com/onyxfish/csvkit
• Tabula http://source.mozillaopennews.org/en-US/articles/introducing-tabula/
Data Visualisation Workshop
![Page 11: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/11.jpg)
Data Wrangler
Online Data Visualisation Workshop
![Page 12: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/12.jpg)
Open Refine
App Data Visualisation Workshop
See hEps://github.com/OpenRefine/OpenRefine/wiki/Recipes
![Page 13: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/13.jpg)
Geocoding
• If data does not already include geographic co-ordinates it may be necessary to geocode (i.e. look up based on address, locality etc)
• Google, Mapquest provide free services • http://opensas.wordpress.com/
2013/06/30/using-openrefine-to-geocode-your-data-using-google-and-openstreetmap-api/
Data Visualisation Workshop
![Page 14: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/14.jpg)
CREATING MAPS USING CARTODB VISUALISATION
Data Visualisation Workshop
![Page 15: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/15.jpg)
CartoDB
• Free and premium accounts available: http://cartodb.com/
• Open Source, so you can host your own https://github.com/CartoDB/cartodb
• Powered by PostgreSQL / PostGIS
Data Visualisation Workshop
![Page 16: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/16.jpg)
CartoDB Dashboard
Data Visualisation Workshop
Drag and drop CSV, Excel, KML or GIS files directly into the browser to import
Using hEp://data.brisbane.qld.gov.au/index.php/dataset/public-‐drinking-‐fountain-‐taps/
![Page 17: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/17.jpg)
Inspect & Edit Data
Data Visualisation Workshop
![Page 18: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/18.jpg)
Customise Info Window
Data Visualisation Workshop
![Page 19: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/19.jpg)
Select Visualisation Type
Data Visualisation Workshop
![Page 20: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/20.jpg)
Supported Map Visualisations
Data Visualisation Workshop
![Page 21: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/21.jpg)
Customise Category Icons
Data Visualisation Workshop
![Page 22: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/22.jpg)
Customise CSS
Data Visualisation Workshop
![Page 23: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/23.jpg)
Select Map Tiles
Data Visualisation Workshop
![Page 24: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/24.jpg)
Customise Legend
Data Visualisation Workshop
![Page 25: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/25.jpg)
Filtering
Data Visualisation Workshop
![Page 26: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/26.jpg)
Share Visualisation
Data Visualisation Workshop
![Page 27: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/27.jpg)
Public Visualisation
Data Visualisation Workshop
![Page 28: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/28.jpg)
DEMO
Data Visualisation Workshop
![Page 29: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/29.jpg)
Multiple Layers
Data Visualisation Workshop
![Page 30: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/30.jpg)
Combining Datasets • Combine Tables to:
– join a dataset representing regional boundaries with a dataset that aggregates data by regions (e.g. Census data)
– mashup data from different sources • CartoDB supports:
– Joining on shared column via GUI – Spatial joins via GUI – Creating new tables from custom
SQL queries
Data Visualisation Workshop
![Page 31: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/31.jpg)
Filtering via Queries
Data Visualisation Workshop
Use SQL to filter values and save to new dataset
![Page 32: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/32.jpg)
Edit Geometries
Data Visualisation Workshop
![Page 33: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/33.jpg)
Animating Maps Using Torque
• For example, display changing values over time
• Only available for point-based data • You can force polygons to points via SQL e.g.
SELECT ST_Centroid(the_geom) FROM {table_name}
Data Visualisation Workshop
![Page 34: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/34.jpg)
Select Changing Column
Data Visualisation Workshop
![Page 35: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/35.jpg)
Specify Aggregation Function
Data Visualisation Workshop
![Page 36: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/36.jpg)
Custom CartoCSS for value ranges
Data Visualisation Workshop
![Page 37: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/37.jpg)
CartoDB API
• SQL API and CartoDB.js • Allows development of custom web apps or
visualisations, e.g. in combination with other JavaScript libraries
• http://developers.cartodb.com/documentation/apis-overview.html
Data Visualisation Workshop
![Page 38: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/38.jpg)
More Map-Based Visualisation Tools
• Point & Click • Open Heat Map
http://www.openheatmap.com/ • Google Maps and Fusion Tables
https://drive.google.com/ • MapBox TileMill
https://www.mapbox.com/tilemill/ • ColorBrewer (colour scheme generator)
http://colorbrewer2.com/
Data Visualisation Workshop
![Page 39: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/39.jpg)
More Map-Based Visualisation Tools
• Development libraries – Open Layers
http://openlayers.org/ – Leaflet
http://leafletjs.com/ – GeoExt
http://www.geoext.org/
Data Visualisation Workshop
![Page 40: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/40.jpg)
CREATING WEB-BASED CHARTS VISUALISATION
Data Visualisation Workshop
![Page 41: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/41.jpg)
Point & Click Chart Tools
• Google Charts and Google Fusion Tables http://imagecharteditor.appspot.com/
• Infogr.am http://infogr.am/
• Data Wrapper http://datawrapper.de/
• Tableau Public http://www.tableausoftware.com/public/
Data Visualisation Workshop
![Page 42: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/42.jpg)
Data-Driven Documents (d3)
• http://d3js.org/ • Javascript Library for binding data to the
Document Object Model (DOM) and applying transformations
• Not just for Charts e.g. 1900+ d3 visualisation examples: http://christopheviau.com/d3list/gallery.html
Data Visualisation Workshop
![Page 43: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/43.jpg)
Why d3?
• Interactive web-based charts • Based on web standards (SVG, CSS) • Works in modern browsers, including mobile HOWEVER • Somewhat abstract • Steep learning curve • Tutorials:
http://alignedleft.com/tutorials/d3
Data Visualisation Workshop
![Page 44: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/44.jpg)
Chart Libraries Built on d3
• Simplify creating commonly used charts with d3: – NVD3
http://nvd3.org/ – d3.Chart
http://misoproject.com/d3-chart/ – Rickshaw
http://code.shutterstock.com/rickshaw/
Data Visualisation Workshop
![Page 45: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/45.jpg)
Rickshaw Example
• Example data: Average rainfall in mm per year per state
Anna Gerber Intro to JavaScript
Year NSW & ACT NT QLD SA TAS VIC WA 2005 498 477 478 206 1250 616 306
2004 493 637 610 214 1223 578 463
2003 484 686 518 260 1227 611 388
Data source:hEp://www.water.gov.au/WaterAvailability/Wha*sourtotalwaterresource/Rainfalldistribu*on/index.aspx?Menu=Level1_3_1_2
![Page 46: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/46.jpg)
Rickshaw Example
Data Visualisation Workshop
![Page 47: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/47.jpg)
Rickshaw Chart JS var chartData = [ { name: 'NSW & ACT', data: [ { x: 2003, y: 400 }, { x: 2004, y: 200 }, { x: 2005, y: 0 } ], color: 'steelblue' }, { name: 'NT', data: [ { x: 2003, y: 686 }, { x: 2004, y: 637 }, { x: 2005, y: 477 } ], color: 'orange' } // … ]
Data Visualisation Workshop
// Use the Rickshaw Library to create a graph var graph = new Rickshaw.Graph( { // aEach the graph to the chart element element: document.querySelector("#chart"), // render as a stacked area chart renderer: 'area', series: chartData } ); graph.render();
Code: http://jsfiddle.net/zN8Eh/5/
![Page 48: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/48.jpg)
Data Visualisation Workshop
NVD3 Examples
![Page 49: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/49.jpg)
Combine d3 + CartoDB
• D3 can be used to draw maps using GeoJSON from the CartoDB API e.g. to overlay charts on maps
• Examples: Bubble Map:http://bl.ocks.org/andrewxhill/4448162 Earthquakes visualisation:http://bl.ocks.org/andrewxhill/4455569
Data Visualisation Workshop
![Page 50: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/50.jpg)
Data Visualisation Workshop
hEp://www.visual-‐literacy.org/periodic_table/periodic_table.html
![Page 51: Data Visualisation Workshop (GovHack Brisbane 2014)](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c6b5c84a79597d178b4600/html5/thumbnails/51.jpg)
Resources • Videos:
– http://datajournalism.stanford.edu/ – http://teachingtosee.org/film/TeachingToSee.html
• Podcast: – http://datastori.es/
• Websites: – http://www.visualizing.org/ – http://visual.ly/ – http://flowingdata.com/ – http://www.visualcomplexity.com/vc/ – http://www.informationisbeautiful.net/
Data Visualisation Workshop