✨ lesson #1 ✨
(data)
Be curious, and get creative
with the data gathering.
data, design, code
✨📊✨
Shirley Wu
@sxywu
Hi, I'm Shirley!
I'm an independent creator
of data visualizations.
of data visualizations.
2012: software engineer at big data company
2014: front-end dev for dataviz product
2016: freelance data visualization
past projects
&
lessons learned
(data, design, code)
How do relationships
change between characters?
What recurring phrases
are associated with whom?
1.
go through lyrics,
noting recurring phrases
2.
group phrases into themes
3.
go through lyrics again,
manually entering the themes
4.
also enter characters
and conversations
5.
aggregate by song
and line number
✨ lesson #2 ✨
(data & design)
Make sure to explore the data
before starting on the design.
Where and when
do I take my pictures?
What metadata
does each photo have?
trip it was taken on
day it was taken on
hue, saturation, lightness
list out data attributes,
assign them to visual channels
(and watch out for extremes)
✨ lesson #3 ✨
(design)
Use visual metaphors and
design to maximize delight.
(link to article)
Goals for New York visual
Highlight furthest flights
NY bought for their homeless
Show most frequent
destinations for NY's homeless
Highlight furthest flights
NY bought for their homeless
map
bar chart
Show most frequent
destinations for NY's homeless
✨ lesson #4 ✨
(code)
Draw shapes with
SVG paths and trigonometry.
M0,0 C50,40 50,70 20,100
L0,85
L-20,100
C-50,70 -50,40 0,0
L0,85
L-20,100
C-50,70 -50,40 0,0
✨ lesson #5 ✨
(code)
Combine d3 with
vue and greensock
for more efficient coding.
d3
scales and shapes to translate data into screenspace
axes and brushes for common dataviz patterns
vue
reactivity system to replace D3's enter-update-exit pattern and dispatch system
greensock
tween with vue to replace D3's transition
timeline for multi-step animations
fewer lines of code
faster development
talks
D3 & React
(2017)
D3 & React, a Follow-Up
(2018)
Thank you!
data, design, code
✨📊✨
Shirley Wu
@sxywu