how to think about data

Shirley Wu

@sxywu

custom data visualizations can be categorized into two broad categories:

expository

- static dataset

- explore data for story

- communicate story to audience

expository

Data: top 10 blockbusters every year for the last two decades

Goal: come up with a design and implement it together

(Yay participation!)

Raw data in JSON / CSV

data exploration

1. List data attributes
2. Ask questions
3. Explore the data

We will use an Observable notebook for this.

data exploration:
data types

• Categorical (movie genres)
• Ordinal (t-shirt sizes)
• Quantitative (ratings/scores)
• Temporal (dates)
• Spatial (cities)

data exploration

List all the attributes,

ask all the questions!

(Notebook)

(Quick Observable Guide)

data exploration:

some basic chart types

Bar chart

For categorical comparisons

Domain: categorical

Range: quantitative

Histogram

For categorical distributions

Domain: quantitative bins

Range: frequency of quantitative bin

data exploration:

some basic chart types

Scatterplot

For correlation

2 categories, and the relationship between their quantitative values

data exploration:

some basic chart types

Line chart

For temporal trends

Domain: temporal

Range: quantitative

data exploration:

some basic chart types

data exploration

Brainstorm some charts

to answer the questions.

data exploration:

exercise (together)

Starter notebook

Full notebook

Vega-Lite

data exploration:

more charting tools

Plug & Play:

Raw Graphs

 Datawrapper

Tableau

Needs code:

R (ggplot2)

Python (matplotlib)

One Chart, Nine Tools

data exploration:
advice

• Check for missing data, and the validity of the data
• Focus on one question at a time (it's very easy to get sidetracked with a tangent)
• If there IS an interesting tangent, make a note for later
• If the question leads to a dead-end, explore another question or the tangent you found earlier
• Don't be afraid to go out and look for additional data to aid your exploration
• Sometimes, no interesting pattern IS very interesting

1. Concentrate on the takeaways to communicate across
2. What does that mean in terms of the data?  (Individual or aggregate elements? Which attributes?)
3. Map the relevant data to visual elements

Map individual or

aggregate data

elements to marks.

Map data attributes

to channels.

• 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

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)

Sketch all the things!

1. What is your main message(s)?
2. What marks will you use?  Do they represent individual data points, or aggregate?
3. What channels will your marks use?  How do they support your message?

Titles, descriptions, and legends

to explain the visualization

Axes and annotations

to describe the data

d3-annotation by Susie Lu

• Patterns
• Gradients
• Text on a path
• SVG filters
  (blurs, drop-shadows)
• Clipping & masking

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:

Datawrapper Blog

Flowing Data

The little of visualization design

The Pudding

Information is Beautiful Awards

Data Visualization

for React Developers

↓

Intro to D3

↓

Building Custom

Data Visualizations