Our Five-Step Application Process

Our application process merges careful and thorough evaluation with a fair and efficient approach, ensuring each step is meaningful and insight-oriented. We apply this proven method irrespective of the discipline or seniority being pursued.

• Application with letter of motivation, résumé and portfolio
• Initial interview about your expertise, experience and expectations
• Completion of a technical homework assignment
• Second interview about your homework and getting to know our team
• Feedback with an offer and employment contract

Essential Application Documents

Your application documents offer your first opportunity to make a positive impression. We expect you to write a short but concise letter of motivation to understand what drives you personally and why you are considering Interactive Things as a future workplace. Your CV provides insight into your academic and professional background, aiding our assessment of your practical skills and expertise. Your portfolio showcases your experience through a handful of relevant pieces of work. In addition to the final result, your portfolio should demonstrate your methodical approach, problem-solving skills, and your ability to reflect upon the impact of your work.

Initial Interview: Getting Acquainted

In our first interview, we would like to learn more about your professional journey, your experience in working with other disciplines and your career aspirations. We also look forward to hearing about your expectations of us as an organization and answer any questions you may have about the responsibilities of your position with us. As we like to play with open cards, we will use this opportunity to discuss our financial compensation model and administrative framework. This interview will be conducted by two of your future colleagues from our team, with a focus on diversity in terms of professional and demographic perspectives.

Second Interview: Assessing Skills

In our second interview, we focus on your professional expertise and organizational capabilities. As a basis for this, we assign you a specific task of a fictitious assignment, which you work on within a defined time frame. This assignment is designed to be accessible with a clearly defined scope, ensuring equal requirements for all candidates. During the technical discussion, we will ask you to present the results of your homework assignment, including your approach, process, and findings. In addition to the quality of your approach and solution, we are interested in your presentation and communication skills. Following your presentation, we will engage in a collaborative workshop to jointly scrutinize and refine your solution, completing our understanding of your collaboration style. To give you a deeper insight into our team, we will conclude your visit with an informal meeting with other team members.

Feedback and Offer

Following our internal assessment, we will inform you of our decision. If your application was unsuccessful this time, we will be happy to provide you with information about our assessment. If your application was successful, we will send you our offer based on our standardized and transparent career and salary system. In addition to the monthly salary, this includes additional benefits such as profit sharing, innovation and education scholarships, flexible working arrangements, extended parental leave, and free lunches. These and all other rights and obligations are defined in our collective employment agreement and it is important to us that you review it and clarify any questions you may have. If everything fits, we look forward to welcoming you to our team.

When you start working for us

Applying to an organization also means joining an unfamiliar group of people, and that takes courage. We support you in your transition with personal support and our onboarding program. This allows you to get to know your new colleagues, familiarize yourself with our tools and processes, and take on your role in our project work. At spontaneous meetings in our studio in the heart of Zurich, during project- or subject-related workshops, and at company-wide discussion rounds, we will welcome you into our team with a keen interest in your opinion.

You can find a German version of this article on the Freshjobs Magazin.

Der Bewerbungsprozess bei Interactive Things - Freshjobs Magazin

Your Journey Through Our Application Process was originally published in Interactive Things on Medium, where people are continuing the conversation by highlighting and responding to this story.

This article is about creating refined color scales for charts and visualizations. You will get insights from, and a deeper view into, our working process at Interactive Things. For us, a diverse and balanced palette is one of the key components to efficiently communicate information trough color. A list of the used tools can be found at the end of this article.

The Briefing

The general goal of the project at hand was to create a comprehensive and consistent library of basic charts. From simple line and bar charts to choropleth maps and coordinated visualizations. The charts will eventually live on the web and will be embedded into an existing website. As a public institution, our client has special requirements related to readability and accessibility of all of their content including the interactive visualizations. Therefore, our work on the color scales had to take into consideration the established visual design of the website and the extensive requirements of the target audience. The results had to be precise, distinct, memorable and applicable on a broad variety of different chart types.

The Strategy

Considering above mentioned requirements we proposed to build on top of established and proven methods for compiling the color scales. But, using existing color scales provided by Colorbrewer and the likes wasn’t an option for our client. The color scale had to show a customized aesthetic to be recognizable. We tackled this challenge of combining scientific features and visual aesthetics by applying the underlying principles from color theory and tweaking the hue, saturation, and brightness of the colors to guarantee quality and uniqueness.

