Guest lecture on data visualisation to students studying data journalism at Melbourne University.

1. Data Visualisation
Ben Hosken
ben@flinklabs.com
@flinklabs

3. Melbourne trains

4. Mobile phone locations

5. Shopping Trolley Movement

6. Service Navigation

7. Social Networks

8. F1 Racing

9. Sin in Melbourne

10. Housing and real estate

11. Introduction

12. Interactive visual representation
of data to improve cognition

13. It is not new

14. Data telling stories

15. Exploration and Engagement

16. Good and Bad

17. Visual Cortex FTW

18. Accelerating data
48 hours of video every minute.
35,000 “likes” every minute.
175 million tweets every day.
30B FB shares each month.

19. 3 Vs of Big Data
Velocity
Volume Variety

20. Accelerating power

21. Changing expectations

22. Consumer devices leading the way

23. Tells a story you can interact with

24. Data visualisation turns
something you want to find into
something you can see - J Stray

25. Data Visualisation Process
Define Data Design Develop Deliver
Define the problem and Gather the Data Brainstorm ideas Develop "architecture Deliver final product
high level goals Load and explore data Sketch rough designs tracer bullet" Install software
Agree on scope and Produce data patterns Create concepts Code iterations of product Handover to client
timings Identify potential narrative Develop interactive Test and resolve issues Prepare support channels
Understand the target "hot spots" prototypes Conduct final QA Launch visualisation
audience and platforms Discuss with target Present alternatives Conduct post mortem
Kick off project audience

26. The Reality

27. Where to start

28. Audience
?

29. What is the purpose!

30. Multi-faceted team

31. Data’s Journey

32. Tell the story don’t just show the data

33. 1000s of stories

34. Draw the viewer into the data

35. Data

36. Big data often means big mess

37. Toiling in the Data Mines

38. Not just the averages

39. Anscombe’s Quartet

40. Maths - Triple M + R
Mean, median and mode are three kinds of “averages”.
Let’s use this set of numbers as an example 13, 18, 13, 14, 13, 16, 14, 21, 13
The mean is the "average" you're used to, where you add up all the numbers
and then divide by the number of numbers.
(13 + 18 + 13 + 14 + 13 + 16 + 14 + 21 + 13) ÷ 9 = 15
The median is the "middle" value in the list of numbers. To find the median,
your numbers have to be listed in numerical order, so you may have to rewrite
your list first.
13, 13, 13, 13, 14, 14, 16, 18, 21
The mode is the value that occurs most often. If no number is repeated, then
there is no mode for the list.
13 occurs 4 times. 14 occurs twice and the rest occur once. So 13 is the
mode.
And the range is the difference between the largest and smallest values.

41. Get the basics right

42. Don’t deceive with the data 1

43. Don’t deceive with the data 2
Q1 Q2 Q3 Q4
Sales $195,000 $196,000 $197,000 $202,000
Hockey Stick Growth Flat Growth
$202,000 $220,000
$200,000 $165,000
$198,000 $110,000
$196,000 $55,000
$194,000 $0
Q1 Q2 Q3 Q4 Q1 Q2 Q3 Q4
Sales Sales

44. Data Sources

45. Tools

46. Design for Data
Visualisation

47. What is design?
Design is a set of decisions about a product. It’s
not an interface or aesthetic, a brand or colour.
Design is the actual decisions. - Rebecca Cox

48. Points, lines and planes

49. Do they remind you of anything?
BIG HINT!!!
Points Lines Planes

50. Scale is relative

51. Issues with Colour

52. Issues with Colour

53. Author vs Viewer Driven
Martini Glass
Author driven, linear narrative initially
Opens up to viewer driven at end
Tell a story then exploration
e.g. Interactive news
Interactive Slideshow
Balance of author and viewer driven
Exploration at each stage
Primarily linear narrative
Drill Down Story
Viewer driven narrative
Initial high level overview
Viewer then drills into detail
e.g. Interactive map

54. Count the number of 5s
7 6 2 7 8 7 3 2 3 6
7 7 5 8 2 3 7 1 5 6
8 6 0 0 9 7 4 8 5 8
5 4 1 4 3 5 7 7 0 3
3 4 0 2 3 6 8 1 7 3
8 3 1 8 2 3 7 9 8 1
0 1 4 9 9 3 0 7 8 6
6 8 6 8 6 3 8 3 5 0
7 7 6 2 8 7 1 4 6 1
9 7 7 6 3 5 0 8 0 5
8 1 2 1 5 1 8 0 9 3

55. Count the number of 5s
7 6 2 7 8 7 3 2 3 6
7 7 5 8 2 3 7 1 5 6
8 6 0 0 9 7 4 8 5 8
5 4 1 4 3 5 7 7 0 3
3 4 0 2 3 6 8 1 7 3
8 3 1 8 2 3 7 9 8 1
0 1 4 9 9 3 0 7 8 6
6 8 6 8 6 3 8 3 5 0
7 7 6 2 8 7 1 4 6 1
9 7 7 6 3 5 0 8 0 5
8 1 2 1 5 1 8 0 9 3

56. Visual Encoding
Form Orientation Line Length Line Width Size
Shape Curvature Enclosure Motion
Colour Intensity Hue Position 2-D Grouping
S Few

57. Gestalt Principles of Visual Perception
Similarity Similarity Connection
Continuity Closure Enclosure
Proximity Proximity Proximity

