Over the last few months we’ve been kept busy with designing visualizations for the project “Ville Vivante”. Based on the premise that the mobile phone has become the center of our everyday communication and main source of information, the City of Geneva, in cooperation with the Lift conference, decided to take the challenge to visualize the digital traces created by our mobile phones. As implied by the title “Ville Vivante” – “Living City” –, the goal of the project was to visualize the urban flow of everyday life and make it visible to passersby at the local trainstation.

Our assignment was to craft a given dataset into an animated visualization and a series of posters. While the general setup and goal were clear, we were very free in terms of the actual realization. In this post I want to show you our attempt to reveal the vividness of a city with a bunch of numbers and to bring a dataset to life.

The Dataset

The data was provided by the Swiss telecommunication company Swisscom. It contained the mobile-usage data of one week. The datapoints were not the actual phonecalls but the handovers between antennas that happen if you change your location during a phone call. Thanks to the analysis and great preparatory work by our collaborators at the Near Future Lab, we received a clean dataset containing the fields we decided to craft into the visualization. Each datapoint contained a starting- and an endpoint/-antenna and a time.

Fascinating or educating?

Since the general story we wanted to tell – the story of the Living City – was clear from the beginning, our task was to find the best way to tell it with the dataset at hand.
A very basic issue we had to discuss several times between kickoff and release was the level of detail of the visualization. How much of the actual dataset do we want to show to the viewer? How accurate should the datapoints be represented in the visualization? Should it educate or fascinate the viewer?

Showing more details like numbers and labels very quickly has a touch of a more technical and geeky visualization, whereas showing no quantitative information at all entails the risk of being squishy and dull. But showing less quantitative information also allows for a different approach, like using a more picturesque metaphor than barcharts to tell the story – a more accessible and attractive approach for the general public. Also a metaphor could be picked from the living world, like growing trees, moving grass, flying butterflies, which again would help us turn the dataset into a living thing.

Since the general public was our target audience, we decided to pack less quantitative information into the visualization to get their attention on a more emotional level by making it fascinating. In addition to the rather abstract animated visualization, we decided to give more educating insights of the dataset in a more detailed series of posters.

Steps to the visualization

Our goal was to show the vividness of the city, so we went looking for inspiration in the organic world. We looked at the aesthetics and behavior of living forms, so that we were able to distill a set of design patterns ranging from growth and interaction to dynamics and ebb and flow.

The first step of the visualization was as primitive as it could be. We drew simple connection lines representing the handovers between the antennas on a map.

To get an organic look and feel as we intended, we experimented with different simulation algorithms like swarm- and particlesystems and magnetism. Allthough the results were not as visually pleasing and fascinating as we expected, we gained valuable insights on the behavior and activity of the movements.

The initial visualization created by the particles and lines was too much defined by the locations of the antennas, rather than the actual movements and flow of mobile phone users. We also noticed that the lines defined by the dataset didn’t precisely match the movements of people, because it’s not necessary to move all the way from one antenna to the next to initiate an antenna handover: handovers also happen when you move a short distance in between or even when one antenna is overloaded.
So we tried to blur the visualization by applying a grid to the visualization which is generated by the amount of movements flowing through it.

We liked the visual look of the grid visualizations and also the additional information it conveyed. While the first swarm-based visualizations had their main focus on the direction of the movements, the deformation of the grid shows the amount of movements and the total activity, respectively.

But while the swarm had a slight touch of a living organism the grid was again very technical and non-organic. So we went for another approach using a fluid-simulation. From the beginning (well, after we made it work), we were fascinated by the movements generated by the interplay of the liquid and our dataset. The resulting animation had the appearance of a living thing like we intended. It surprised us with unforeseen movements but still followed the rules of the underlying data. By applying this liquid-simulation to the whole dataset, we were able to unify the movements and make it more homogeneous. The lines defined by the liquid algorithm did not pretend to represent the exact positions of the mobile phone user anymore, influencing a bigger area of the simulation instead. After rendering some test animations and a lot of parameter tweaking, we were able to create smoothly moving lines, which were influenced by the movements of the handovers.

Since the horizontal moving lines didn’t show the amount of activity in the same way the grid did, we made a second rendering in which vertical lines were generated by the movements flowing under it.