The Goal

To solve the different tasks in data visualization trough color, we decided to focus on the three main color palettes.

The sequential Color Scheme (S01)
Sequential data sets are arranged from high to low. Low data values are usually represented by light colors and high values represented by dark colors. Terrain slope categories or population densities, for example, are well represented by sequential color schemes.

The Diverging Color Scheme (D01)
Diverging schemes show information outward from a critical midpoint of the data range. A typical diverging scheme uses two different sequential schemes so that they diverge from a shared light color toward dark colors at each extreme. Deviations above and below the median death rate from a disease, for example, are well represented by a diverging color scheme.

The Qualitative Color Scheme (Q01)
Qualitative schemes use differences in hue to represent nominal differences, or differences in kind. The lightness of the hues used for qualitative categories should be similar but not equal. Assign the lightest, darkest, and most saturated hues in the scheme to categories that warrant emphasis in the representation. Data about product categories or city districts, for example, are well represented by a qualitative color scheme.

The Process

Branding guidelines
As many projects do, this one also started with a review of the Statistik Stadt Zürich branding guidelines. Those are elementary for our design process in order to stay consistent with the surrounding visual design. In this case the requirements we had to follow weren’t very strict. The color definitions in the manual recommend to keep a colorful palette instead of specifying precise colors. It was clear that we would use the prominent «Zürich Blue» as a base color, though.

Exploration
In this first phase we kept the creative flow open and made some wild mixes and color pickings without following too many rules. Beside the default blue as our main color, it made sense to use red as complementary color to generate a clear contrast in hue. A second argument for the combination of blue and red was the red-green color blindness wich is most common by humans.

Sequential and diverging color schemes
After the exploration we focused on two different directions. At this point it was necessary to get the clients feedback to reduce the amount of alternatives. The first version included brighter tones as an alternative to the original branding colors. The second proposal included more muted versions of the original colors. For the S01 scales we made sure that every color shade has a corresponding equidistant grey tone to improve readability on devices with poor color representation.

Neutral version of diverging and sequential color schemes
After we decided together with the client for the «muted» version, we made additionally a neutral version of the two main colors. «Neutral» because in the western culture red has a strong intuitive meaning to most people. Red usually stands for «wrong, error, attention, …» and other negative expressions. The contrast between red and blue makes those intuitive interpretations even stronger. This can be used as an advantage to show a part of the data wich reaches a certain limit in red. But, if you want to show two opposing values without any indication for good or bad, then this cultural precondition could lead to misinterpretations. It’s important to use color like an instrument to tell the right story. Therefore, it made sense to create a neutral version corresponding to the main colors. In this case we decided that green and brown are a good solution to fit the main colors in saturation and brightness.

Qualitative color scheme
For the qualitative color scale we made another wide exploration. It helped a lot to have many directions at first, before making getting more specific. The possibilities to create qualitative color scales are endless. There are tempting collections of color schemes available on the web. Yet for us, it only made sense to use more grounded methods than taste and style to achieve a justifiable palette.

Qualitative color scheme with a more scientific approach
We had to define six different colors for the qualitative scale to get a large enough selection. To get them as distinguishable as possible we picked the six base colors on a linear distribution across the whole visual spectrum. This means that all of the selected colors are similar in brightness and saturation, but different in hue. Furthermore, the linear distance between those six colors had to be as equal as possible. With this approach we received a solid foundation that we were able to refine in hue and vary in brightness and saturation.

Sorting
It’s impressive how much sorting influences the effect when colors get applied to visualizations. This considered, we made it a conscious decision to define a fixed order in wich the colors show up. See the examples to get an impression over the sorting effect:

To extend our series of six colors up to twelve, we followed again the principles established by Colorbrewer. We took the base color in hue and increased the brightness. The same recipe was applied on every color of our scale of six.

Accessibility
As a public institution, our client had extensive requirements in accessibility. Optimizing the defined color scheme for the most common cases of color vision deficiencies was the evident next step. Using digital tools that adapt the screen colors to imitate a decreased ability to perceive color differences, we refined the actual color schemes and optimized colors in hue, saturation and brightness to guarantee best possible outputs for all kinds of users.

This overview compares how the color scale is perceived by people with any of the following color vision deficiencies.

