Archive | Design RSS feed for this section

Data Visualizations with Flare

Two weeks ago, the White House released President Obama’s FY 2013 budget request. Using the numbers scrubbed by NPP’s crack research team, I created a few visualizations using the Actionscript/Flash-based Flare data visualization library (h/t Washington Post and Nathan Yau).

Flare was ideal because it includes sample code for a stacked area chart with tooltips–exactly what we wanted. I had some concerns about the Flash output, but many of our website visitors use browsers that don’t support SVG (IE8), so tools like D3 aren’t an option just yet.

Here’s a preview of what we’ll include (not the final version).  The first example is built with normalized data:

Apologies, but you need Flash to view this content.

Get Adobe Flash player

For the second example (total federal spending by category), we wanted to convey the overall size of the budget over time, so we didn’t normalize the data. As a result, the huge numbers caused some formatting issues, but it’s still an interesting story–especially the 2009 spike. Also note the rise in healthcare spending over time: 7% of the budget in 1976 and 25% in 2013.

Apologies, but you need Flash to view this content.

Get Adobe Flash player

Flare makes it easy to lay out the data and create the animated transitions, and after making a few tweaks to the Flare library and the stacked area sample code, I’m happy with the way these turned out.

That said, I’d be reluctant to use Flare again. It isn’t being actively developed, and there’s nowhere to turn for help when you get stuck (also, the whole Flash thing). Visualizations are evolving, and the tools to create them–no matter how good they are–evolve too.

Comments { 1 }

No Excuses for Ugly Excel Charts

2/2/2012: Corrected the revised bar chart by setting the horizontal axis minimum to zero. Thanks to Jon Peltier for catch.

Excel remains the de-facto graphing tool at National Priorities Project. A simple chart is often the best way to convey information about federal spending and budgeting, and Excel is the common language among our researchers and IT team.

Using Excel, however, is no excuse for ignoring style and the best practices of information display. So many organizations put out amazing, well-researched publications and then tack on default Excel graphs as an afterthought. But graphs are often what people look at first, and they deserve to be first-class citizens in the editing process.

I created some Excel chart templates for NPP, drawing on two sources for inspiration and practical advice: the classic Visual Display of Quantitative Information by Edward Tufte and The Wall Street Journal Guide to Information Graphics by Dona Wong.

Tufte is big on eliminating “unnecessary ink” that distracts from the information, and Wong advocates requiring the least amount of work on the reader’s part. With their advice in mind, I modified Excel’s default bar chart from this:

Excel bar chart - default

Bar chart: Excel default

To this:

Excel bar chart - modified

Bar chart: new template

  • Smaller gap between bars
  • Don’t make readers guess the numbers; if possible, label the bars directly
  • Direct labeling means you don’t need the noisy gridlines or even the x-axis
  • Remove the y-axis tick marks for even more noise reduction
  • Get rid of those zeros by showing data in millions or billions
  • Make sure the entire length of the bars is shown (in this case, by setting the horizontal axis minimum to zero). HT Jon Peltier.

The pie chart got a similar treatment. The Excel default:

Excel pie chart - default

Pie chart: Excel default

The new template:

Excel pie chart - modified

Pie chart: new template

  • Label the pie slices directly—don’t make people use a legend to decode
  • Avoid the default Office color palette and develop your own (ours is based on colors from our website)
  • A white line between pie slices emphasizes the boundaries

Excel isn’t perfect, but it’s out there in the world, and you can’t ignore it. Luckily, a little extra effort goes a long way.

Comments { 2 }

Higher Ed Web Symposium: Don Norman and Cory Ondrejka

Cory Ondrejka's outstanding Angry Dinosaurs keynote

Last week, the third annual Higher Ed Web Symposium was held at Wharton.  Despite being a speaker at the inaugural symposium in 2008, this was the first year I’ve been able to enjoy the event as an attendee.

The keynote sessions were especially outstanding.

Don Norman, a user interface legend and personal hero of mine, spoke about Living With Complexity, also the title of his upcoming book.  Basically,  he argues that complexity is good for us as long as it’s accompanied by good design.  Mr. Norman is a personal hero because so many principles from1988’s The Design of Everyday Things still hold true.  Also, because his work is a comfort whenever I’m confused by an elevator or walk into a glass door.

Watch Don Norman’s talk here.

Cory Ondrejka, a Second Life co-founder, blew away the audience with his Angry Dinosaurs talk on Day Two.  In 75 minutes and 300+ slides, Cory talked about institutional incompetence and hacks for accelerating change by citing examples from the music industry, the newspaper business, and the 19th century US Navy.  A fast-paced, fascinating talk.  I’ve already watched it twice.

Watch Cory Ondrejka’s talk here.  It has implications for everyone in an organization, not just designers and technologists.

To all of my colleagues who organized the Higher Ed Web symposium and its virtual counterpart, congratulations and thank you!

Comments are closed

Van Pelt’s mobile landing page

I’m currently working on a project to upgrade the mobile version of Wharton Computing’s student portal. As we searched for ideas, my colleague Erin stumbled across the Van Pelt Library’s new mobile site.

Like us, the library hasn’t yet gone native (though we are planning a app store adventure in the near future). Instead, they stuck with the web but incorporated iPhone-like icons.

Take a close look at the Video Search icon. Although the cat is meant to represent VCat (Penn Library Video Catalog),  it doubles as a brilliant acknowledgment that online videos are synonymous with cute kitties.

I love it, and I love the underlying sense of fun.  Stay crazy, you library icon designers!

icons on Van Pelt Library's mobile website

Comments are closed