With this, we had the main part of our visualization. But what about additional information like a map, date, time? After several experiments we decided to reduce the extra information to a simple plain map and a sine-shaped progress bar indicating the course of the week. For the lines we defined day- and a night color ranges comprised of five colors.

Steps to the Posters

We wanted to support the animated visualization with additional, more quantitative information and insights. Since we had only one dataset, the difficulty here was to find interesting stories to tell from the dataset without becomming too redundant. The key to that was to put additional layers of information, like the districts or the center/periphery, on top of the data. Also we made different datapoints comparable by showing the course of the whole week or different snapshots at the same time. In this way we were able to make interesting static visualizations revealing stories you could not find by watching the linear animation.

Reflection

Reflecting on the project after some time has passed since the publication of the project, I’m seeing our final result as one of many more to come iterations in the analysis of mobile usage data of urban flows. We look at it as a complete project in itself, but like “Realtime Rome” and other projects, it is one of many contributions to the question of how people move through urban environments.

Introduction

We were asked by the National Geographic Channel to visualize the history of the National Geographic Bee Contest. They provided us with a dataset containing detailed information about the finals ranging from 1989 to 2011. Our task was to make this data explorable and entertaining for their online readership.

The Geo Bee Story

Every year thousands of schools in the United States participate in the National Geographic Bee using materials prepared by the National Geographic Society. The contest is designed to encourage teachers to include geography in their classrooms, spark student interest in the subject, and increase public awareness about geography. Schools with students in grades four through eight are eligible for this entertaining and challenging test of geographic knowledge.

Exploring the Data 

At the start, we analyzed the data to get a feel for the content we had available. We had to decide which data we would use and which combinations would add the most value for the user.

Unfortunately the data wasn’t completely consistent (more on that later), so we looked which facts were available for the whole time period:

Based on this, we started to build up the story we wanted to tell.

Telling a Story

Defining and knowing the story you want to tell is one of the most important steps in making a successful visualization. Thus, instead of trying to visualize every last detail, we narrowed the focus and formulated our story as a question:

“How did individual U.S. states perform compared to each other over the last 23 years?”

It’s one question, but it has three aspects: geography, rank, and time. We didn’t want to tell a linear story, but let the user explore and discover.

To find the appropriate form to visualize the data, we sketched different models and tried to bring them in a suitable form that is easy to understand and invites the user to explore in a playful way.

We decided to go with a triad of visualization methods, each of which answers one aspect of our main question.

Each part of the visualization (rank chart, map, timeline) is interactive, and if a selection is made in one, it affects the other two. The user can dive in at any point she’s interested in.

As a bonus, to make the topic of the contest more tangible and challenge the user in a fun way, we included each year’s final question as a small quiz. Clicking on the question reveals the answer (hey, no cheating!).

The final visualization consists of four views:

All Years View: This is the starting view. It shows a summary of all states in all years.

State Focus: When the user selects a state, its position in the overall ranking gets highlighted, and its rankings in each year get displayed color-coded on the timeline.

Year Focus: When the user selects a year, the top ten states get highlighted and color-coded according to rank on both the map and the ranking. The final question of the year appears.

Answer View: The answers are separated from the visualization and appear only if the user wants to see them.

Shaping and Visualizing the Data

The original data we got wasn’t a database or even an Excel file, but PDFs and Word documents which looked mostly like this:

After fooling around with OCR, we quickly realized it wouldn’t work, and decided that we’d have to transcribe the files manually. We prepared an Excel template and outsourced this task to a relative with great typing skills. After a few days, the first transcriptions came in, and we could have a closer look at the data.

With the help of Google Refine we discovered and cleaned up the typing errors and data inconsistencies (e.g. differing name spellings). As we intended to use the state names for the visualization, it was important that they were consistent. Not only students from the 50 states can participate in the contest, but also from US territories and Department of Defense schools in foreign countries. Using the USPS list of state and territory abbreviations as reference, we brought the state names into a form which we could later parse reliably.

At this point, we had a set of cleaned up data, exported from Refine in JSON format. But before we could actually visualize it, we had to perform a few additional steps (for which we wrote a Ruby script).