Please note, that not every software ist rendering the exact same results. To make a best effort, combine the different outputs and try to generate a smart result out of precise perception and experience. In the end, we will never now how the world looks like trough the eyes of another person. So, this is a very difficult process and it’s hard to find the best solution.

The Result

And finally, the result of our work:

The Tools

The breadth of our exploration, the precision of our result and the depth of our evaluation was only possible with the help of the following tools.

• I Want Hue: A favorite tool to create nice color palettes. Tip: Save the colors you like with the lock symbol and refresh the application for new suggestions. You can also force a specific color with the hex code into the palette.
• HCL editor: Very useful tool to get an overview over the visual spectrum and how color scales can make sense in a mathematical way.
• Kuler: The most popular color styler tool from adobe. Here you get nice and contemporary suggestions for your work.
• Spectrum: A OSX Application wich is similar to Kuler but without the community aspect. Great feature is that you can pick colors directly from any application on your desktop computer.
• xScope: A OSX Application wich works like a filter to check the most common color blindnesses.
• LiveView: A very simple iOS/OSX Application wich sends the screen from your desktop to a mobile device. There you can apply a nice greyscale filter to test your color shades for color blind people. By the way it gives you a alternative look of your colors on an alternative screen.
• HSB instead of RGB: For fine tuning we highly recommend the usual HSB editor wich you can find in most design applications. It takes a little time to get used to the logic of hue, saturation and brightness but it makes totally sense. HSL and HSB are based on the same concept.

Written by Jonas Wyssen during his internship at Interactive Things.
Originally published at Datavisualization.ch on 15 September, 2014.

How We Created Color Scales was originally published in Interactive Things on Medium, where people are continuing the conversation by highlighting and responding to this story.

As part of my internship at Interactive Things, I was offered the opportunity to work on a purely self-directed project. I decided to create a visualization based on the interview collection of Substratum. I was involved in the redesign of the website itself and the idea for a more quantitative or lexical access to the content was part of my initial concept exploration.

Step 1: Analysing the text

Honestly, the world of data mining and natural language processing was something I never worked on before. This was the first challenge for me to confront.

The first step I took to dive into the subject was to look out for tools doing Natural Language Processing. I was actually quite surprised to see many of them out there, some internet based such as Wordle, TagCrowd, NGram Analyser or the LIWC which allows a first basic analysis of the data through the production of word cloud for example. On the other hand, there are many more sophisticated text analysis solutions such as R or WMatrix. Finally a javascript possibility exists: NaturalNode based on the node.js.

With this first insight, I decided to do the first most obvious kind of visualisation: word cloud. I was hoping to identify keywords, which I did, and therefore have a first overall idea of the themes and structure of the corpus. I quickly realised that some of those words didn’t make much sense such as “just” or “lot” to name a few. I actually think that the word cloud comparison, rawly done like this, can be interesting to compare different kind of texts, such as an interview and a literary text for example, to spot differences in the vocabulary used.

After this first analysis I decided to work with R, to be able to clean the corpus and direct a bit the analysis. This choice has been done because of the nature of the R project: open source with an important community and a lot of plugins ranging from probability analysis to text mining. The work done with R, using the t.m. library mainly, was a cleaning one, removing all stopwords (i.e. “a”, “this”, “is”…), uppercase, punctuation… After applying some algorithms on the cleaned corpus I could analyze the new emerging words, some where common to the ones found during the first wordcloud process, other kind of new. I processed in a loop comparing the results with the expected results, refining the corpus wordcloud visualization.

The next step brought me to the use of Gephi to have a network visualization of the corpus thus cleaned, using the same data set used to create the last wordcloud. From this point, I worked in a loop between R and Gephi to refine the network. Gephi revealed to be an interesting tool to see who (interviewee) is linked to what (words), and therefore visualize the proximity of two interviewees. On a visual level the network visualization produced can be considered as aesthetic but on a meaning level I didn’t consider it as being really relevant. Indeed the real meaning of the words is stripped away because they are out of their context. So two interviewees may have used the same words to express totally different ideas. In that case is there still a link between both of them? And if so, shouldn’t we differentiate different kind of links?

Step 2: What happens next?

From this conclusion and after discussing with several persons, I decided to reorient the project to be able to have the meaning of the words back in the loop. Therefore, I focussed the analysis of the corpus on the words and their context of use.

