A talk at Data Visualization Summit 2014 in Santa Clara, CA ABSTRACT: What is the thought process that transforms data into visualizations? In this presentation, I will talk about guidelines that will help you when starting with raw data, walk through standard techniques, and also discuss things to keep in mind when making design decisions.

1. VISUALIZATION
Krist Wongsuphasawat (@kristw)
FROM DATA TO
Senior Data Visualization Scientist, Twitter

2. Twitter Analytics / Visual Insights
Internal
Dashboarding system
Exploratory data visualization tools
!
External
Public facing visualizations
#interactive

3. #interactive
http://twitter.github.io/interactive

4. Examples

5. What are visualizations?

6. pretty graphics
POWER OF THE EYES

7. pretty
MEANINGFUL

8. Anscombe’s Quartet
X Y
10.0 8.04
8.0 6.95
13.0 7.58
9.0 8.81
11.0 8.33
14.0 9.96
6.0 7.24
4.0 4.26
12.0 10.84
7.0 4.82
5.0 5.68
X Y
10.0 9.14
8.0 8.14
13.0 8.74
9.0 8.77
11.0 9.26
14.0 8.10
6.0 6.13
4.0 3.10
12.0 9.13
7.0 7.26
5.0 4.74
X Y
10.0 7.46
8.0 6.77
13.0 12.74
9.0 7.11
11.0 7.81
14.0 8.84
6.0 6.08
4.0 5.39
12.0 8.15
7.0 6.42
5.0 5.73
X Y
8.0 6.58
8.0 5.76
8.0 7.71
8.0 8.84
8.0 8.47
8.0 7.04
8.0 5.25
19.0 12.50
8.0 5.56
8.0 7.91
8.0 6.89
#1 #2 #3 #4

9. Anscombe’s Quartet
Property Value
Mean of X 11.0
Variance of X 10.0
Mean of Y 7.5
Variance of Y 3.75
Correlation between X and Y 0.816
Linear regression y = 3.0 +0.5x
#1 #2 #3 #4
Identical statistics!

10. Anscombe’s Quartet
#1 #2 #3 #4
0!
2!
4!
6!
8!
10!
12!
0! 5! 10! 15!
0!
1!
2!
3!
4!
5!
6!
7!
8!
9!
10!
0! 5! 10! 15!
0!
2!
4!
6!
8!
10!
12!
14!
0! 5! 10! 15!
0!
2!
4!
6!
8!
10!
12!
14!
0! 10! 20!
but very different

11. Napoleon’s March
geography
time
course (attack/retreat)
quantity of troops
temperature
direction

12. London Cholera Outbreak

13. London Cholera Outbreak

14. Visualization
• Power
• Understand data quickly
• Discover hidden facts
• Usage
• Storytelling / Reporting
• Exploratory data analysis

15. “Visualization”
• Information Visualization (academia)
• InfoVis
• Data Visualization (commonly used)
• DataVis
!
• infographics (...)

16. How to start?
• What tool should I use?
!
!
DATA

17. How to start?
• What tool should I use?
!
!
!
1. What type of data do I have?
DATA

18. DATA
1) What type of data?

19. DATA
1) What type of data?
vis7
vis5
vis3
vis2
vis1
vis6
vis4
Many options...
Which visualization technique should I use?

20. 1) What type of data?
• Visualizations are categorized by data types:
• 2,3- dimensional
• Multi-dimensional
• Temporal
• Tree
• Network
• etc.

21. Let’s take a tour.

22. 2D, 3D data
(real world objects)
!
a.k.a. Scientific Visualization (SciVis)

23. 2D: Maps

24. 3D: Brain

25. Multi-dimensional data
abstract dimensions
(+ real world dimensions)

26. Flowers
species sepalLength sepalWidth petalLength petalWidth
setosa 5.1 3.5 1.4 0.2
setosa 4.9 3.0 1.4 0.2
setosa 4.7 3.2 1.3 0.2
virginica 4.6 3.1 1.5 0.2
virginica 5.0 3.6 1.4 0.2
virginica 5.4 3.9 1.7 0.4
DATA

27. Scatterplot
http://bl.ocks.org/mbostock/3887118
Sepal Length
Sepal Width

28. Scatterplot Matrix
http://bl.ocks.org/mbostock/4063663
Sepal
Length
Sepal
Width
Petal
Length
Petal
Width

29. Cars
Name
economy
(mpg)
cylinders
power
(hp)
weight
(lb)
0-60 mph
(s)
Ford Mustang 18 6 88 3139 14.5
Honda Accord 31.5 4 68 2045 18.5
Honda Civic 24 4 97 2489 15
Mazda RX-7 23.7 3 100 2420 12.5
DATA

