Creative

Data visualizations

Shirley Wu

@sxywu

(an idealized lol)
dataviz workflow

get data → explore data → design → code/make

(my actual lol)
dataviz workflow

get data

explore

data

design

🔄

code/make

so over the years, I've refined a process and collected tools to reduce the time it takes to finish a project

 

but everyone's process is a little bit different.  I offer my process as a starting point, but feel free to experiment and see what works for you. 

let's get started →

get data

collect your own data

find pre-existing data

Notebooks/phones

Excel

APIs

data.gov

Propublica

Pudding

Data is Plural

Google "[topic] + github, csv, json"

more intimately understand dataset

get data

collect your own data

find pre-existing data

look for outliers, missing values, duplicates

↘                     ↙

 

start with a curiosity!

↘                     ↙

 

clean & validate your data

Excel

R, Python

Charts

ChatGPT

explore data

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

explore data:
data types

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

exercise

List all the attributes,

ask all the questions!

explore data:

some basic Chart types

Bar chart

For categorical comparisons

 

Domain: categorical

Range: quantitative

EXPLORE DATA:

some basic Chart types

Histogram

For categorical distributions

 

Domain: quantitative bins

Range: frequency of quantitative bin

EXPLORE DATA:

some basic Chart types

Scatterplot

For correlation

 

2 categories, and the relationship between their quantitative values

EXPLORE DATA:

some basic Chart types

Line chart

For temporal trends

 

Domain: temporal

Range: quantitative

EXPLORE DATA:
tools

how to choose charts:

Data visualization catalogue

from Data to Viz

 

charting tools:

Excel

RAW Graphs

Observable Plot

R, Python

⚠️ ChatGPT

exercise

Brainstorm some charts

to answer the questions.

 

Quickly sketch them

and how you'd map the data.

explore data:
advice for bigger datasets

  • 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

data to design

  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

Design:
marks & channels

Map individual or

aggregate data

elements to marks.

 

Map data attributes

to channels.

Design:
marks

Visualization Analysis and Design. Tamara Munzner, with illustrations by Eamonn Maguire. A K Peters Visualization Series, CRC Press, 2014.

Design:
channels

Visualization Analysis and Design. Tamara Munzner, with illustrations by
Eamonn Maguire. A K Peters Visualization Series, CRC Press, 2014.

Quantitative

  • Position
  • Size
  • Color

Categorical

  • Shape
  • Texture
  • Color

Temporal

  • Animation

Design:
marks & channels

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

Design:
channel effectiveness

Visualization Analysis and Design. Tamara Munzner, with illustrations by
Eamonn Maguire. A K Peters Visualization Series, CRC Press, 2014.

Design:
marks & 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

readability

Titles, descriptions, and legends

to explain the visualization

 

Axes and annotations

to describe the data

 

Resource:

What to consider when using

text in data visualizations

Visual metaphors

exercise

Create a more refined sketch, keeping in mind marks, channels, and visual metaphors

Design:
Advice

  • Always keep your audience in mind, and what you are trying to communicate
  • Most of these are guidelines, not strict rules—but be intentional when you choose not to follow them
  • Always test your intuition by asking for feedback

design to code

  • Break it down!  What do you need to draw the marks?  What do you need to calculate the channels?

  • To draw marks: SVG (or HTML5 Canvas)

  • To calculate channels: D3 scales, shapes, and layouts (or straight-up math!)

SVG Elements

rect
x: x-coordinate of top-left
y: y-coordinate of top-left
width
height

circle
cx: x-coordinate of center
cy: y-coordinate of center
r: radius

text
x: x-coordinate
y: y-coordinate
dx: x-coordinate offset
dy: y-coordinate offset
text-anchor: horizontal text alignment

Hi!

path
d: path to follow

Moveto, Lineto, Curveto, Arcto

code:
D3 api

For translating raw data to what SVG needs to draw

Take output of layout calculations and draw SVG elements

Sometimes all you need are scales to get from data to screen space

Often times, you may need specific layouts.

These output x/y positions

And these generate path commands

Great dataviz-specific interactions

more svg for

context & aesthetics

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

code:
advice

code:
d3 alternatives

Charting tools:

Observable Plot & Frameworks

RAW Graphs

Flourish

Datawrapper

 

Javascript libraries

Svelte + D3

Vue + D3

P5.js

great for interactivity

← great for prototyping

resources

Books:

The Functional Art by Alberto Cairo

 

Online:

Datawrapper Blog

Flowing Data

 

Data Visualization Society

Information is Beautiful Awards

 

Creative data visualizations (2024)

By Shirley Wu

Creative data visualizations (2024)

  • 385