One idea that I developed was to use a sunburst representation. In the center would be the main themes of Substratum. Then each division corresponds to a way his parent is defined. It creates accordingly a path of words revealing one way of thinking a main theme. Ideally the external words are linked to their(s) interviewee(s) and to the questions where they are used, this allowing a full representation of the Substratum corpus.

This brought a technical challenge: it requires a more sophisticated analysis. To do so I used Cortext which instead of analysing the corpus word by word, analyses it by group of words, which put those back in their context. This resulted in a new data table which included some words that had been put aside during the first phase because of their relative lack of meaning. From this new data set, I did a personal analysis of the corpus to build a table of words connected between each other. Then I began a new prototyping phase using D3. I firstly stick to the sunburst visualisation and then did some experiments with tree diagram layout and playing with the data sets.

Step 3: Final Prototype

After three weeks of research and experimentation, came the time of doing the final prototype. To do this I used the following concept: the visualisation would be composed of three areas separated by two circles. The inner circle corresponds to the different interviewees, the outer one to the words present in the Substratum’s corpus. The links in the inner area (yellow) would represent the connections between the different interviewees according to the strength of their speech’s relationships. The links in the second area (red) would show the relation between the interviewees and the words. Finally the links in the outer area would show the relation betwwen the words allowing to have the context of each word. One of the interaction imagined with the visualisation would be the ability to filter by clicking on an interviewee or a word revealing their specific connections. Other features can be imagined such as a search engine where you could play with the visualisation according to your interest. The possibility to navigate to a corresponding part of the full interview by clicking on a word can also be considered.

Although, the final prototype is slightly different from this original concept. It doesn’t have any apparent link and is based on a more linear approach. First no links have been implemented, instated the inner circle, corresponding to the different interviewees, gains some meaning by a difference in the length and the thickness of the different segments. The link between an interviewee and the words he is using is made by clicking on this interviewee and letting play an animation of the words appearing in their chronological order. The user has the opportunity to explore those words manually once the animation is finished. I invite you to try the Substratum Visualisation by yourself.

Final Thoughts

I think this project was really interesting in many ways. First it really made me use methodologies that I have learned during my internship at Interactive Things, especially in term of project and time management. It was also the opportunity to dive into an unknown field for me: natural language processing and data mining. Thanks to this I have had a glimpse of the complexity associated with text analysis. As a final thought I would say that the project would have been more complete and relevant if a multidisciplinary team including people working in the linguistic field, on a technical side or a theoretical one, would have been involved.

Written by Estelle Hary during her internship at Interactive Things.
Originally published at Datavisualization.ch on 17 February, 2014.

How We Visualized Semantics and Similarity was originally published in Interactive Things on Medium, where people are continuing the conversation by highlighting and responding to this story.

In this article Martina Frantzen describes her process, her experience, and her learnings from contributing to the Visualizing.org data visualization challenge as part of her internship at Interactive Things.

Research and Analysis

The data set was provided by The Meteoritical Society, an organization that has been documenting meteorites since 1933. The data set we received contained the name of each meteorite, the weight, the year when it fell or was found as well as its coordinates. I noticed early that the amount of registered meteorites was very few before 1974. The reason for the increase was that during this time scientists started to discover meteorites in the deserts of the Earth which eventually led to more meteorites being registered.

In order to get some more knowledge on the subject, I decided to set up a meeting with a professor from the Institute of Geochemistry and Petrology in Zürich. The discussion was very helpful and I definitely got a better understanding of the topic matter. Since the data presented the types of meteorites, one initial thought was to show the origin of them, but unfortunately the documentation of where in space the meteorites originate from is not documented well enough to cover the large part of the approximately 34 000 meteorites that were included in the MS’s data set.

Concept

One of the focus points that could give an interesting take on the data is to bring forward the variation of materials of which the meteorites consist. Initial data analysis made it clear that the distribution between the types is quite striking. One of the things that caught my attention when looking at the data was how much of the meteorite types were Chondrites and how few Martian rocks there were. Since the material of the meteorite gives us some hints about its origin, I thought this was a very interesting approach to use when telling a story about this topic. After some research I found that the types can be categorized into ‘stony meteorite’, ‘stony iron meteorite’, ‘iron meteorites’ and in this case also ‘other’ which would include unknown and smaller groups of meteorites. The overall dimensions that I wanted to include in the visualization is the types, the location and the size of the meteorites, which eventually was chosen to be shown in the first part of the visualization on the globe. Different colors were used to clearly indicate the four categories of meteorites and their location shown on a map. The second part would use the same categories but put them in a time perspective and point out the yearly amount of meteorites and what category they belong to.

