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
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)
Building dataviz for product
By Shirley Wu
Building dataviz for product
In progress
