datavis_slides
Data Visualization
Visual Encoding: Theory & Practice
Matt Kaemmerer (mattk@spiceworks.com)
Graphs show us
truths
that raw numbers
don't show
Numbers vs Visuals
1,000,000
Anascombe's Quartet
I
II
III
IV
x
y
x
y
x
y
x
y
10.0
8.04
10.0
9.14
10.0
7.46
8.0
6.58
8.0
6.95
8.0
8.14
8.0
6.77
8.0
5.76
13.0
7.58
13.0
8.74
13.0
12.74
8.0
7.71
9.0
8.81
9.0
8.77
9.0
7.11
8.0
8.84
11.0
8.33
11.0
9.26
11.0
7.81
8.0
8.47
14.0
9.96
14.0
8.10
14.0
8.84
8.0
7.04
6.0
7.24
6.0
6.13
6.0
6.08
8.0
5.25
4.0
4.26
4.0
3.10
4.0
5.39
19.0
12.50
12.0
10.84
12.0
9.13
12.0
8.15
8.0
5.56
7.0
4.82
7.0
7.26
7.0
6.42
8.0
7.91
5.0
5.68
5.0
4.74
5.0
5.73
8.0
6.89
Encode
categorical, ordinal & quantitative
data
into visual channels
Categorical Data
Example categories:
- Vendors: Dell, HP, Microsoft, Cisco, ...
- Countries: America, Brazil, India, Japan, ...
- Department: Sales, Marketing, Development, IT, ...
Displaying Categorical Data
Ordinal & Quantitative Data
Ordinal:
- Shirt Size: S, M, L, XL, ...
- Ranking: 1st, 2nd, 3rd, ...
- Versions: 6.0, 6.1, 6.2, 7.0, ...
Quantitative:
- Prices: $299, $540, $1095, ...
- Followers: 1000 followers, 28500 followers, ...
- Time: 10:00AM, 12:00PM, 3:30PM, ...
Displaying Ordinal & Quantitative Data
Example
Credit: Mike Bostock (Based on E.J. Marey's graphical train schedule)
- vertical position ↔ distance
- horizontal position ↔ time
- color ↔ speed
In D3
-
Map categorical & ordinal data to visual channels with d3.scale.ordinal()
-
Map quantitative data to visual channels with d3.scale.linear()
-
Set attributes on svg elements with selection.attr(...)
Visual channels
are not
created equal
Effectiveness
Visual channels follow Steven's Power Law:
Sensation = Intensityn
- For length, n=1If we double the length of a line, it looks twice as long.
- For area, n=0.7If we double the area of a square, it looks less than twice as big.
- For saturation, n=1.7If we double the saturation of a color, it looks more than twice as saturated.
Integrality & Seperability
Popout
In D3
-
Interpolate color scales with d3.interpolateHcl or d3.interpolateLab
-
Use tried & true color scales from d3/lib/colorbrewer
-
Test your charts with other people to make sure they communicate well
A quick
introduction
to using
SVG
SVG Primer
SVG Primer
Let's
build a
graph
Building A Graph
Building A Graph
Takeaways
- Visualizing data often shows insights that analyzing data doesn't show.
- Use visual channels effectively to show the most important data.
- Use color carefully to enhance your visualizations. Make sure they still work in black & white.