During the sketching phase I wanted to find out how to enhance the chosen set of data and to visually adapt it to the style of the topic itself. As I mentioned earlier the documentation of meteorites didn’t really start until 1974, which means that the chart has very big differences from year to year. This restricted the choice of visualization to some extent because the material amounts vary a lot and some would be barely visible, depending on the style of visualization of course. With the time-frame in mind and since I am still unexperienced when it comes to working with D3.js I decided to go for a static A1-sized poster that would show both of the visualizations. This allowed me to focus more on choosing the right kind of content and figuring out how it could engage the viewer with all the information shown. I started off by figuring out how to show the locations, size of the meteors and their type as one visualization. This would eventually be projected onto a globe showing all the continents and the meteorites as different sized dots and colors. To do this an ‘azimuthal’ equal area projection was used in D3.js that would show all the meteorites and continents at once.

Result

The final result is a poster that shows the locations of all the registered impacts on a globe and the material of these meteorites. On the upper visualization I wanted to highlight some of the meteorites because of the story behind them or how its landing has affected Earth. Some of the meteorites I pointed out were the Cape York Meteorite, which is the heaviest meteorite moved by human force. Another important crater that I wanted to show is the Chicxculub crater that is believed to be formed by the meteorite that eventually led to the extinction of the dinosaurs. The color categories are also used on the second visualization to show the separate amount of a specific material for each year between 1974–2012. The material amounts are separated in different layers to show them in comparison to each other and to make each category more visible.

Challenges

Some of the challenges that I encountered was to choose what parts of the data to use and enhance in order to create an interesting twist to it. In the beginning of the process I wanted to try to combine the original data by the MS with external data but this turned out to be challenging because of the extensiveness of the original set. I also think that by exploring the different ways to tell a story with the original data contributed a lot to my learning and understanding of its diversity. Choosing the colors for the meteorite types, turned out to be harder than expected. Since there are so many meteorites on the map, the colors have to be recognizable and easy to distinguish. To achieve a clear contrast with the colors, I explored with light and dark maps as a background for the dots to see which one is the clearest. After trying out several colors, textures and levels of brightness, I found the version with the darkest map to be the best background for the colorful dots.

When displaying the information on the poster the balance of the content was crucial. Showing a large amount of information on one poster puts a lot of focus on the layout and trying to visually avoid “over informing” the reader. Although a lot of information is displayed at once, it is important to achieve an engaging experience for the viewer and to keep them interested. That’s why it is crucial to set up the content so that it allows different layers of information depending on how much information the reader wishes to receive. This means that the information should be easily understood at a quick glance, but still allow room for more in-depth examination.

Conclusion

Taking part in this kind of challenge was a very interesting experience for me, especially since I haven’t worked with data visualization prior to my internship at Interactive Things. By participating in this challenge I got a very good insight of how it is to work with data, making it engaging and easily comprehensible for the viewer. The balance between creating a visually appealing and captivating result and conveying it without compromising the accuracy of the data is something that fascinates me with data visualization and I hope to be able to work with similar challenges again soon!

Written by Martina Frantzen during her internship at Interactive Things.
Originally published at Datavisualization.ch on 14 June, 2013.

How We Visualized Meteorite Impacts was originally published in Interactive Things on Medium, where people are continuing the conversation by highlighting and responding to this story.

During the first two weeks of March 2013, Interactive Things and the Swiss newspaper “Neue Zürcher Zeitung” (NZZ) collaborated on a web publication about the Fukushima nuclear disaster that took place in Japan in 2011. The reporter Marcel Gyr and photographer Christoph Bangert revisited the same people they met two years earlier and interviewed them again to hear their personal accounts on how their lives have changed during that time.

The Starting Point

Our task was to create an online reading experience to present the long form text, the photos and the video footage in a sincere but pleasant way. To support the readers in their understanding of the text, we created several visualizations to clarify and point out important facts. However, because the focus of this publication was very much on the people, we had to be careful not to bring too much of our own interpretation of the events into the text. This is where the experience of Sylke Gruhnwald, the NZZ data journalist who initiated the project and collaborated with us very closely throughout, was of great help; she always found the data we asked for and provided guidance in finding the right story and telling it subtly.