• All excess data which we didn’t need for the visualization (street addresses, grades, etc.) had to be removed to save space.
• The data had to be restructured, so it could be understood by Flare, the visualization library we used. For this, we created two new data sets, one grouped by state, the other by year.
• Since we wanted to create an overall ranking, we had to calculate a score for each state, based on its performance across all years. Here we used a scoring system similar to the one used in Formula 1 (1st = 10pts, 2nd = 6pts, 3rd = 4pts, 7–10 = 2pts, finalist = 1pt).
• At the same time we generated a few statistics for the data and ran some checks to make sure there weren’t any loose ends.

Also, since we used Flex, we wanted to avoid any woes with loading data from an external file. So we didn’t export the data as JSON, but directly generated an ActionScript class with data objects inside. In the end, we’d get a single, independent SWF file. (Yes, this could also have been solved with Flex embedding, but it was more straightforward like this.)

We used Flex and the Flare visualization library to build the visualization. The two major points that influenced this decision (instead of building something SVG- or Canvas-based) were browser compatibility and ease of deployment. We didn’t know in what environment the visualization was going to be placed, so going for a single SWF with no dependencies dramatically minimized the conflict potential there.

Describing the coding of the visualization is beyond the scope of this article, and would probably be better placed in a tutorial (if anyone’s interested in Flash tutorials these days).

Discussion & Outlook

Our main goal for this visualization was to come up with an interactive data graphic, which gives the user some essential and basic information about the Geo Bee contest over the past 23 years in an attractive way.

We created a visual landscape which allows the user to focus on different aspects. To achieve this, we looked for different patterns in the data to make accessible and understandable. The user can switch between an overall state ranking, a state map, and a timeline.

One of our favorite features is the addition of the final questions and answers. They enrich the visualization with more content and give the user an idea about the level of difficulty of this contest.

The visualization we created can stand by itself because it only tells one story focused on the ranking of a state in comparison to the others and how it performed since the beginning of the contest.

It could be interesting to extend the visualization with more parameters and explore the dataset from different perspectives. Another story could tell more about the individual contest participants, what a student’s performance during the contest was, or what she has done after the competition. The visualization could also picture the participant’s career and show how Geo Bee can change your life. This would be a more emotional and personal, but whole different story.

Don’t forget to check out the interactive visualization!

The Zurich International School astonishes with a high sense of responsibility, a censorious self-reflection and transparent communication. Their philosophy is that everyone involved with the school – students, faculty, staff and parents – are part of a huge learning community. Their values are condensed into a strong and ambitious mission statement. ZIS doesn’t simply frame these statements and put them on a wall, they constantly cultivate their mission and make sure they stick to it. In this Inside post you can learn how we supported them in this endeavor.

The Story

The ZIS is a non-profit day school for students aged 2 to 18. Besides the Early Childhood Center, the Lower, Middle and Upper School placed in the greater Zurich area, there also exists a facility in Baden. Currently, all campuses together offer an international education programme for about 1425 students from more than 55 countries. The school has a very innovative and technology-rich learning environment: they have 45 interactive whiteboards spread across all classrooms, wireless internet access, comprehensive e-learning tools, and every Middle and Upper School student receives a personal laptop computer.

To monitor the success of their mission – distilled in the claim “Learn, Care, Challenge, Lead” – and the resulting learning environment, the staff is regularly conducting surveys involving all parents, teachers and students. This valuable feedback is then evaluated and used as an initial position for creating a report. Our first assignment was to examine the graphical qualities of these already created and published reports and to propose possible improvements.

In contrast to previous reports, our team at Interactive Things suggested to focus more on the different mission sections and to create four separate parts rather than one long, continuous report document. Each of these sections would contain the most relevant information displayed using charts and text.

Besides the digital versions we created a series of posters, which can be printed and presented in the classrooms to make the report more easily accessible to the school community. We also combined the four sections on one single poster-sized paper and created a nice handout by folding it.

The Creation

After presenting these ideas to the responsible staff members, we were ready to go on with the concept. As the first step we tackled the collected data from the conducted surveys of the last two years. There were some questions only relevant for the teachers and some only for the students – questions concerning the use of technology, the practice of different media types or the handling of problems.

In the “Learn” section we focused on the diversity of resources which teachers regularly employ in their lessons. As already mentioned there are interactive whiteboards, so-called Smart boards, available in all classrooms. Blogs, Google Docs, online journals and school subscribed websites are used during classes for providing additional resources, as well as the online learning environments Moodle, ZMS and Classwork for providing custom online courses to a specific topic.

