Jonathan Corum, New York Times

See

Practice until your eyes can see it

See what others have done

See what’s possible

Look at more than you can use

Think

Find a clear thought and get it on paper

Sketching is visual problem solving

Sketches are not commitments

What are you trying to do?

Set the pattern, then show the variations

Ugly is fine

Sketch with data

Sketch in the browser

Find something your brain recognizes

Remember that aha! moment

Communicate that understanding

Design

Good design is clear thinking made visible. - Edward Tufte

Design for someone else

Don’t be your own audience

If you’re talking to yourself, you’re not communicating

Remember what it’s like not to understand

If I could have gone back in time, what would help me get to understanding.

Explain overview + relevant detail

In order to get anything out of this [research paper], it’s going to be a translation project.

Show change

Don’t collect trivia

There’s a reason that I’m collecting that and then presenting it.

Collections should add up to something

Visualization ≠ counting

Find and show meaningful patterns

Avoid the language of infographics

Avoid the facade of communication.

Don’t introduce false patterns

Is this pattern a true pattern or an artifact of how I arranged the data?

Visualization ≠ explanation

Don’t count diapers!

Be skeptical of vanity data

Compared to what?

Produce

When your idea hits the real world.

Embrace limitations

Point and annotate

Put the text where it’s relevant.

Combine art + label

Anticipate confusion

It doesn’t say here’s some lines, now you figure it out.

Help the reader through

Keep honing your ideas

We are not designers! - Matthew Ericson

Ruthlessly apply common sense

Brute force works but tools can help

Understand every step in the process

Understand what you can control: accuracy, clarity, legibility, empathy, and simplicity

What might emerge? Understanding, elegance, and beauty.

What if I am tricked? What if I believe in this just because it is beautiful? - Andre Lim

See & think = understand

Design & product = explain

Understand then explain

Respect the reader

Bret Victor, worrydream

Links to examples

  1. Static displays
  2. Dynamic displays
  3. Dynamic data

Dynamic Displays

Summary and detail graphics - Two levels of questions for different readers. In the example it’s “what are the main contributing pollutants to global warming”, with the follow up being “what are the causes of each pollutant”.

Slice and filter - Every decision is put within context. Where you see information, you can interact to filter by that aspect.

Narrative context - While going through the data, you’re going through a story. These real world events are tied to the chart.

Emotion - Switching between datasets that can tell a story from different perspectives. Don’t let readers sleepwalk through the graphic.

When you have the interactive medium you can design a learning curve, similar to game design. Starting a reader off with a basic task and then after awhile let actions grow in complexity.

Dynamic Data

Black box explanations - you don’t care about what’s going on under the hood, you just want the output. Elements you can adjust and see the consequences of those adjustments.

Open box explanations - what’s under the hood is exactly what you care about. Explaining how an algorithm works. Nouns are data objects, verbs are the transitions. Series of interactive graphics explaining each step of the process.

Making a graphic is not about putting a large spreadsheet in the middle of the page with the data. It’s much more so like show and tell. Each cell telling a piece of the story, much like a comic strip.

Representations for systems design - Show comparisons between original and intended change. Show the state of the individual steps in a system. Come up with a design language and then show the steps through the system.

Ladder of Abstraction

The graphics we make for displays must be better than their paper counterparts. By showing an animation, you take away the control that interaction allows.

Animations are the pie charts of interactive graphics.

First, give readers control over time. Let them move at their own pace and answer their own questions as they arise.

Second, give control over each of the parameters while abstracting time. When you control a parameter, you need to be able to see the result. Be able to see the entire behavior over time.

Third, give control back by letting the reader control time and variable by marrying them together.

See also — Steven Wittens, Amit Patel

Mike Bostock, New York Times

If one of the best designers of all time doesn’t know if what he makes is good, how can anyone else expect to?

Good design is as little design as possible. - Dieter Rams

Fitt’s law, it’s easier to click on targets that are closer and bigger.

Two phases: create and edit.

Get fresh eyes frequently; invite criticism.

New York Times Preview tool, displays all of the ongoing work. Can switch between each branch and interact with works in progress. Takes a snapshot of each commit on each branch.

Prototypes should emphasize speed over polish.

Transition from exploring to refining near deadline.

Delete code as you go. Be ruthless.

Make your process reproducible.

Try bad ideas deliberately.

Don’t be afraid to fail.

Let’s make a bubble map.

pbpaste allows terminal to access system clipboard.

Edward Tufte, Author

  • The Thinking Eye

  • Code is now design and design is code.

  • What was observed by us in the third place is the nature or matter of the Milky Way itself, which, with the aid of the spyglass, may be observed so well that all the disputes that for so many generations have vexed philosophers are destroyed by visible certainty, and we are liberated from wordy arguments. - Galileo Galilei

  • Organizations which design systems… are constrained to produce designs which are copies of the communication structures of these organizations - Melvin E. Conway

  1. Seek verbs and actions.
  2. See now, words later.
  3. A sense of the relevant.
  4. Seek forever knowledge with a taste for excellence.
  5. Understanding the difference between evidence and inference.

  • Only two industries refer to customers as users; software and the drug industry.

  • Silence sharpens and deepens seeing.
  • Most of social science studies are false. Social science is harder than rocket science. It does not have the fundamental truths of nature’s laws.
  • Image quilts.
  • Distribution of excellence is extremely logarithmic.

  • A hard look at the practice and results of conventional asymptotic theory easily leads one to three points:

    1. We ought not to expect it to be widely useful (since it refers to the ultimate oversimplification).
    2. Rather often it has been useful (surprise!)
    3. We have developed no basis for telling when it is likely to help and when it is not….. 123 - John W. Tukey
  • Standards of graphical excellence: Google Maps and Swiss Mountain maps.
  • Future is maps moving in time.

  • How do you know that?

  • How does what I see come to be seen by me?

  • Real science has it easy because they have forever laws.
  • Begin with a question, a problem, then measure.

  • You can have your own point of view, but not your own facts. - Daniel Patrick Moynihan