Because we wanted the visual and interactive design to reflect the contents of the story, we waited until the reporter returned from Japan before starting any work. After his return, we kicked-off the project by having him tell us everything about his journey and mapped out all the topics he mentioned. It soon became apparent that the four people he interviewed played such an important role that the story should be told around them. With this rough outline and the knowledge about possible contents, we started to work on the storytelling framework and data gathering, while the reporter started to write the text.

The Process

Most of us in the design team didn’t have any prior experience in working on journalistic projects like this which gave a very interesting twist to the work process. Since the content (written by Marcel Gyr) was something that was created in parallel to the design process, our task was to develop the right kind of framework for it. Because of this parallel development it was very important that we were able to work directly at the NZZ offices to easily get questions answered, decide on contents and keep everyone on the team up-to-date with where the text and thus the project was going. By the time we received the final version of the story we were able to pick and choose from our prepared assets and layout the story with the matching contents.

Since the article would include media such as video, photos and visualizations, we wanted to use them in a way that explained certain subtopics of the stories without creating a distraction for the reader. The placement of them was in many ways crucial both for keeping the amount of material similar through all the chapters, as well as creating a balance between visual elements and the text. When we considered the layout of the page, we also wanted to keep the focus on the people in the story and portray them in an honest manner.

Data journalist Sylke Gruhnwald acted as a link between us and the NZZ team during their visit to Japan. During the trip she updated us on the progress and what kind of material had been acquired. Sylke worked closely with us during the whole project where she collected and organized interesting data and material that would be useful for the project. She also translated the interviews together with the japanese translator Sena Hangartner.

The photos that were brought back from the trip were printed out, which enabled us to use them when structuring the content and its correct order. We put all the images up on a wall where we could easily change the order and maintain a good overview of the project. Since we knew the chapters were going to be based on the different families and people, we were able to start thinking about how and when they would be shown within each chapter. This way we could easily mark the images that would be used as cover pictures, included in slideshows and which ones to remove altogether.

After planning the content and collecting the data, it was time to bring the many ideas to life by developing the website for desktop browsers, tablets and smart phones. After the greater layout and position of the content was defined, the more detailed components, such as the maps and the visualizations, were created and placed accordingly. After sketching out the layout we moved on to think about the transitions and actions of the content and how to mark the beginning and end of the chapters. The initial ideas were prototyped in Apple Keynote to see how the transitions between the chapters would work together with the text, the pictures and the videos. We wanted to test how content could be displayed during reading and how the the chapters could be divided in order to maintain a good flow in the story.

The Result

An additional thing that we also needed to consider was that not everyone reads an article from start to finish. The reader might want to have the choice of switching chapters during reading and know more about a specific area or person. For this we created a navigation menu at the top of the page which can be accessed at any point. This menu allows the reader to jump to sections based on a specific geographic area or to a certain family or individual in the story. When choosing an area from the list, it is marked on the map on the left side of the drop-down menu in order to give the reader a better idea about the placement in relation to other cities.

The visualizations for the different parts of the text served the purpose of giving more depth to the topics. For example in the chapter about radiation, the measuring units micro- and millisievert are mentioned. Here we wanted to explain what these units measure without going into too much technical detail. The aim with this specific visualization was to show the amount of radiation that is mentioned in the text and compare it to places and situations that we are exposed to during our everyday lives. We used Processing to render small Gif animations where each of the squares represent the radiation amount in the shape of small moving particles, because that’s what Sievert actually measures. The more dense the particles are, the more radiation it symbolizes. By using this visualization technique, the readers can start to “feel” what these abstract values mean. Even more so with the concluding image, which shows the radiation measured directly in the Fukushima reactor: 400 millisievert per hour compared to all the other values which are measured per hours; it’s almost completely black. The colored row of squares shows the radiation according to the radiation map we used in an earlier chapter. Here the colors are the same as on the map, with the darkest red being the area with the highest radiation and the lightest representing the area with the least radiation. This was done to connect the visualization with elements that the reader has already seen and can easily recognize.