At ZIS students have to complete at least one service learning project each year in order to graduate. The projects are designed to extend learning beyond classrooms and to raise social awareness. For the “Care” section we centered these projects and additional trips.

In the “Challenge” section we wanted to show the shared responsibility at the school and how students deal with technical issues, whether they can resolve problems themselves, or if they have to get help from another student, teacher or a school’s IT specialist.

In the “Lead” section we agreed on addressing to the impact of the different educational technologies from a teacher’s point of view. Unlike all other data, we had a set of two years available for this topic.

Following the thematic definition for each section we figured out the appropriate visualization techniques for the corresponding data. Even if these drafts below are only intended to get a first impression and will be refined many times, we always paid attention to not add much more complexity to the visualizations than necessary at this early stage.

Designing for both screen and print is a challenge. You do not have the same possibilities in reducing the information density by adding filters and using event based functionalities. Instead you need to display all the relevant data and take full advantage of different weights and contrasts to lead the eye. Every color, font or line looks different on screen than on paper, thus you have to constantly print your artwork and check if the data is translated appropriately. On the other hand you do not need to care about cross browser compatibility and you are in full control of every ink drop’s position. You can even use interaction design – for example by folding or cutting paper, by utilizing the paper’s surface or reliefs. What we loved to do is working with different layers by overlaying text with colored objects:

The diverse final products – handout and posters – mean an additional effort. In terms of the different scale, you need to set and adjust the font and line weights for each piece individually. The posters and the unfolded handout both have a size of DIN A1, but on the handout a single section covers only a quarter, thus has the size of a A3. Therefore you don’t have the same space available and you are forced to rearrange or even to reduce the displayed information.

In contrast to posters which are one-sided, you can of course use both sides of a folded handout. This offers a great opportunity to lead the reader and introduce the report with a cover page. Then after unfolding once, the mission and philosophy of the Zurich International School is presented and finally the four detailed sections appear. For this additional side including cover page and mission summary, we came up with the idea to design a report theme. Suited to the internationality of the school, we arranged every country of origin of all attending students and all teachers.

The Final Products

This is a guest post by Mike Tully, designer and student at Parsons School of Design in New York City. In this Datavisualization.ch Inside article he describes the creation process behind his first information visualization project called “The Weather of Well Being”.

The Assignment

This past Fall, I was enrolled in Topics: Information Design, a comprehensive and rigorous course at Parsons School of Design, focusing on data visualization. My class was given the task of creating two information design pieces throughout the semester. We had to choose our topics, conduct research, find raw data and go through several stages of design. What resulted was an intense crash course in information design that consisted of endless hours of work, frustration, confusion, crying classmates, reassuring talks from our teacher, and both relief and happiness as my two projects slowly started coming together. The first of these projects was The Weather of Well Being, an infographic that examines the relationship between subjective well-being and climate in 40 different countries.

The Data

Many people believe that the weather has an effect on their feelings and mood. Considering this, is it possible to find data and information that proves this? This is the question I asked myself when starting my first information design project. I wanted to find valid connections that could both help prove this and reveal any other interesting and relevant information.

After beginning my research, I quickly stumbled upon the OECD’s Factbook 2010. One key component of this annual report is the section on “Quality of Life”. Within that section, I found that the report on “Subjective Well-being” was exactly one of the data sets I was looking for. The report states “Subjective well-being consists of life satisfaction, the presence of positive experiences and feelings, and the absence of negative experiences and feelings. Each of these three dimensions matter for people’s life, and is subject to a different range of determinants.” One of these many determinants is weather.

There are many different systems of classifying weather. I decided that climate would be the most effective system for international comparisons. Taking a standard climate classification system, I linked each country in the OECD report with their various climates.

In addition to weather and climate, I wanted to somehow incorporate information about population and productivity. I decided that GDP per capita would be the most suitable variable for that task. The additional insight of the relationships between subjective well-being, climate, GDP, and population seemed worth including.

The Creation

My design process started with a comprehensive sketch phase. I played around with various forms of presenting all of my information. After working through many different representations, I found myself most drawn to a radial format. While it has been used in many infographics before, It seemed the most conducive to the information I chose to present. After committing to my design, I began to construct my data and poster in Adobe Illustrator.

I started by deciding to organize the countries along the circular form, so that as the viewer looks clockwise, the countries are ordered from the highest average positive experiences to least average positive experiences. This seemed to provide a logical point of entry to the piece and the easiest way to quickly compare positivity ratings among different countries, something very important to me.

After inputting the positivity ratings, I began to input the average negativity ratings. I had intended for both to be placed on top of each other, but quickly realized that it was confusing and much more clear if they were placed opposite to each other, with positivity going outwards and negativity going inwards. This allowed for much easier comparisons among the data and provided a stronger visual balance overall.

To display climate, I chose to have six color coded circles in the center of my piece. Radiating from each circle are colored lines that link each country to it’s various climates. This helps quickly reveal the relationship between climate and positive experiences, negative experiences, and GDP per capita. Initially each circle was filled with it’s corresponding color, but after deleting the fill and leaving the color coded stroke, I found that more emphasis was placed on the lines linking the climates to their corresponding countries.

Once the majority of my information was inputted, I found myself wanting to see more data, so I decided to include the breakdown of the average positive and negative experiences, which include 6 different sub-categories for each. Placing them next to the averages, I had issues color coding them in a clear manner. I decided that a monochromatic scale that got gradually darker was the most clear and effective choice.

The Visualization

Now after feeling confident with the amount of information I was displaying, I made small refinements throughout my poster. The most difficult was the placement of the percentages corresponding to the various positive and negative experiences and breakdowns. Ultimately I found it the most visually pleasing and easiest to read if they were placed within and on the same angle as each line. After the placement was finalized, I decided that my original color palette was too dull and unsaturated so I opted for a brighter and more saturated color palette for both the inner and outer parts of my poster.

The result of weeks of intense work was my first infographic, The Weather of Well Being. A high resolution version of this piece and my second infographic on air travel are both viewable on my website.

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 Afghan2010.com 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 = paper.circle(DATA[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:

• http://afghan2010.com/topics/infographic

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

• http://afghanistanelectiondata.org/open/data
• http://www.guardian.co.uk/world/2010/sep/19/afghanistan-election-fraud-delay-result
• http://csis.org/blog/preliminary-results-afghanistans-wolesi-jirga-election

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.

One of our favorite things about data visualization is that every single project comes with interesting people, a whole new context and a different story to tell. Recently, we had the chance to meet the people from the Bundle headquarter, to dive into a bunch of interesting data about food and drink spending in America and to develop an exciting infographic. Now we would like to let you take a glimpse behind the scenes.

The Story

You know it’s hard to track all your spending and to be in full control of your personal budget — even harder in busy times. Not everyone is as disciplined as Nicholas Felton and keeps every single receipt of a Starbucks coffee. That’s where the young but fast growing online platform Bundle comes in: Their service is called Everybody’s Money and is a mix of anonymized credit card transactions and governmental data. It aims at helping people to compare their savings and spendings all over the United States, in all possible categories. Have a look at the short introduction movie:

http://www.youtube.com/watch?v=cPFLxBVZ3oc

After a full year of collecting and providing data, Bundle engaged different designers to participate and create a series of reports to summarize America’s total spending. Stefanie Posavec, an American artist living and working in London, introduced the series with the holistic 2010 Bundle Report. This introduction was to be followed by a closer look on the “Food & Drink” spending category, which we had been asked to take care of.

The Creation

The “Food & Drink“ category is composed of spending both on dining out as well as groceries. For these two sub-categories Bundle provided us with a complete dataset for 50 states and 95 major cities. As Bundle wanted to publish the final infographic on their website, the width of the format was limited to 610 pixels. These were the cornerstones. Now, which is the most suitable visualization method to achieve a simple and yet creative infographic? Walking this thin line between readability and visual complexity is always a challenge but fun to master.

After structuring the data file, the first goal is to gain a primary, rough visualization. In this way, you get a nice overview and you can even make first conclusions about data quality and emerging patterns.

Our main intention is to make the huge differences in spending amounts visible, not only for the “Food & Drink“ total, but also for the two sub-categories “Dining Out“ and “Groceries“. In order to hit the nerve and make the visualization something that exceeds a plain reproduction of statistics, we started compiling questions of interest: Where do hedonists live, which is the town of home-cookers and where is saver’s paradise? With a width of only 610 pixels at our disposition but no vertical restrictions, a top down ranking with stacked bar charts seems to be the perfect match to illustrate these moments of contextual relevance.

Another decision to make was whether to refer to the complete dataset that contains a broad range of states and cities, or to focus on a smaller selection. We opted for the display of cities only, because people tend to have a stronger empathy with a concrete place — we are all some sort of local patriots. As not to neglect the scope of the data set, we decided to include all cities rather than generating hitlists, for example top or bottom ten.

Below is one of the first drafts made in Illustrator. The bars on the left represent the average spending amounts on dining out, the bars on the right the average spending amounts on groceries. The sum up of both sides is the average spending on food and drink per household in 2009, with one line representing one single city.

Looking at this draft, we wondered about the relation of a city’s spending amount and its population. Do inhabitants of a bigger urban space spend more money than others? To find the answer, we compiled the population numbers of all cities and added this dimension to the visualization by adjusting the bar’s height of the city in question.

Now the basic framework is constructed, but a narrative layer is still missing. Our idea was to highlight cities that step out of line by attaching a speech bubble which labels the specific interesting characteristic and underlays it with key facts. By only reading these highlights, you can get a fast and easy access to key information. If it grabs your attention and you want to explore more data, you can go into the details and, for example, discover where your city ranks.

The Visualization

To distinguish which cities rank above and which below the ordinary food and drink cunsumption we integrated a horizontal bar and vertical lines representing the U.S. average of spending on groceries and dining out respectively. And finally, to add the finishing touch, we arranged every single pixel, added all the labels, and inserted a header and a footer.

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

With our recently introduced category, Datavisualization.ch Inside, we want to start a conversation around the processes and tools that information designers use. Following our introductory post, we’re happy to present you the first guest post in this category by our community member Marco Giannini. The work he presents here received a “best design” award in the GOOD Magazine competition.

The Story

GOOD is a well known periodical from the United States launched in 2006 and published in two different formats, both paper and internet. The magazine gives broad information on several topics like lifestyle, environment, education, business, politics and more. As part of the GOOD Magazine’s Transparency series they launched a contest in March 2010 about the new health care bill approved by the U.S. government.

The objective was to create an infographic explaining the health care reform based on existing research and relevant topics like whom the reform will benefit and whether it will save or waste money. Suggested data sources were the New York Times, the Washington Post, CBS, and the U.S. Government.

The Creation

Health care in the United States is intransparent and overly complicated: There are so many different kinds of medical coverage that, before the reform, people were easily overwhelmed by legal ramifications and missed out on services they were entitled to have. This presented an interesting opportunity for me to apply my experience as a graphic designer – I have worked on both static and interactive infographics since 1996 – to visualize this interesting data from a citizen’s point of view in order to see what changes the reform would bring.

I started with splitting all the U.S. citizens into two groups: those who will and those who won’t be affected by the reform. In doing so, I realized that the reform will affect most of the citizens by 2014 – the real turning point – and I decided to split them into uninsured and insured. Apart from controversies over the reform during the period of congress approval, many different sources prove that a large amount of people in the U.S. are currently uninsured: around 90 million non-elderly people, according to the Census Bureau. As a next step I focused on the various kinds of insurance and split all the insured people into four categories:

1. Self-initiated insurance at a private insurance company
2. Insured by employer (lucky!)
3. Insured by Medicare
4. Insured by Medicaid

Currently Medicare and Medicaid support a large amount of poor and elderly people by providing them with therapy and health programs, supervision and personal assistance. But analyzing the numbers concerning this huge population stratum would miss the point, so I tried to concentrate on the more relevant part of the population: the uninsured. Because everyone should have an insurance by 2014, I decided to focus on solutions rather than the current situation, and, in order to get a similar grouping, split all uninsured people into four categories, too:

1. People who have been refused insurance due to their health condition will be covered by a high risk pool (until 2014)
2. People who will be insured by Medicaid due to their household income
3. People who will get an insurance through the new government-run insurance marketplace (starts 2014)
4. People who will be refused an insurance (because of penalties)

When looking for a visual representation to show the development of the health care reform over time, I decided on the subway map metaphor, grouping main categories by color. The labelled circles inside the map can be understood as subway stations, stopping at milestones as they progress downwards along the ten year reform timeline. The result is a flow that shows the starting and end points for both insured and uninsured citizens (whose situation hopefully improves) and clarifies the main applications of the reform:

1. Changes in Medicare and Medicaid programs (columns A, B, C, D, L, M, X, Y and Z)
2. Insurance Companies reforms (E, F, G, H, I, J)
3. Government-run marketplaces (P, Q and R)
4. Penalties (N and O)
5. Other minor issues

Using this visualization, a reader can pause at each stop and read the corresponding bill. Some entries have been included without having a connection to a starting point because of their relevance.

Connections between stations, as well as multiple stations, were shown where possible. Enduring effects represent the duration of a bill over the years (some chapters of the reform stop in 2014, while others start then).

Then I added several facts and figures that I found interesting:

I also added a breakdown of the reform’s economic effect on the U.S. budget to clearly focus on the citizens and their future.

Finally I wanted to emphasize the fact that President Obama made health care for every American citizen a reality, something that several presidents tried but failed to achieve before him. So I added a timeline starting in 1912, showing the previous attempts. I used the historic coverage of Reuters as a source of information on this.

The Visualization

In the end, everything was combined into a poster, providing various levels of information. I added the human shape because I originally planned to create a list of all senators who voted against the reform on its back, but unfortunately, there was not enough time to do this.

The final infographic was published in the GOOD Magazine summer issue. You can also find a high resolution version on Good.is.

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

There are hundreds and thousands of infographics floating around, but what you see in the majority of cases is just the final image of a whole decision-making process. As we are passionate designers at Interactive Things, we have always been very interested in the processes behind the scenes. Did you ever wonder how an infographic is originated or if your own approach differs from others? We would like to share the development process of our latest work for FreshBooks.

The Story

FreshBooks is one of the leading providers for online invoicing and time tracking services on the internet. They have acquired a lot of customers all over the world due to their open-mindedness, professionalism and user-friendly interfaces. It is hardly surprising that FreshBooks have collected an impressing amount of various data, like invoice sizes and payment periods, being successfully active since 2003. Because FreshBooks aren’t cagey about these numbers and they want to share them in their blog, they asked us to unveil an interesting story on these data and visualize it.

„How 1 Billion Dollar flowed through the FreshBooks System?“ is the story we want to tell; the story on how the average invoice size and payment periods are arranged in different countries. In some countries, like China, people are remarkably dutiful and pay their bills as fast as they can, whereas in other countries, like India for example, people exhibit a more lax payment behavior. Mexico ranks first regarding the average invoice size, whereas in Malayasia the service seems to be mostly utilized for smaller amounts. Our goal was to make these interesting differences visible and to possibly even disclose undetected patterns by comparing invoice size and payment period.

The Creation

There are several possibilities to make data comparable and to visualize different amounts and time periods. To provide a simple cognition of values belonging to different countries, using a map is a viable and convincing option. So, to begin with we tried to integrate all the data directly into a reduced world map and started with some sketches.

In the draft above, the average invoice size is indicated by the size of the circles. The angle of the darker segment of the circle depicts the average payment period.

Combining both information in one single shape, however, seems not to be optimal: If the invoice size, and thus the respective circle, is small, the dark segment depicting the payment period is very hard to read. But even if the circles were all the same size, the visualization of payment periods with segments wouldn’t be ideal for comparing the values. That is why we decided to keep it simple and to integrate only the invoice sizes into the map, visualizing them with bubbles. Furthermore, we opted for bar charts to depict the payment periods and the invoice sizes in order to improve the readability, especially regarding possible dependencies:

If you design infographics yourself, you are familiar with the situation in which some data throws a spanner in the works and seems to mess up your whole concept. In our case, the average invoice sizes of European countries are the biggest and the density of the data is the highest, thus there is not enough space to place the bubbles on their actual location. To solve this problem we added a magnifier. Now, the bubbles still overlap, but they correspond with the respective European countries, which was our intention – the map should just serve for quick orientation, actually comparing the different values is more effective with the additional bar chart.

In order to increase the readability regarding a comparison of the data, we combined the two bar charts. The green bars indicate the average invoice sizes in dollar, the blue ones stand for the average payment periods in days. We decided not to use a scale, but to label all bars separately instead. On the left we added the overall average which acts as an underline at the same time:

The Image

Lastly, we connected the bars with the corresponding bubbles and added a header and a footer. And this is what the final infographic, the result of our decision-making process, looks like:

What‘s your conclusion? Would you have made other decisions or do you have another approach for designing infographics altogether? We are very interested in your opinion, so please share your thoughts in the comments below.