Recreating Another New York Times Chart
By Zach Gemignani
July 26, 2009
Find more about:
visualization
At the recent Turning Statistics into Knowledge conference (here's a synopsis), I saw The New York Times' Amanda Cox present on how their 25-person design team designs and builds infographics. In my opinion, The New York Times sets the bar for telling stories with data. Amanda, I later found out, is sometimes referred to as the Michael Phelps of Infographics -- presumably for her tendency to win infographics awards, not for getting photographed with a bong.
Here's a infographic from the presentation that I particularly liked:
This chart is a re-examination of the OECD Business Cycle Clock which:
has been designed to better visualize business cycles - fluctuations of economic activity around their long term potential level - and how some key economic indicators interact with the business cycle.
(Flowing Data also took a look at this chart and the other approaches to presenting the same data.)
Amanda's version of this chart is great because it demonstrates what can be done with the under-used scatterplot chart. Scatterplots are effective at presenting the relative performance of a set of things (e.g. product portfolio). Typically they show a snapshot in time; Amanda has added a time dimension without visually overwhelming the user.
As we've done in the past, we wanted to try to recreate a New York Times-style graphic in Excel. Here's how it came out:

We have a few tricks in here to make this Excel chart possible:
- The chart is a scatterplot with smoothed connector lines. A second highlight series displays just values based on the time selection at the top.
- The line chart at the bottom contains a bar chart that keys off of the time selector to help visually display the time range selected.
- All the labels on the chart are extra data series with data labels rather than adding text labels onto the chart. This approach makes it easier to place the points in the appropriate spot and not worry about problems on resizing.
- A simple macro on the "animate" button walks through the data.
You can download the Excel spreadsheet here
Think Like a Designer
By Ken Hilburn
July 16, 2009
Find more about:
dashboard,
design
I'm a big fan of the work they're doing over at Duarte Design. Great, practical, motivating presentation design practices. Rarely do I come away from their site un-inspired about something.
Recently, Nancy Duarte participated in an interview with Jimmy Guterman of the MIT Sloan Management Review, which resulted in the article "How to Become a Better Manager By Thinking Like a Designer" (sign up is required). The quote that summarizes the article is:
“Often managers… rely heavily on data and information to tell the story and miss the opportunity to create context and meaning…leaving lots of room for interpretation, which can spawn multiple cycles and limit advancement.”
It's the same with information presentation. A focus on design at the beginning expands the ability to deliver context and meaning. But before you discount design as a concept for well, you know, "those artsy types", keep in mind, as Nancy puts it:
"Design is... crafting communications to answer audience needs in the most effective way."
What this means is that the more you focus on design, the more you'll "speak" to your audience - which means you'll be more effective with your data presentation. It's about the audience, not you.
Here are some dashboard design principles that we use (with a few enhancements from Nancy's interview) to make sure we become better information presenters by thinking like designers:
Unity/Harmony - a sense that everything in the application belongs together, resulting in a "whole" that is greater than the sum of the parts. All the elements complement, augment, and enhance, as opposed to distract and detract from each other.
Takeaway: Identify the problem you're solving and make sure every element you place moves you closer to answering that question.
Proximity/Hierarchy - Things that are near each other are related. Hierarchy demonstrates relationships between items where appropriate. Proximity and Hierarchy both provide tremendous contextual cues leading to better understanding.
Takeaway: Place related things near each other and separate unrelated things. Remember, dogs and cats don't play well together.
Clear Space - White space in information display is very important and too often overlooked. Maximizing dashboard real estate means creating places for the eye to "rest" so that the non-white space is more effective.
Takeaway: Use white space in conjunction with proximity to help your viewers follow the story the information is telling.
Balance - Dominant focal points either give the viewer a sense of comfort (balanced) or spur them to action (unbalanced). Nancy points out "that does not mean all things must be in balance all the time. It is often effective to jar people and thereby effect a change in behavior or thought. Be aware, though, that once something has been thrown out of balance, it is the nature of the universe to find a new state of equilibrium."
Takeaway: Make sure the primary focal points in your information presentation tell the viewer either "it's ok, move on" or "you need to do something."
Contrast - Contrast creates interest to focus attention or highlight differences. Again quoting from the article "The value of contrast lies neither in the black nor the white, but in the tension between them."
Takeaway: Use Contrast to shift Balance so the viewer focusses and acts more quickly.
Proportion - More important elements deserve more real estate. It's tempting to want to present an unbiased view of the data. However, as Amanda Cox of the NYT graphics department stated at the OEDC "Seminar on Innovative Approaches to Turn Statistics into Knowledge" "data isn't like your kids, you don't have to pretend to love them equally."
Takeaway: Increase the size and emphasis of the values and decrease the size of labels and you'll find dramatically better impact and speed of understanding.
Simplicity - Stay focused on the specific fact on which you're trying to shine light. This sometimes means showing less data and a simpler display. I think Garr Reynolds sums it up best: "Don't confuse 'simplicity', which is hard to achieve, with 'simplistic', which is easy and usually lacking value."
Takeaway: Help your viewers focus on what's really important by pointing them to the kernels and not the chaff.
2 comments
Nancy Duarte said:
Thanks for the shout-out Ken! We admire your work too.
Nancy
Viajero said:
Great article and great work. I found an article that may be of interest too http://www.ideo.com/news/item/article/design-thinking1/
rgds
Add a comment
JuiceKit Sighted in Federal IT Dashboard
By Zach Gemignani
July 2, 2009
Find more about:
visualization,
treemap,
dashboard
We were excited to see that Federal CIO Vivek Kundra and his team used our open-source JuiceKit treemap on the recently released Federal IT Spending Dashboard.
While Tim O'Reilly mistakenly gave credit for all the visualizations to Fusion Charts, we know better. A mother always recognizes her baby. I bet Google also recognized their Motion Chart.
1 comment
Sanket Nadhani said:
Sorry Zach. Didn't mean to steal all the credit:) Probably Tim only saw the charts on the homepage and thought it was all FusionCharts. We are very much ready to share the credits.
Sanket
FusionCharts Team








4 comments
Neal said:
Excellent post!! I particularly like the links to the other information and the incredible excel file attached. A real contribution! Thanks!
Lee said:
Really like the controls chart control bars. Going to find out how to do those!
Travis said:
I've posted the code for an interactive python version of (nearly) this same graphic here: http://travisvaught.blogspot.com/2009/08/infographic-in-python-using-chaco.html Thanks for the post--very nice.
derek said:
I'm delighted that the NYT is using a scatter graph, but I thought NYT didn't do scatter graphs because they thought their readers wouldn't understand them?
said:
Add a comment