58. Maps and Geo
Just because it is a location doesn’t mean it is best shown as a map.
Population
New South Wales
Victoria
Queensland
Western Australia
South Australia
Tasmania
Australian Capital Territory
Northern Territory
0 2,000,000 4,000,000 6,000,000 8,000,000
Compared to Victoria
New South Wales State/Territory Population
Queensland New South Wales 7,247,700
Victoria 5,574,500
Western Australia Queensland 4,513,000
South Australia Western Australia 2,387,200
South Australia 1,645,000
Tasmania Tasmania 511,700
Australian Capital Territory 370,700
Australian Capital Territory
Northern Territory 232,400
Northern Territory Australia 22,485,300
-100% -75% -50% -25% 0% 25% 50%

59. Driving and data

60. Demos

61. An Example - AFL Flags
http://www.flinklabs.com/projects/afl/aflflags.html

62. An Example - AFL Flags

63. Concept sketches

64. Climate Skeptics Network
http://www.flinklabs.com/clients/democracy/

65. Live Where?
http://www.flinklabs.com/projects/livewhere

66. Doing it Yourself

67. Raphael.js

68. Processing

69. Google Fusion Tables
About Fusion Ta
bles Search Sea rch this site
Ex ample Galle
ry Help
Fusion Tables
New Features Example Galle
Tour The applicat ion
| Using the API
| Any shape bo
ry
Video Gallery Demographics undaries | Info-r
| Businesses ich windows | Ma
Example Galle king data work
ry | Data gatherin
g | Crisis Respon
Tutorials se |
Talks & Papers
Request a featur
e
Fusion Tables AP
I
Follow @Google
FT on
Twitter
Tell th e story
with data
The Guardian Da Host data on lin
taBlog maps rio e
locations and su t Australia offers
spect s' addresse government da Gath er data in
context of socia s in tasets realtime
l factors. See sit online in Fusion Google election
e. How it Tables format. coverage hand
was done Cit izens can vie realtime data up led
w, filt er and do dates during the
hosted data wit wnload Iowa
h just a browser. GOP primary to
See site. deliver result s du
night as ballots ring the
were counted.
How it was done See site.
Simple in fograp
hics with Fu sio
n Tables
Troop levels ov
er time
The Al Jazeera tim
eline shows ho
have changed in w troop lev els in
Wh o's hacking the last ten years Afghanistan
? . See site.
You can visualize
data right from
Hacking Incide your Fusion Ta
nt Database (W ble data. The We
HID) provides inf b
statistical analy ormation for
sis of web appli
cat ions security
incidents. See sit
e.
Use th e Fu sio
n Tables APIs
Local newspa
pers, worldwi
Find a local pape de
r and read it in Look at Cook
language. See sit your own Explore Cook Co
e. unty's budget fro Sh are bike tra
m 1993 ils
to 2011 and lea Share your GPS
rn how the mo tracks wit h oth
spent. See site. ney is being er
mountain biking
enthusiasts by
the table itself. editing
See site. How
it w

70. D3 Examples Documentation
Source
en Documents
​ Overview
Data-Driv
les .
See more examp
to
you bring data
on data. D3 helps
nipulating do cuments based ities of
ript library for ma the full capabil
ards gives you
D3.js is a JavaSc is on web stand ualization
, SVG and CS S. D3’s emphas ining powerful vis
life using HTML mework, comb
yourself to a proprietary fra
rs without tying tion.
modern browse to DOM manipula
driven approach
compon ents and a data-
est version here:
Download the lat
ment
d3.v2.js - develop uction (minified)
d3.v2 .min.js - prod
s snippet:
release, copy thi
tly to the latest
Or, to link direc
ipt>
v2.js"></scr
"http:// d3js.org/d3.
<script src=
.
load on GitHub
s are also av ailable for down
The full sour ce and example
als.
Read more tutori
# Introduction Model (DOM), an
d then apply da
ta-driven
cument Object le from an
bind arbitrary da
ta to a Do rate an HTML tab
D3 allows you to use D3 to gene
ample, you can ooth
cument. For ex bar chart with sm
transformations
to the do interactive SVG
me da ta to create an
. Or, use the sa
array of numbers
eraction. solves
transitions and
int ture. Instead, D3
conceivable fea
that seeks to provide every pr oprietary
lithic framework ta. This avoids
D3 is not a mono nts based on da
tion of docume bilities of web sta
ndards
icient manipula
the crux of the
problem: eff sing the full capa
ordinary flexibility, expo ly fast, supp orting large
and affords extra d, D3 is extreme
representation minimal overhea le allows code
HTML 5 and SVG. With animation. D3 ’s functional sty
such as CSS3, for interaction and
namic behaviors ts and plugins.
datasets and dy on of componen
diverse collecti
reuse through a
t selections.
Read more abou
# Selections thod names are
verbose, and the
tedious: the me ple, to
3C DOM API is state. For exam
nts using the W of temporary
Mo difying docume nual iteration and bookkeeping
oach requires ma
imperative appr raph elements:
t color of parag
change the tex
");
ByTagName("p
.getElements
hs = document i++) {
var paragrap aphs.length;
0; i < paragr
for (var i = paragraphs.i
tem(i);
te", null);

71. Resources
Show me the numbers - Stephen Few
Guide to Information Graphics - Dona Wong

72. Inspiration

73. Hans Rosling Video

74. Data visualisation often shows
you answers to questions you
didn’t know you had