data vis engineer @datadoghq. currently into visual exaptation | creative (en)coding | metalearning | swimming. he/him
NYC Data Visualization - July 17, 2018
What does it mean to go fast?
Top Gun - 1986
Minimize time between when you have an idea, and when that idea gets executed
Outline: Speed, Now and Then
- Motivating the need for speed
- Tools for building visuals
- Using visuals as a thinking tool
- Beyond faster computers 🚀
- Seek speedy feedback in all tools
If you don't code
- Acquiring a craving for speed
If you do code
- Learn a trick for going even faster ⚡️!
Speed != Computers
Amy Cesal's #daydohviz - @BecomingDataSci's Crafty Viz Contest
Imagine Microsoft Word, with 5 second delays between button presses and the screen changing.
Imagine coding with a 5+ clicks between keypresses and seeing whether changes to the code changes the page as expected.
- Edit HTML/JS/CSS File
- Save file
- Switch to terminal, restart local server
- Switch to web browser, refresh web page
- Interact with page to restore local state
No need to imagine...
This is the state of many intro web coding classes!
(Worse if you have to wait for code to compile)
There must be a better way!
A ⚡️Tour of the Present*
- Hot Module Reloading (HMR)
- Notebook-style programming
- Graphical Knobs
- Extras (Explore on your own)
Hot Module Replacement (HMR)
- Idea: Eliminate unnecessary clicking + waiting
- Bundles code, reloads server AND refreshes browser on save
- Maintains application state if possible (avoid reapplying filter)
Refueling while in flight
How to use HMR (Preconfigured)
Remotely (No extra setup!)
(everything except component state-
demo from a Shirley Wu deck)
Locally (Extra work required to persist state)
- Non-React apps: Sam Petulla's Gist-Roll (CNN)
- Retrofit existing CRA without ejecting with CRA-Rewired
- Run code "1 cell at a time" to think about 1 thing at a time
- Avoid repeating expensive operations (data downloading)
- Easier to reason about single cells than whole file
- See results right next to code
D3.js Observable Notebooks
When searching for a value that is "subjectively" right, manipulating controls is often faster than typing
Graphical Knobs- Colors
Graphical Knobs- Annotation
from my Observable d3 Tutorial
Graphical Knobs: Tools
... many more!
Grammars of Graphics - express more with less typing
- Vega-Lite: Tutorial with NY Public Data + ObservableHQ
- Thinking in ggplot (mapping data to visual variables)
- Generally- charting libraries over lower-level languages
"Livecoding" environments - eliminating the "save" step
- Datavis.tech (enables realtime collaboration, like GDocs)
- Tributary.io, Blockbuilder.org, Gabriel Florit's livecoding
LiveReload: Predecessor to HMR (slide)
Real-Time Feedback in your Code Editor (slide)
Predecessor to HMR, covers other languages (SCSS/SASS -> CSS, Pug -> HTML, etc)
In-Editor Code Feedback
- Inline ESLint: "Spellcheck/Syntax Checking"
- Jest/WallabyJS: Runs tests and show results inline
- Visual Filtering vs "filter form"
- Speedy What-if Scenario Modeling
Interactions on graphs filter other graphs to find key points
1. Let users "play" with scenarios inputs in realtime
2. Provide "default parameters" to help casual browsers
The Future of⚡️Visuals
Using space and animation creatively to display the results of many scenarios at once / single complex scenarios, but without creating cognitive overload!
From Bret Victor's "Inventing on Principle"
Bret Victor Game Clip
Excerpt from Bret's "Inventing on Principle"
Visualizing, Fast and Slow
enigma is hiring!
Remaking historical/textbook visualizations with d3 + React
Feedback tells you if your ideas work are working or not!
Faster feedback =>
- more iterations before you get tired
- enables new kinds of ideas
This applies to not only learning + building data visualizations, but enabling effective analytical problem solving in general!
(Go back through the slides for ways to speed up your data visualization development, and ideas on how to use your visuals to speed up peoples' problem solving).
TL;DR: Why Pursue Speed?
- Cover Image: Daniel Kahneman's Thinking Fast and Slow
- Ideas heavily influenced by Bret Victor's work on Explorable Explanations, Live Coding, etc. For more in depth coverage of any of the ideas in this presentation, check out worrydream.com for his essays and code.
Presentation and Problem-Solving
Visualizing Fast and Slow
By Cameron Yick