How We Visualized 4.3 Million Votes

As you may have read in an earlier post, our team at Interactive Things has been supporting Democracy International with their Election Observation Mission to Afghanistan 2010 by providing visualizations of up to date election data. It was a very challenging project in terms of internal resource planning, because we never knew exactly when and how many visualizations we had to develop and because it was critical to produce the visualizations as soon as the data was available. In this Inside post we tell you the full story of this exciting time-critical collaboration.

The Story

Democracy International is an organization working on democracy and governance programs worldwide for the U.S. Agency for International Development (USAID). A few months ago, when they asked us to be part of their mission, it was clear to us, that we wanted to support them. The purpose of their mission is to observe the level of conformity regarding the conduction of the elections in comparison to recognized international norms of election administration, human rights and democratic representation. The credibility of the Wolesi Jirga elections is vital to the consolidation of democracy in Afghanistan and a critical component to the Afghan people’s ongoing struggle for peace. In a context like this, data visualization can be used as a tool for evaluation and communication.

While the election is going on, Democracy International is running and maintaining the website where they publish news, resources and multimedia content frequently. The resource section contains election data, reports, maps and charts which help the interested public to better understand the Wolesi Jirga elections. Our role was to give an overview of the whole election timeline, to develop some of the maps but also some charts to communicate the polling survey results – 12 visualizations in total over a period of 2 months. Because the published information is most relevant if published as close as possible to a certain election milestone, there was not much time for concept, design and implementation.

The Creation

Our first assignment was to visualize the difference by province between open polling centers in Afghanistan’s 2009 presidential election and the planned open centers for the upcoming 2010 parliamentary elections. After a first analysis of the provided data set, we suggested to not only use relative numbers but also display the absolute values of both years to give the necessary information for evaluating the weight of the difference. We also thought about using the population for reference, but decided to focus solely on the polling centers to reduce complexity.

Below you see the first visualization of the planned and opened polling centers and the difference by province. To get this first insight into the data, we used a spreadsheet:

Even though the absolute numbers help to understand the proportion and the impact of the changes in polling centers, what we have been asked to visualize and to focus on was the relative change. Since the relative numbers are always smaller than the absolute, these bars do not have enough visual weight – there has to be a better solution than a bar chart. Soon we all agreed on a geographic representation of the data, because we felt that the province names alone were too difficult to understand for a reader unfamiliar with Afghanistan. So we started with some concept drafts to explore the different possibilities and tried to focus more on the relative change of polling centers:

On the top left you see the number of planned polling centers in 2010 represented as blue heatmap and the differences as green and red circles. On the top right we tried to use typography instead of circles. The two maps in the middle show the planned polling centers through the density of small circles. The maps at the bottom indicate the 2009 value as a ring and the 2010 value as a filled circle, the space between showing the change. We sent these drafts annotated with our reasoning and suggestions to the team of Democracy International and waited for feedback. Via which map can you identify an increase or a decrease of polling centers at first sight?

Both parties decided this map to be the most efficient one for the purpose. But how quickly could we develop this visualization and how could we react to changes in the data set? With a static vector graphic done in Illustrator it would mean a time consuming and error prone process of calculating radii and adjusting sizes by hand. However, we knew that positioning data like province shapes and their labels is technically challenging, so we decided to take a hybrid approach, combining a static background image done in Illustrator with a dynamic data overlay done in Raphaël JS. We decided on using Raphaël JS because it works in many browsers and – other than an HTML 5 Canvas solution – creates DOM elements, to which we could easily bind events with jQuery. This allowed us to style things like tooltips in pure CSS, making it easier to layout. This way, we were able to just drop in a new CSV file and have the vector graphics redraw automatically. Here‘s a short example of the code:

// A two-dimensional array, containing province name,
// the x, y position and the number of polling centers in 2009, 2010
var DATA = [["Badakshan", 50, 50, 100, 200]];

// Calculates the change in polling centers
var diff = DATA[0][4] - DATA[0][3];

// Draw the circle
var radius = Math.sqrt(Math.abs(diff)/Math.PI);
var paper = Raphael(0, 0, 900, 650);
var circle =[0][1], DATA[0][2], radius);
circle.attr("fill", "#ddd");

We have also put the full source code on Github for you to peruse.

The Visualizations

Below you see the published interactive visualization of the polling center comparison 2009–2010. The shade of a province shows the number of planned polling centers 2010, the bubbles show the difference compared to the year before. If you hover a bubble, you get a tooltip with the absolute numbers.

As I mentioned before, we also created visualizations of the election timeline and of the polling servey results. Below you see two examples:

You can find all of the visualizations and the corresponding articles on Democracy International’s site:

If you are interested in the preliminary results for the Wolesi Jirga election and its data, you will find some interesting resources here:

What are your thoughts? We are very interested in your thoughts on the presented process and the final visualizations, so please share your opinion with us and comment below.

How We Visualized 4.3 Million Votes This project was realized by Interactive Things. As the publisher of we regularly give you insights into the development processes of our own work.

Wanna have your work featured here?
Submit a link!

Share this article

Subscribe for more

Give Feedback