Case study: creating a 50-state data visualization on elections administration

Ever wonder how well states are running their elections systems? Want to know which state rejects the highest number of absentee ballots? Or which state has the lowest voting time? And which state has the highest rate of disability- or illness-related voting problems?

A new interactive elections tool by The Pew Charitable Trusts (the Elections Performance Index) sheds some light on many of the issues that affect how well states administer the process of ensuring that their citizens have the ability to vote and to have those votes counted. Measuring these and other indicators (17 in all, count ‘em), Pew’s elections geeks (I was a part of the team) partnered with Pitch Interactive to develop a first-of-its-kind-tool to see how states fare. Today’s post is a quick take on how the project was created from a data visualization perspective.

Pew Election Performance Index interactive

Pew’s latest elections interactive: The Elections Performance Index

Lots of data here, folks. 50 states (and the District), two elections (2008 presidential and 2010 mid-term) and 17 ways to measure performance. Add to that the ability to allow viewers to make their own judgments–there is an overall score, for sure–but the beauty of this tool is that it allows users to slice and dice the data along some or all indicators, years and states to create custom views and rankings of the data.

You might already know about Pitch Interactive. They’re the developers who created the remarkably cool and techy interactive that tracks government-sponsored weapons/ammunition transactions for Google’s Chrome workshop (view this in Chrome) as well as static graphics like Popular Science’s Evolution of Innovation and Wired’s 24 hours of 311 calls in New York.

The data will dictate your approach to a good visualization

When we sat down with Pitch to kick around ideas for the elections interactive, we were initially inspired by Moritz Stefaner’s very elegant Your Better Life visualization, a tool that measures 11 indicators of quality of life in the 30-plus member countries of the Organization for Economic Cooperation and Development (OECD). Take a look–it’s a beautiful representation of data.

And though, initially, we thought that our interactive might go in the same direction, a deeper dive into the data proved otherwise. Comparing 30 countries along 11 indicators is very different than comparing 50 states plus DC, 17 indicators and 2 election cycles. Add to that the moving target of creating an algorithm to calculate indicators for different user-selected combinations, and you’ve got yourself a project.

After our interactive was live, I talked to Wesley Grubbs (founder and creative director at Pitch) about the project. I was interested in hearing about the hurdles that the data and design presented and how his creativity was challenged when working with the elections data. One of the first things that he recalled was the sheer quantity of data, and the complications of measuring indicators along very different election cycles. If this sounds too wonky, bear with me. Remember, one of the cool things about this interactive is that it allows you to see voter patterns (e.g., voter turnout) along two very different types of elections–mid-term elections (when many states elect their governors, their members of Congress and, in many cases, municipal elections) and the higher-profile presidential elections. Pitting these two against one another is a bit like comparing the proverbial apples and oranges. Voting patterns are dramatically different. (The highest rate of voter turnout in 2008–a presidential election–was 78.1 % in Minnesota. Compare that to the highest rate in the 2010 midterm election–56% for Maine, and you’ll see what I mean.)

Your audiences will influence your design

Another challenge early on was the tension between artistry and function. In an ideal world, the most beautiful thing is the most clear thing (an earlier post, “Should graphics be easy to understand?“, delves into this further). I remember reviewing the awesomeness behind Wes and his team’s early representations of the data. From my perspective as a designer, these were breathtakingly visual concepts that, to those who hung in there, served up beauty as well as clarity. But from a more pragmatic perspective, an analysis of our audience (policymakers and key influencers as well as members of the media and state election administration officials) revealed that the comfort-level with more abstract forms of visualizations was bound to be a mixed bag. Above all else, we needed to be clear and straightforward, getting to the data as quickly as possible.

Wes decided to do just that. “It’s funny,” he said. “We don’t often use bar graphs in our work. But in this case we asked, what’s the most basic way to do rankings? And we realized, it’s simple. You put things on top of one another. So what’s more basic than a bar chart?”

“We had to build trust–you can’t show sparkle balls flying across the screen to impress [your users]–you have to impress them with the data.”–Wesley Grubbs, Pitch Interactive

When I asked Wes how, at the time, he had felt about possibly letting go of some of the crazy creativity that led him to create the Google weapons/ammunitions graphic, he simply responded, “Well, yes, we do lots of cutting edge, wild and crazy stuff. In this case, however, a good developer is going to go where the data leads them. In addition, the audiences for this tool are journalists, academics, media–the range of tech-saavyness is very broad. We had to build trust–you can’t show sparkle balls flying across the screen to impress them–you have to impress them with the data.”

Turn your challenges into an asset

When we brought up the oft-cited concern around vertical space (“How long do you expect people to scroll for 50 states, Wes?”, I remember asking) his approach was straightforward: “Let’s blow up the bar chart and make it an intentional use of vertical space. Let’s make the user scroll–build that into the design instead of trying to cram everything above the fold.”

I think it worked. This is a terrific example of visualization experts who, responsibly, put the data and the end users above all else. “We could have wound up with a beautiful visualization that only some of our audiences understood,” says Wes. “We opted to design something accessible to everyone.”

How did Pitch build the Elections Performance Index tool?

Primarily using D3, a javascript library that many developers are now using for visualizations. It was not without its drawbacks, however. When I asked Wes about lessons learned, the first thing that he mentioned was the importance of understanding the impact of end-user technology on different programming languages. “D3 isn’t for everyone,” he notes. “Take a look at your users. What browsers are they using? The older stuff simply won’t work with many of the best tools of today. You have to scale back expectations at the beginning. The hardest part can be convincing organizations that the cutting-edge stuff requires modern technology and their users may not be in line with that. It’s all about the end user.”

Well, as an end user and a participant in the process I’m pleased. I hope you’ll agree to take the tool for a spin.

How to choose the right chart (part two)

How timely. Last week I wrote about choosing the right chart. Juice Analytics recently created an interactive Chart Chooser, based on Andrew Abela’s original Chart Chooser decision chart (via FlowingData). Both tools are excellent and offer a great start to choosing the right chart/graph format for data. The interactive chart offers little in terms of best practices (it wasn’t designed to do that) but helpfully separates out different chart types by the data that you have (quantity, comparison, distribution, etc.). And the best part of the interactive is that it provides you with downloadable templates for both Excel and Powerpoint. I’ll try this and might write about how well it works for me in a business setting.

I actually like Andrew’s original (static) chart a little better, as I find the flow diagram does a nicer job of providing context for the decision-making process.

Put both of these things together and you’re off to a good start.

[UPDATE]: Read Naomi Robbin’s (Forbes) excellent counterpoint to the chart-by-menu mentality.

Andrew Abela Choosing a Good Chart

Andrew Abela’s original chart chooser tool

How to choose the right chart (corrected)

A friend recently asked me, “how do you choose the right chart?” I thought about it, and essentially sent her a list of the sites that I have bookmarked, along with a few comments. This is by no means an exhaustive list, and it’s meant more for a layperson, but here’s the list, nonetheless. If you have more suggestions, I’d love to hear them.

I’ll follow up with a future post illustrating a few of these, and summarizing best practices and my experiences (a post which my toddler recently published in draft form–word to the wise, never let your toddler near your blog ;-)

In the meantime…

Which chart should I use

Limited to basic charts but half the time, that’s all you need.

  • SAP Design Guild: A great reference that can get technical and, if you’re so inclined, introduces (gently) some basic statistical concepts.
  • CDC (pdf): Yes, this is from the CDC but for a layperson it provides a succinct reminder to keep things simple.
  • Graphs.net: This is by no means exhaustive, but it’s a nice primer on the types of basic graphs out there.
  • Stephen Few (Effective Chart Design – pdf): These guidelines are from Stephen Few, a man more practical than Tufte (in my opinion), yet just as hell-bent on clarity and focus. If you can read his books, do so. At a minimum, spend some time on his white papers and you’ll learn a lot.
  • A periodic table of data visualization: Less helpful if you’re looking for charts, and more helpful if you’re interested in mapping ideas or processes, this graphic mimics the structure of the periodic table, but for data visualization.
  • Interactive version of the periodic table of data visualization: If you like the periodic table, this page actually has links to each example cited in the periodic table. The most helpful part is that the links point to either images in Google or links to wikipedia articles that discuss each graphic type. If you’d like to learn more about different charts and their uses, this makes for a good, albeit long, starting point.
  • Creating graphics in Excel: There is also a very excellent blog about creating graphics in Excel. I hate Excel and love this blog. This is much more than a “there’s a chart for that” approach; lots of good information on best practices and case studies that go beyond Excel.

From Illustrator to information designer:

For more traditional graphic designers (not coders) seeking to make the move to data visualization and understanding both the mechanics and the theory behind visualizing information, a crash course in handling data in Adobe Illustrator is helpful. Lots of terrific designers never get the chance to interact with data in Illustrator, so that’s not unusual.

Free, open source data visualization tools for the non-designers that are good, and useful

Many Eyes: Many Eyes was developed by IBM labs. It’s a phenomenal tool for quickly visualizing a ton of information in a few seconds, without spending much time on having to learn how to format the data. Just copy/paste from Excel and you’re set. To start, first create an account. Then on the left under the “participate” heading, choose “create a visualization.” That takes you to the “upload data” screen, into which you can simply paste in your data. Then in that same screen go to step 4 (you can ignore the rest) and give your data a title (e.g., “test). Hit “create” to go to the next screen. Click the “visualize” button and then choose a format (bar chart, etc). What’s great about this is that each format has a “learn more” button, which explains in simple terms what each graphic type is best suited to do. At any rate, once you’ve chosen a format, you can see what the viz looks like. At that point, I just take a screenshot and exit, because I don’t wish to publish the data—I just need help with visualizing it. But you can click “publish” to do so.

Tableau: The “Tableau public” version is free, though you do have to publish what you use, I believe. There is definitely a learning curve to understanding how to format the data–different than Excel and not intuitive if you’re expecting an Excel experience. But very powerful once you get the hang of it.

The Guardian’s list on free data visualization tools: This article by the Guardian also mentions the above and a few other tools, most of which I’m sure you know about (Google maps, Google Fusion tables and Google charts) but also a few others that I haven’t tried.

On good data visualization practices:

There are three absolutely phenomenal articles by Enrico Bertini.