Shirley Wu
custom data visualizations can be categorized into two broad categories:
- static dataset
- explore data for story
- communicate story to audience
- dynamic dataset
- interview stakeholders
- build tool for stakeholders to explore the data
examples:
New York Times, The Pudding, The Washington Post, etc.
examples:
scientific visualizations, internal business tools at Netflix, Uber, Airbnb, etc.
Data exploration
with Observables
and Vega-Lite
↓
Design with
and Gestalt Laws
↓
Code with
and D3.js shapes, layouts
↓
Finish with
Data exploration
with Observables
and Vega-Lite
↓
Design with
and Gestalt Laws
↓
Code with
and D3.js shapes, layouts
↓
Finish with
Bar chart
For categorical comparisons
Domain: categorical
Range: quantitative
Histogram
For categorical distributions
Domain: quantitative bins
Range: frequency of quantitative bin
Scatterplot
For correlation
2 categories, and the relationship between their quantitative values
Line chart
For temporal trends
Domain: temporal
Range: quantitative
Brainstorm some charts
to answer the questions.
Plug & Play:
Needs code:
Map individual or
aggregate data
elements to marks.
Map data attributes
to channels.
Visualization Analysis and Design. Tamara Munzner, with illustrations by Eamonn Maguire. A K Peters Visualization Series, CRC Press, 2014.
Visualization Analysis and Design. Tamara Munzner, with illustrations by
Eamonn Maguire. A K Peters Visualization Series, CRC Press, 2014.
Quantitative
Categorical
Temporal
Visualization Analysis and Design. Tamara Munzner, with illustrations by
Eamonn Maguire. A K Peters Visualization Series, CRC Press, 2014.
mark
bar
channels
x: category
y: quant
mark
point
channels
x: quant
y: quant
mark
point
channels
x: quant
y: quant
color: category
mark
point
channels
x: quant
y: quant
color: category
size: quant
Visualization Analysis and Design. Tamara Munzner, with illustrations by
Eamonn Maguire. A K Peters Visualization Series, CRC Press, 2014.
One-to-one mapping of data to channel
Multiple mappings of channel to mark (x, y, size, color usually)
Do not EVER map multiple data attributes to the same channel
the human mind naturally
groups individual elements
into patterns
↓
use in data visualization to
save processing time
Proximity
Put related objects near each other
(The Functional Art, Ch. 6 by Alberto Cairo)
Similarity
Indicate like objects (helpful if they can't be placed close to each other)
(The Functional Art, Ch. 6 by Alberto Cairo)
Enclosure
Helpful when creating visualizations with multiple sections
(The Functional Art, Ch. 6 by Alberto Cairo)
Take advantage of what people are already familiar with
Sketch all the things!
Titles, descriptions, and legends
to explain the visualization
Axes and annotations
to describe the data
d3-legend by Susie Lu
d3-annotation by Susie Lu
Movies have the biggest box office
during the summer and winter holidays
Books:
The Functional Art by Alberto Cairo
Visual Analysis and Design by Tamara Munzner
Online:
The little of visualization design
Information is Beautiful Awards