Virtuoso data visualization

Aneesh Karve
May 9, 2014 · 6 min read

If you’re a student of data visualization, you want to learn from the leaders in your field. I recently attended a one day course in visualization by Jonathan Corum, Bret Victor, Mike Bostock & Edward Tufte. Below is a distillation of the course, followed by opportunities for further exploration, and ideas for improving the course.

Key insights

In one sentence, create explorable explanations.

Illustrate at human scale (JC)

Salt your graphics with objects and concepts that are familiar to your audience. Note the whales along the unelided yellow diving lines.

Jonathan Corum, The New York Times, Whale Illustrations by Nicholas D. Pyenson

For an example of illustrating abstract concepts, see The New York Times cartoons on the Higgs boson.

Think with the eyes and hands, not the mind

For a moment, ignore the rational mind. Scan the problem with unencumbered eyes and observe how the eyes react.

What is hardest of all? That which seems most simple: to see with your eyes what is before your eyes. — Goethe

To further quiet the rational mind, let the hand lead the eye. Just start drawing and see what emerges.

Sketch before you leap

Paper sketches are cheap and disposable, allowing for broad exploration before you fall in love with a suboptimal design. Sketches capture the soul of an idea. (See Bill Buxton’s Sketching User Experiences for more.)

Try crazy, random ideas

Explore fearlessly. Use version control to enable undo and redo.

Record and review every evolution (MB)

Mike demonstrated Preview, an in-house tool that the NYT Graphics Team uses to screenshot nascent graphics at every git commit. The screenshots serve as a visual history for discussion and further exploration.

See through the eyes of giants

See what others have done in your problem space. Evolve from there.

Forget Google, use Google images (ET)

Text results are curated, gamed and polluted with advertising. Use Google images for an unbiased, scannable view of prior art.

Find a clear thought (JC)

Build your visualization around pithy a-ha moments. What did you see in your mind’s eye at the eureka moment?

Document and automate your data sources (MB)

https://twitter.com/mbostock/status/463895133323145216

In this Bubble Map example, Mike reveals how he uses node package manager to document and munge data dependencies. This prevents bit rot and promotes reuse.

Anticipate questions and confusion (JC)

Use this anticipation to improve the clarity of your graphic. (See also cognitive walkthrough.)

Visualization is more than counting (JC)

Bare bones counting isn’t insightful. Witness the Population section below. How many times have you seen this anti-pattern?

http://www.mightydeals.com/deal/infographic-vector-kit.html

Visual design is not information design

As a community we should distinguish visual design (esthetics) from information design (insight).

https://twitter.com/akarve/status/460812271552184320

Enlarge hit targets with Voronoi tessellation (MB)

https://twitter.com/isaach/status/453210803227721728

Use first order Voronoi faces as hit areas to improve targeting in densely packed visualizations. (Surprise, that computational geometry class you took has real world applications.)

Establish patterns and explore variations (JC, BV)

Bret Victor. Up and Down the Ladder of Abstraction, A Systematic Approach to Interactive Visualization

This is one of the deepest and most constructive guidelines.

I call it exploring bullet time.

Unfold and stack variations in time, space and parameter space.

  • Show change
  • Show context (Compared to what? Data does not inform in isolation.)
  • Show n-th order effects (differences, velocity, acceleration, etc.)

See Bret’s Up and Down the Ladder of Abstraction for bright examples.

White box simulation is the future of visualization (BV)

Bret identifies a progression from static displays (print), to dynamic displays (web), and now interactive simulations, which empower viewers to generate their own data from adjustable models.

Instead of feeding your viewer an insight, teach him to fish for theories with his own model.

Interactive models can be graphical or textual (e.g. X cars will cost Y dollars, where the user can drag his finger over X to change Y. Imagine voter information pamphlets working this way.)

Author’s note: JavaScript wields an advantage in the world of adjustable simulations. A server or client can dynamically generate executable code. Native apps can’t do this so easily.

Think like a game designer, and immerse your viewers in explorable data worlds.

Linear videos and animations are the pie charts of interactive graphics. They wrest control from the viewer. Avoid them.

Animated maps are the future of visualization (ET)

Pan the virtual camera over a detailed map for a 3D effect without glasses.

Google Maps is a model for everything good (ET)

  • High data density (a.k.a. information per inch)
  • Integrated presentation (text labels in situ, no boxes around the text)
  • Layering via sensible color

Next time someone argues that any of the above are infeasible or cluttered, pull up Google maps, the most widely used interface in the world, as counterpoint.

Galileo is the greatest thinking eye of all time (ET)

Study his notebooks.

NYT produces the world’s best graphics on a shoestring (ET)

And in a fraction of the time and cost that it takes most public and private agencies. This isn’t propaganda. It’s a case study in how to produce graphics efficiently.

Design is no longer pixels, design is now code (ET)

And there’s an extremely fertile middle ground, visual coding tools. Bret’s Inventing on Principle talk shows the way.

http://vimeo.com/36579366

Start the day with your creative work (ET)

Don’t start your day with the disruptive rhythms of social media.

Design is search (MB)

Mike Bostock, http://bl.ocks.org/mbostock/11161648

Design is a time- and resource-limited search for a sufficiently optimal design. We’re likely to find a local optimum, with the global optimum left to posterity. Different search algorithms (breadth-first, depth-first, best-first, etc.) are models for searching the design space.

Author’s note: It would be fascinating to develop a mathematical model of the design search space. Designers optimize for comprehension over an objective function (the transfer function from data to marks). Think gradient descent. More on this in a future post, perhaps.

Best practices are necessary but not sufficient (MB)

Design principles keep us on the path but cannot take us to the goal.

Thanks

Edward Tufte waxed emotional after Jonathan Corum’s presentation. “Jonathan was one of my students,” he said with sentiment. It reminded me that mentorship and generosity underlie every pixel in data visualization.

I would like to thank Jonathan Corum, Bret Victor, Mike Bostock and Edward Tufte for sharing their work. I didn’t have a chance to speak to them in person, but that doesn’t matter. The most meaningful way to continue the conversation is to produce high quality visualizations.

The quality of our work is a function of the people that we learn from. I therefore recommend this course. If you can’t make the course, you have Google Images. The Internet exposes each of us to more brilliance than any isolated villager in history.

“As iron sharpens iron, so one person sharpens another.” -Proverbs 27:17

See through the eyes of giants.

Suggested improvements to the course

An open mic Q&A session would prevent duplicate questions and leverage the answers across the entire audience. About 20% of the course was pure audio, speech in front of a distantly related slide. Visuals aren’t always the most effective means of communication, nevertheless visuals were wanting for some of the speakers’ deepest points.

    Aneesh Karve

    Written by

    Data, visualization, machine learning, and abstract algebra. CTO and co-founder @QuiltData. Recent talks https://goo.gl/U9VYr5.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade