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

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.