Data vis thinking
Anita Lillie
September 24, 2015
Who am I?
- Previously: Exploratorium, Practice Fusion, LinkedIn, Nokia, MIT Media Lab, Stanford
- Music, social networks, genetics, healthcare
- Now: Data/UX Lead at Vida Health
I design and develop data interfaces.
How to think about data stories
Where I find inspiration...
The bulk aisle
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/657742/whole-foods-bulk-aisle.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/657744/whole-foods-bulk-zoom.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/657743/whole-foods-spices.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/661800/whole-foods-spices.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/661800/whole-foods-spices.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/661828/whole-foods-spices_cropped.jpg)
Wear on doors
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/662266/Screen_Shot_2014-09-24_at_10.31.36_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/662267/Screen_Shot_2014-09-24_at_10.31.47_PM.png)
Footsteps after a puddle
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/660325/puddle12-7.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/660345/boot-print_left-01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/660346/boot-print_right-01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/661831/puddle-white-01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/660345/boot-print_left-01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/660345/boot-print_left-01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/661831/puddle-white-01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/660345/boot-print_left-01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/660346/boot-print_right-01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/660346/boot-print_right-01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/664694/boot-print_left-01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/661831/puddle-white-01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/660346/boot-print_right-01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/664686/boot-print_left-01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/661831/puddle-white-01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/661907/puddle_step-01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/661831/puddle-white-01.png)
Tennis
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1748049/GRASS1-superJumbo.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1748050/maxresdefault96.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/661882/SOM_Heatmap_Example_in_R_-_No_Legend.png)
Tans.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/660445/6eb96d6037f3baac87db4ed196462690.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/660447/3658386390_655dd0b062.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/660449/farmer-tan.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/660451/tan.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/660452/unnamed.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756407/trucker-damage-face_web.jpg)
Carnegie Mellon fence
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/660528/1.jpg)
Carnegie Mellon fence
Carnegie Mellon fence
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/660521/3_Fence4.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/660526/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/anitalillie/images/661943/stacked_area-01.png)
Evidence of something interacting with something else
...leaving its mark.
All of these examples are
Why physical metaphors?
- Human cognition is built for these physical things. We see these kinds of patterns easily.
- Thinking in this way helps you choose visual mappings that make sense.
- Making something mimic the real world gives it meaning.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756729/li_profile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1760235/imgres.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1758768/X_black.png)
Practice
backwards-engineering naturally-occurring visualizations.
- You will ask the right questions.
- You will come up with better data stories.
- You will tell them in a more intuitive way.
@anitalillie
anitalillie@gmail.com
http://www.linkedin.com/in/alillie/
Data
Visualization
Design
Data
Visualization
Design
Data
- What data do you have?
- Can you get more?
- Where is it broken? Missing?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756777/Screen_Shot_2015-09-23_at_8.16.37_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756779/Screen_Shot_2015-09-23_at_8.16.49_PM.png)
Data...
- How capable is your user with data?
- How about statistics?
- How deep to go?
for your users.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756729/li_profile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756730/linkedin_group_stats.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756731/pf_insight.png)
Your story
- What does your data say?
- Test with REAL data EARLY.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756745/Screen_Shot_2015-09-23_at_8.04.40_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756748/Screen_Shot_2015-09-23_at_8.05.00_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756762/Screen_Shot_2015-09-23_at_8.12.03_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756764/Screen_Shot_2015-09-23_at_8.12.19_PM.png)
Visualization
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756811/step1-381x300.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756813/line1-381x300.png)
What visuals make sense for your data?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756810/barsvslines.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756822/18ymos4n2x2xyjpg.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756824/18ymofsp5d0inpng.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756825/18ymny5d5wpgrpng.png)
Do you need a visualization?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1758768/X_black.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1758768/X_black.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1758768/X_black.png)
Privacy
- Showing too little data
- Adapting to different volumes of data
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756792/heatmap-2009-12-21.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1756808/Screen_Shot_2015-09-23_at_8.29.37_PM.png)
Iteration
...usually happens in code.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/190753/images/1758741/design_code.png)
Can your designers write code?
@anitalillie
anitalillie@gmail.com
http://www.linkedin.com/in/alillie/
Data vis thinking
By Anita Lillie
Data vis thinking
- 1,851