Building data visualizations

for product

Shirley Wu (@sxywu)

why talk about

dataviz in product?

illumio

contain cyber threats with adaptive segmentation

Illumination

keep track of who's going in and out, and who should actually be allowed in and out

visualization

framework

scale

user

team

1 visualization

workloads
(the "rooms")

traffic
("going in and out")

workloads grouped by labels

1 visualization

first implementation

force within force

collision detection

1 visualization

✨Abuse the force✨

1 visualization

and this is what we get for abusing the force.

(we're sorry)

1 visualization

how we fixed it

stripped out force layout

replaced it with our own layout algorithm

1 visualization

more performant

more orderly

maintains layout on refresh

1 visualization

lesson learned

customize and optimize
based on user feedback

2 framework

blocked traffic

allowed traffic

take action to allow traffic (turn it green)

1 visualization

2 framework

1 visualization

2 framework

so many user actions

couldn't keep track

of 'em all

1 visualization

2 framework

how we fixed it

recalculated everything on each user action

moved to react and flux

1 visualization

2 framework

no need to keep track

easy to reason about

"it just works"

1 visualization

2 framework

1 visualization

2 framework

lesson learned

start with a stupidly simple approach

3 scale

oh look, spaghetti!

1 visualization

2 framework

3 scale

how we fixed it

aggregated by groups

filtered as user drilled down

1 visualization

2 framework

3 scale

1 visualization

2 framework

3 scale

how we fixed it

stopped recalculating where least performant

replaced arrays with objects in data stores

1 visualization

2 framework

3 scale

loaded only enough data to render screen

lesson learned

optimize only when hit with a performance road block

1 visualization

2 framework

3 scale

1 visualization

2 framework

3 scale

4 user

what we noticed

always edge cases

1 visualization

2 framework

3 scale

4 user

building for want vs. need

lesson learned

get and use real data as often and as early as possible

1 visualization

2 framework

3 scale

4 user

5 team

what we noticed

esoteric visualizations

1 visualization

2 framework

3 scale

4 user

5 team

novel approaches

lesson learned

encourage rapid prototyping and exploration

1 visualization

2 framework

3 scale

4 user

5 team

customize and optimize
based on user expectation

get and use real data as often and as early as possible

start with a stupidly simple approach

optimize only when hit with a performance road block

encourage rapid prototyping and exploration

visualization

user

framework

scale

team

lessons learned

be flexible

explore when necessary

team is the most important

two last things

a survey for compiling experiences

a slack channel
(d3js #dataviz-in-product)
for community

(links on twitter @sxywu)

✨Thank you ✨

Especially to:

Alexander Lam
Xianlin Hu, Maxwell Brown, #TeamIllumio
Jana Beck, Ian Johnson, Zan Armstrong, Tony Chu,
Micah Stubbs, Elijah Meeks, Susie Lu,
Jim Vallandingham, Noah Veltman

for all their enthusiasm, support and feedback.

Reject Gifs hall of fame

(because they deserve love and attention too)