30. Parallel Coordinates
http://bl.ocks.org/jasondavies/1341281

31. The Geography of Tweets
@miguelrios

32. The Geography of Tweets
@miguelrios
tweet counts latitude longitude
20,000 27.174526 78.042153
9,000 49.124093 52.201304
1,000 12.2995 31.59592
... ... ...
DATA
abstract
dimension
real world
dimensions

33. Temporal Data
value changes over time
events

34. Line charts
http://bl.ocks.org/mbostock/3884955

35. Calendar chart

36. Events on timeline
http://evolutionofweb.appspot.com/#/evolution/day

37. Trees
hierarchy

38. Tree
http://bl.ocks.org/mbostock/4339083

39. Stock Market
Financial
All stocks
Healthcare Technology ...
Apple Google Canon ...
DATA

40. TreeMaps
http://www.marketwatch.com/tools/stockresearch/marketmap

41. Icicle
http://bl.ocks.org/mbostock/1005873

42. Sunburst
http://bl.ocks.org/mbostock/4348373

43. Networks
nodes and edges

44. Character Co-occurrences
{!
nodes: [!
'valjean',!
'fantine',!
'cosette',!
...!
],!
edges: [!
{character1: 'valjean', character2: 'fantine', 10},!
{character1: 'valjean', character2: 'cosette', 5},!
...!
]!
}!
DATA

45. Node-link diagram
http://bl.ocks.org/mbostock/4062045

46. Matrix
http://bost.ocks.org/mike/miserables/

47. Combination
Multi-D + Temporal
Multi-D + Tree
Multi-D + Network
Temporal + Tree
Temporal + Network
...

48. Life Expectancy
(Multi-D + Temporal)
http://www.gapminder.org/videos/the-river-of-myths/

49. VISUALIZATION
visual encodings + interactions
tooltips
animation
highlight
filter
etc.
bar chart
line chart
matrix
node-link
treemaps
etc.
or multiple views
(data type)

50. DATA
1) What type of data?
vis7
vis5
vis3
vis2
vis1
vis6
vis4
Many options...
Which visualization technique should I use?

51. DATA
1) What type of data?
vis7
vis3
vis4
Less options...
Still, which one should I use?

52. How to start?
• What tool should I use?
!
!
!
1. What type of data do I have?
2. What do I want from the data?
DATA

53. 2) What do I want from the data?
• Many ways to visualize one type of data.
• Things to consider:
• audience (data scientist, execs, etc.)
• goal (storytelling, exploratory analysis)
• tasks

54. Storytelling
Exploratory

55. Four more years
https://www.youtube.com/watch?v=01un0ORjQps

56. Photogrid (Treemap + photo)
http://twitter.github.io/interactive/sochi

57. Soccer Tournament
https://uclfinal.twitter.com/

58. State of the Union
http://twitter.github.io/interactive/sotu2014/#p1

59. Ok, now tools.
1. What type of data do I have?
2. What do I want from the data?

60. Tools
Option 1: Programming library
Option 2: Packaged software
You have to write code.
(Mostly) no coding involved

61. Programming libraries
• d3.js, processing, R, etc.
!
• Copy and modify from examples.
• Can do custom stuffs (if you can figure out how)
• More overhead for common task

62. Packaged software
• Tableau (multi-dimensional)
• Gephi (graph)
• NodeXL (graph)
• Research projects (contact authors)
!
• Just use the software. No hassle of code/debug
• Limited functionalities to what the tools can do
• Custom designs more difficult

63. Ideal workflow
1. What type of data do I have?
2. What do I want from the data?
3. Pick appropriate techniques/tools
4. Done!

64. Ideal workflow
1. What type of data do I have?
2. What do I want from the data?
3. Pick appropriate techniques/tools
4. Done!
Not that easy!

65. Real-life workflow
data are dirty unsatisfied
transform
What type of data do I have?
Pre-process data
What do I want from the data?
Pick appropriate techniques/tools
See results change goal
change perspective

66. New year 2014
http://twitter.github.io/interactive/newyear2014/

67. Behind the scene

74. VISUALIZATION
FROM DATA TO
@kristw

75. VISUALIZATION
FROM DATA TO
@kristw
DATA first, not tools.

76. VISUALIZATION
FROM DATA TO
@kristw
DATA first, not tools.
visual encodings
(by data types)
+ interactionschoose:

77. VISUALIZATION
FROM DATA TO
visual encodings
(by data types)
+ interactions
DATA first, not tools.
@kristw
choose:
twitter.github.io/interactive

78. Thank you