Cameron Yick

Twitter+Github: @hydrosquall

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

  • Past:
    • Motivating the need for speed
  • Present
    • Tools for building visuals
    • Using visuals as a thinking tool
  • Future
    • Beyond faster computers 🚀


  • Everyone
    • 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.

  1. Edit HTML/JS/CSS File
  2. Save file
  3. Switch to terminal, restart local server
  4. Switch to web browser, refresh web page
  5. 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*

  1. Hot Module Reloading (HMR)
  2. Notebook-style programming
  3. Graphical Knobs
  4. 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!)

- CodeSandbox*

(everything except component state-

                              demo from a Shirley Wu deck)

Locally (Extra work required to persist state)

- React: Create-React-App or Next.js

- Non-React apps: Sam Petulla's Gist-Roll (CNN)

- Retrofit existing CRA without ejecting with CRA-Rewired

- ParcelJS


- 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


My Teaching Notebooks @ New School

- Barchart to Lollipop Chart, Data Shaping, Maps 

- Animations + Interactions (Sorting, tooltips)

- Adding Annotations to Charts with Enigma Public


Students who had never coded before really liked this environment!


- "Intuitive!"

- "Matches the way I plan things"


Notebook Technologies

Use multiple languages in 1 notebook!


- ObservableHQ

  - Javascript, HTML, CSS

- Jupyter (Formerly Ipython Notebook)

  - Python, R, Julia, C, SQL, etc

  - Most JVM Languages via BeakerX

    - Groovy, Scala, Kotlin, Clojure, Spark

- Zeppelin

  - 20+ languages, particularly suited for "big data"

Graphical Knobs

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


- /, Powered by inlet.js

- Knobs for web browsers are mainstream!

  - Browser Devtools (Safari, Firefox, Chrome, IE...)

- Use Idyll to mix widgets into Markdown-style documents

- Curran Kelleher's

- Frontend Development

  - Storybook.js Component Library Knobs

... 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

- (enables realtime collaboration, like GDocs)

-,, Gabriel Florit's livecoding


LiveReload: Predecessor to HMR (slide)

Real-Time Feedback in your Code Editor (slide)



- Curran Kelleher's



- Blockup (Washington Post, The Pudding, Bocoup)

- (if you don't like the command line)

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

Techniques for⚡️Thinking

  1. Visual Filtering vs "filter form"
  2. Speedy What-if Scenario Modeling

Visual Crossfilter

Interactions on graphs filter other graphs to find key points

Crossfilter Implementations


- Tableau Dashboards ("Linked Views")

- Crossfilter with Vega-Lite

- Crossfilter.js



- Cross Highlight

- Cross Annotate (e.g. sliding a ruler or threshold line)

- Linked summary-card on hover


Scenario Analysis

1. Let users "play" with scenarios inputs in realtime

2. Provide "default parameters" to help casual browsers


NYTimes "Rent or Buy" Calculator

(Mike Bostock, Shan Carter, Archie Tse)

India 2047 Energy Securities Scenarios: Import Dependence Simulator

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

twitter/github: hydrosquall

enigma is hiring!


Coming soon:

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 for his essays and code.

Two Worlds

Presentation and Problem-Solving