To show the extent of the evacuation we wanted to show the concrete evacuation zones mandated by the government and how far the people were evacuated from their homes. Because, as it turned out, some people that had to leave their homes live “only” fifteen or twenty kilometers from their former home but can never go back. For this purpose we created two different visualizations: a map that shows the evacuated areas and a visualization of the exact distances. The map was chosen because of the geographic accuracy of the different zones and their classification. The classifications were: “Area to which people may return but not stay overnight”, “Restricted area”, “Difficult area”, “Fully evacuated area” and “Planned evacuation area”. The zones are classified depending on how much radiation still exists in the area at that time. The yearly changes of the zone restrictions were shown as separate maps where the reader can see the changes in the borders clearly. The colors that were explored were based on the existing color profile of NZZ but moved later on to simplistic colors such as different shades of red. This was done to maintain a similar style of the visualizations throughout the piece.

To explain the distribution of how far people were evacuated from their homes and to which cities they moved, we used a very simple visualization. Since we were mostly interested in showing how far people have been evacuated from their starting destination we didn’t need to show it as a map but instead we used lines to represent the distances and destinations. The vertical line in the middle shows the distribution of evacuees from the north to the south of Japan. The red color represents the situation in 2011 and the blue part of the lines show the development of the evacuation during 2012. From the visualization it turns out that most of the people were evacuated to areas very close to their home and not to cities further away. By showing the information in this way, the main information about distance is clear and the areas where most people were evacuated to is very easy to spot.

To inform about which areas are currently contaminated, we traced an official map. The intensity of the radiation was shown again with different red shades, where the darkest red represents the zone with the most radiation etc. The same colors are used deliberately to link to the colors used in the evacuation maps and the Sievert visualization. By placing a silhouette of Switzerland next to the radiation map, the (mostly Swiss) readers can get a better understanding of the size of the area in question.

For the evacuation and radiation maps we used a slideshow, for the visualization explaining micro- and millisievert, we used a grid of small animated Gifs that were rendered from Processing.

These simplifications allowed us to use our development resources on getting everything working instead of debugging even more code. The implementation of all design details was done at the very end from Fireworks mockups and with the final content.

The final result is an interactive web online publication that is developed with a large focus on the reading experience and enhancing aspects of storytelling by using interactive features. The publication has a responsive UI which enables the reader to read the content on various devices such as a smartphones, desktop browsers and tablets. The look and feel of the publication should convey a certain calmness and let the reader take his/her time when viewing it.

We wish to thank Sylke Gruhnwald and Marcel Gyr from NZZ for an interesting and memorable collaboration. Have a look at the live version of the article at fukushima.nzz.ch and let us know your thoughts.

Realized by Interactive Things.
Originally published at Datavisualization.ch on 25 March, 2013.

How We Visualized Life After Fukushima was originally published in Interactive Things on Medium, where people are continuing the conversation by highlighting and responding to this story.

After reading about the visualizing.org challenge to create an interactive visualization for the Olympic Summer Games, our current intern Christian Gross accepted the challenge and took it upon himself to create a visualization, applying the new design and development skills he got while staying with us.

His visualization looks back at the 112 year history of the games, which were first held in the city of Athens in 1896. His visualization tries to convey their evolution and to provide an overview of the participating nations, the medals they won and the sports they were most successful in. Here’s how Christian experienced his work on the challenge, what obstacles he had to overcome and what he has learned by doing so.

The Brief

The competition brief was to design a visualization about the Olympic Summer Games. The deadline was set for the 27th of July, which meant that I had merely two weeks left to complete the project, when I started working on the project in the beginning of July. The rest of the briefing was kept rather open providing only an exemplary visualization piece by the New York Times and some suggested data sources to start with.

The Idea

My initial idea was to compare the individual sports visualizing differences in the average age per sport for the competing athletes. Though, after having a first look into the existing data sources I had to give up on the idea because the data on the athletes age was to incomplete to craft it into a meaningful visualization. The idea I settled for was derived from the greek mythology and the history of the Olympic Games.

The origin of the Olympics is shrouded in mystery and legend. One of the most popular myths identifies Heracles and his father Zeus as the progenitors of the Olympic Games. According to legend, it was Heracles who first called the Games “Olympic” in reference to the mythological Mount Olympus — the home of the gods and the highest mountain in Greece — as a strong symbol incorporating the spirit of the games.

The story of Mount Olympus inspired me to apply the metaphor of a mountain to my approach on how to visualize the accumulation of medals for each nation over time. The concept I then came up with generates unique looking images for each nation by layering all the medals a country has won over time on top of each other while sorting them by sports, thus creating a bar chart resembling a mountain range built out of stacked olympic medals.

The Data

