The document provides information about an upcoming data visualization workshop including: - Details about the workshop location and dates in July 2014 in Brisbane, Australia - Instructions on how to register and that tickets are almost sold out - An overview of the topics that will be covered including getting started with data visualization, preparing and cleaning data, creating maps and charts, and recommended tools to use - Examples of creating visualizations using CartoDB and D3 libraries

1. Open Knowledge Brisbane
Data Visualisation Workshop
Anna Gerber
Data Visualisation Workshop

2. 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

3. GETTING STARTED
Data Visualisation Workshop

4. "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

5. 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

6. Data-Driven Journalism
Data Visualisation Workshop
http://en.wikipedia.org/wiki/File:Data_driven_journalism_process.jpg

7. DATA
Data Visualisation Workshop

8. 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

9. 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

10. 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

11. Data Wrangler
Online
Data Visualisation Workshop

12. Open Refine
App
Data Visualisation Workshop
See
hEps://github.com/OpenRefine/OpenRefine/wiki/Recipes

13. 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

14. CREATING MAPS USING CARTODB
VISUALISATION
Data Visualisation Workshop

15. 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

16. 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/

17. Inspect & Edit Data
Data Visualisation Workshop

18. Customise Info Window
Data Visualisation Workshop

19. Select Visualisation Type
Data Visualisation Workshop

20. Supported Map Visualisations
Data Visualisation Workshop

21. Customise Category Icons
Data Visualisation Workshop

22. Customise CSS
Data Visualisation Workshop

23. Select Map Tiles
Data Visualisation Workshop

24. Customise Legend
Data Visualisation Workshop

25. Filtering
Data Visualisation Workshop

26. Share Visualisation
Data Visualisation Workshop

27. Public Visualisation
Data Visualisation Workshop

28. DEMO
Data Visualisation Workshop

29. Multiple Layers
Data Visualisation Workshop

30. 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

31. Filtering via Queries
Data Visualisation Workshop
Use SQL to filter values
and save to new dataset

32. Edit Geometries
Data Visualisation Workshop

33. 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

34. Select Changing Column
Data Visualisation Workshop

35. Specify Aggregation Function
Data Visualisation Workshop

36. Custom CartoCSS for value ranges
Data Visualisation Workshop

37. 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

38. 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

39. More Map-Based Visualisation Tools
• Development libraries
– Open Layers
http://openlayers.org/
– Leaflet
http://leafletjs.com/
– GeoExt
http://www.geoext.org/
Data Visualisation Workshop

40. CREATING WEB-BASED CHARTS
VISUALISATION
Data Visualisation Workshop

41. 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

42. 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

43. 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

44. 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

45. Rickshaw Example
• Example data: Average rainfall in mm per
year per state
Anna Gerber Intro to JavaScript
Year NSW & ACTNT 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

46. Rickshaw Example
Data Visualisation Workshop

47. 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/

48. Data Visualisation Workshop
NVD3
Examples

49. 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

50. Data Visualisation Workshop
hEp://www.visual-­‐literacy.org/periodic_table/periodic_table.html

51. 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