I decided to use sports-reference.com/olympics as the data source for the project, because the site was well structured and also offered some of the data as downloadable CVS files. After some initial tests on the data, I sketched out the complete data structure needed for the visualization consisting of informations about the games, the sports and each individual country. I wrote a handful of python scripts to fetch all the medal-counts and information for each country sorted by year. The result was a collection of 137 separate country data files in the JSON format which I merged together into one big file.

The Design

The next step in the process was to test the dataset and look for emerging patterns. My initial plan was to map each sport to a fixed position inside the graph, so that the user could easily compare rankings in one sport across different nations. What sounded like a good idea at first was quickly revealed to be visually unsatisfactory, for it resulted in distracting graphs that looked like there would be data missing, since not every country had won medals in all kinds of sport.

After reconsidering the placing of each sport, I came up with the elegant and simple solution to sort each sport by the medal count and arrange them from the center outwards, thus showing which are the top sports for each country while reinforcing the metaphor of growing mountains.

With the gaps in the graphs closed, the next step was to do a ranking of all the countries. After reading how the official ranking of the IOC works, I implemented the system which weights the countries by their gold, silver and bronze medals count to conclude the ranking list. Using this system I develop the first working prototype of my visualization with the help of the Javascript framework D3.

The prototype also presented me with several new challenges. The first thing I realized was that the total amount of american medals would break the scale boundaries of the visualization. I came up with three different ways to handle the issue: First, I could rescale the boundaries, but that would mean to lose the details in the countries with a small medal count. Second, I could use a logarithmic scale. Or third, I could take advantage of the situation by including the break to add a unique touch to the visualization. I decided to go with the third possibility, letting the bar break through the upper boundary, thereby conveying the remarkable strength of the US in the athletics field in an even more engaging manner.

Furthermore, I tried to keep the design of the visualization as clean and simple as possible in order to keep the communication in a clear and focused manner and support the idea of the metaphorical mountains. Therefore I limited the use of color to labeling of the selected sports and to indicate the newly won medals in the currently selected Olympic game. I also limited the user interaction to allow only the possibility to change the year of the game and to highlight a chosen sport across all countries.

The Conclusion

It was a great project to start, test and improve my skills in D3 and Python. I learned a lot about data gathering and how to work with, transform and verify the data. The timeframe of 2 weeks, working mainly on the side of the normal daily business, was really quite challenging and maybe even a little bit to short. In the end I wish I would have had just a little more time to work on it, maybe even adding some more features like an overview of all the newly won medals for each country and a detail view of each sport, so that the user can understand the IOC ranking a little bit better.

Finally, I have to thank the whole Interactive Things Team for supporting me!

Written by Christian Gross during his internship at Interactive Things.
Originally published at Datavisualization.ch on 07 August, 2012.

How We Visualized 112 Years of Olympic Games was originally published in Interactive Things on Medium, where people are continuing the conversation by highlighting and responding to this story.

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 train station.

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 data points were not the actual phone calls 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 data points 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 bar charts 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 particle systems and magnetism. Although 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 becoming 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 data points 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.

Realized by Interactive Things.
Originally published at Datavisualization.ch on 25 April, 2012.

How We Visualized the Vividness of Geneva was originally published in Interactive Things on Medium, where people are continuing the conversation by highlighting and responding to this story.

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:

1. All Years View: This is the starting view. It shows a summary of all states in all years.
2. 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.
3. 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.
4. 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 Open 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.

Realized by Interactive Things.
Originally published at Datavisualization.ch on 25 April, 2012.

How We Visualized 23 Years of Geo Bee Contests was originally published in Interactive Things on Medium, where people are continuing the conversation by highlighting and responding to this story.

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 article 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 Posters

Realized by Interactive Things.
Originally published at Datavisualization.ch on 24 March, 2011.

How We Visualized 1425 Students’ Learning Environment was originally published in Interactive Things on Medium, where people are continuing the conversation by highlighting and responding to this story.

Over the past weeks, we have 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 article 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 (please note that the website is unfortunately no longer available as of January 2016). 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 and 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.

In addition to the dynamic, interactive visualizations, we also published a series of static infographics over the course of the project. Below you see one example:

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

Realized by Interactive Things.
Originally published at Datavisualization.ch on 04 November, 2010.

How We Visualized 4.3 Million Votes was originally published in Interactive Things on Medium, where people are continuing the conversation by highlighting and responding to this story.