TL;DR: We will no longer actively publish on Datavisualization.ch, as our focus has shifted from collecting visualizations to building them. This site will remain accessible as an archive. You can follow the work and thoughts of the people behind Datavisualization.ch on blog.interactivethings.com.

If you were an avid reader of Datavisualization.ch during the past years, you have experienced a decline in activity around here lately. And by lately I mean in the past year or so. It’s bothering me that I left this site lingering around. Even more so, as I failed to let you know what’s going on that holds me back from publishing more frequently.

Christian and I started to publish our thoughts and findings during our collaboration on our thesis project at the Interaction Design program of the Zurich University of the Arts back in 2008. After graduation, we broadened our scope and started to report news and document noteworthy projects created by others beside our own work. Our private research blog became Datavisualization.ch. It was our repository, our library, our diary. But more than anything, it was a place for us to engage with the community that creates this fantastic body of work that we observed and studied.

Over time, we’ve built up a vast collection of case studies that inspired, educated, and motivated us. But I don’t see it as a collection of just design projects. I see it as a collection of ways to look at our world. A set of lenses through which we can explore and observe the things around us. Other people created them, lend them to us and it’s free for us to pick them up and have a look on our own. I take great pleasure in picking up new lenses. Borrowing somebody else’s perspective to understand how she sees the world. To learn the things that she discovered when exploring the subject at hand.

That said, beside being a passionate observer, I am also fascinated by the opportunity to lend someone a new, a different perspective with my own work. Since I co-founded Interactive Things together with Christian and Jeremy, I got to do exactly this on a daily basis. And we don’t do it alone anymore. Over the past years, we’ve been joined in our practice by a fantastic group of talented designers and developers. My work became our work. It’s the result of a collaboration with blurring lines between a single person’s contribution. And it’s bigger than what a single person could have achieved.

My role changed during this transformation and growth. For the majority of our projects, I don’t write many lines of code. Neither do I put finishing touches on the vectors and pixels. I help bringing them to life by setting up the project team, directing the overall vision and strategy, guiding decisions about design and technology, or relaying communications. This role needs my full attention for most of my waking hours. And that’s fine. But this also means that I’m limited in how much time I can spend reviewing projects, books, or events. My acts of curation have shifted to leaner platforms like Twitter, Tumblr or Pinterest. There, I’m collecting and sharing a lot of the newly published visualization projects that spark my interest.

So, where do we go from here?

• Datavisualization.ch with all its content will remain accessible as an archive. So don’t worry about losing your bookmarks if you have any.
• I will still be actively using @datavis on platforms like Facebook and Twitter and remain available for anything exciting that you’d like to share with me.
• I will also remain available for speaking and writing engagements around the general topics of data visualization. Just reach out and I’m happy to discuss how I can help.
• My team and I will publish our insights, thoughts, and opinions from our research and practice on the studio blog of Interactive Things. You can follow us on blog.interactivethings.com.
• The popular Inside article series, where we explain the process behind our work, will continue on our studio blog. We will even migrate and re-release previous articles.

Thanks for reading and sharing.

Signing off,
–Benjamin

Introduction

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
Kuler is the most popular color styler tool from adobe. Here you get nice and contemporary suggestions for your work.

Spectrum
Spectrum ist an 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
This is an OSX Application wich works like a filter to check the most common color blindnesses.

LiveView
LiveView is an 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.

Please comment below for feedback and questions about how we create color concepts.

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. You can read more about the design process of the website itself on the Interactive Things Internship blog.

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.

In preparation of the Winter Olympic Games 2014 in Sochi, we helped the Swiss newspaper Neue Zürcher Zeitung publish a long-form article about Iouri Podladtchikov, a professional snowboarder and – since yesterday – freshly baked Olympic gold medalist. To help readers better understand the sport and its terminology, we created a series of illustrations and an interactive animation in collaboration with scientific illustrator Roland Ryser, who brought a unique visual style and a didactic background to the project.

Our main goal was to explain how the Cab Double Cork 1440 works, the trick Iouri invented and aptly named the YOLO flip. “Cab Double Cork 1440?” This insider vocabulary confused us as well, so we wanted to provide the readers with a short introduction to snowboarding. We started with showing the context – the half-pipe where everything takes place – and visualized the numbers that are mentioned in the text using a Swiss train composition.

To teach readers what they should look out for in a snowboard trick, we chose to create animations of three distinct tricks that show the basic ingredients: flips, twists and style. A bit more snowboarding terminology: these are, from left to right, a Backside Air, a Frontside 900 and a Frontside Double Cork 1080.

To make the YOLO flip itself tangible, we combined several techniques to guide the reader through the trick, but also allow them to explore it at their own speed. Here are some decisions we made. If you want to follow along, it’s best if you open the visualization in another window.

Overview first

The first thing a reader sees is an overview of the jump so they get the whole context of what’s happening. By showing ghosted keyframes, we can take the time dimension out of the equation, making it easier focus on position in space.

Guidance

By providing a guided tour of the trick, the reader learns what to look out for. This way, we can also highlight important moments of the jump, that the reader can later revisit and explore.

Remove distractions

By zooming in on just the body of the performer, we can keep out unnecessary distractions like the half-pipe and viewers. But more importantly, we can remove the position-in-space dimension, so readers can focus on the rotations of the snowboarder’s body over time instead of tracking him in the air above the half-pipe.

Viewpoints

With the two displays that monitor flips and twists, we let the reader know that these movements are important to observe. If you watch a video of a jump and know nothing about these two movements, all you will see is whirlwind of arms and legs. Because these displays reflect the current rotation around one body axis only, a reader can learn to observe rotations individually instead of all mixed together and apply this to other snowboard tricks as well.

Interactive exploration

To get a “feel” of the jump, a reader can scrub through the video frame-by-frame to go back and forth at their own speed and repeat certain movements to observe them from different viewpoints.

The video itself

To get a feeling of how fast this jump actually happens and under what conditions, the frame-by-frame animation can be expanded into the original video, that shows how it all happened in real-time.

This leaves us with with the fully interactive interface:

The most difficult part of producing this visualization was bringing it all together into a package that lots of people with different technical backgrounds can enjoy and understand. We started out with having a top navigation and three different screens: an introduction, a video player, and the interactive part. This didn’t feel right, because the parts were too separate and not as discoverable. We then considered using a toggle to switch between modes, but again, this was hard to discover. Through playing with our own visualization, we discovered that the different pieces of content worked quite well as target areas to toggle the different modes. This felt right, as it allowed for both guided interaction and accidental exploration. Try it yourself!

Process

To produce the YOLO flip visualization, we worked a lot with design sketches, storyboards, and prototypes. We used Final Cut Pro to track the snowboarder, then exported this video as still images to play with it. We put one d3 prototype online for you to play with and see how the scrubbing part was done.

Because we’re not used to extracting rotations in a snowboard jump ourselves, we built a small script that allowed us to track the snowboarder’s rotation in space during each frame of the video. We did this by holding our iPhone in a similar position to the snowboarder in the video and sending the gyroscope data to our computer using the SensorLog iPhone app. This way we were able to track pitch, roll and yaw data for each frame and understood the movements better. We planned on using this data in the visualization, too, but because the individual axis-rotations are really all interwoven, we had to adjust the rotation data slightly to provide better visual matching, although it’s not quite correct.

If you’re interested in more than just the YOLO jump, head over to the original article and read more about Iouri Podladtchikov.

After Heslinki, the 2013 edition of the OkCon, gracefully organised by the Open Knowledge Foundation and Lift, was held in Geneva this September. Raising the questions of how to broaden and deepen open data but also connect its ecosystem, the conference offered the view of many experts in various fields as science, culture, governance, technology or business, all concerned by open data. I’d like to share with you a few points which held my attention.

Contextualization of data

Brought by Francesca de Chiara from the Open Knowledge Foundation Italy during the Open Data: A drive for Development and Sustainability talk, the contextualisation of data is in my opinion one of the most important and urgent points that open data is confronted with.

Surely, context is not a new notion about data, it is one of the most important components of any (design) issue. Though, most of the data sets we have access to today have hardly any proper contextual information. Usually, the most basics questions like what the data is about, how the information was collected or who collected it are absent from the picture or are mixed into the data set itself. In any case, it needs additional work and research to figure out what it is all about and to have a solid and accurate understanding of the data. Leave alone to have the data in a proper format in order to exploit it. What we observe right now can be described as a hybrid situation with contextualized data mixed with raw data.

To solve this problem, we have to address several issues as the resistance to share data, creating a lack of transparency, and the lack of standards for the data, making it hard to cross data from different sources.

On the other hand we also have to think about the context of using the data: in which way will we use it, in which environment, to answer what kind of need? To do this we need to take into account dimensions such as time, cultural diversity, cultural environment, and urgency among others. To illustrate this point, I would like to use the example of the Fruit Fermentation project done by the HONF foundation. In Indonesia there is a high mortality rate due to the consumption of poor quality self-made alcohol. The lab created this project to educate people about how to ferment the fruits and therefore creating non-toxic alcohol. From a Western point of view, this project may be seen as controversial, but in this particular context and different cultural setting, the project makes total sense.

To sum up, the contextualization of data is a key point to facilitate good and meaningful use thereof. In my opinion, this contextualization may be composed of two parts. First, the understanding of the context in which the data is produced. Second, the understanding of the context in which the data will be used.

The future of social

The modern vision of the social network has been established at the beginning of this century thanks to networking services such as Facebook and Twitter. These new tools for human interactions reshape the notion of social behaviour insomuch the technology is now shaping it. The current social interaction is now based on sharing our experiences, through pictures, videos, opinions… and connecting us with as many people as possible. But after ten years of existence, we notice a change of paradigm.

First in its content: the network is becoming collaborative. As Ezio Manzini, DESIS international coordinator, explained us, people are seeking to connect with each other to build things together. This new way of approaching the social interaction can be explained by the wish of creating something useful and meaningful for the community in order to express opinion, share information and ideas and act on the world. We are assisting to a change of culture, more sustainable, where citizens become deeper involved in their communities. This trend is confirmed with the emergence of an highly increasing number of collaborative services as car-sharing (zipcar), cook-sharing (CoLunching) or platforms (OuiShare).

This first change implies a second one regarding the nature of the relationships between people. In his talk Geert Lovink, Founder of the Institue of Network Culture, shows that the network has been used as a way of reaching as many people as possible. This has been used especially in business where people are exploiting weak links to achieve their objectives. Though research shows that we don’t go further than around 20 core friends, 180 being an average number of acquaintances. In fact, we already see the emergence of organized networks involving less people but focusing on making things happen.

Those two new ways of considering the network raise several questions. First, should we be more in a qualitative approach to our relations than a quantitative one and therefore abandoning massive connection? If we go for a qualitative approach, it begs for the question of time: where and with whom do I want to spend my empathic energy? But it is really valid to reject entirely massive connection ? This brings a second reflexion wondering, if we shouldn’t strive for a more balanced network with few strong relationships and lots of acquaintances.

Data privacy in the intention economy

Right now, the open data movement concerns mainly universal data covering fields as mobility, politics, crime, education, or science. By nature, this data should, and hopefully will in a near future, be available to anyone, but we already know issues with this kind of data. First on a purely technical level as mentioned earlier in the contextualization part. Secondly on a societal level where we are struggling with the change of policies for example.

One of the main issue of todays society is privacy, which becomes more and more important with each new technological evolution. Of late, the distribution of products like Google Glass has reawakened the debate about privacy. I feel that, this kind of personal data can still be considered as external to some extent. In the future a new kind of data will appear being far more personal: individual health data. One striking fact is that in 65 years, most of us will have their genome encoded, and it is likely that we will also have implanted sensors, as Kevin Warwick already has. Those different tools will create an almost endless stream of data about our health condition. From this observation we can first wonder about where to store this data and how to manage it? This implies a second question of the impact it will have on our healthcare systems?

Actually, there are already some businesses specialized in the management of health data. They rely on people sharing their knowledge about diseases from personal experience or from genome encoding. Examples include 23andme.com or meforyou.org. In my opinion, those initiatives encounter the following two problems. The first one is a lack of people involved to make the system really accurate. The second is the commercial use of this data which can stop people of using or participating to the service.

As an alternative, and maybe a solution, to this existing services,Ernst Hafen, CSO of the Healthbank, proposes the involvement of the individual in the management of his health data. This involvement means to educate people about how to collect data for themselves, how to understand it and with whom to share it. This would lead to an intention economy as describe by Doc Searls which would create to a whole new healthcare system using a health bank account, connected apps, health cooperative… and eventually putting the citizen at the center of the process.

Reshaping society

The last point, which summarizes the whole conference for me, is that we are facing a choice of society and culture: in what society do we want to live in the future? And it will mainly depend on how we decide to use the increasing amount of data available nowadays, and therefore how we shape the information society.

The need of transparency is key to the involvement of citizens in the political life of their community, city, region and country. This transparency will also play a crucial role in their involvement in the future services and products based on their data that will progressively appear. This involvement will trigger a stronger sense of community in a more sustainable way. This will have an impact on the economy which is already moving towards a decentralized and collaborative state. This engagement of the citizen should also be visible in the making of policies where, right now, many of the actors concerned by their changes are absent from the dialogue.

Finally, we should also observe an increasing interest in the commons and free culture by facilitating the sharing of ideas and the access to knowledge which are key components to lead to a creative and innovative society.

On September 16th to 18th, Geneva will host OKCon 2013, the biggest annual Open Knowledge Conference, bringing together representatives from a wide range of UN agencies and public administrations with technology activists, civic entrepreneurs and data-driven designers.

The line-up of speakers this year includes Ellen Miller (Sunlight Foundation), John Ellis (CERN and Kings College, London), Chris Vein (World Bank) and Victoria Stodden (Columbia University). Beside the sessions of talks and panels, the participants can attend hands-on workshops  on topics like data interoperability, open hardware, or open transportation data. We ourselves will host a workshop together with Alice Kohli, data-driven journalist from NZZ Data. The topic is how to collaboratively tell stories with data. Based on the successes and failures from our collaboration with the Swiss newspaper Neue Zürcher Zeitung, we will work with the participants on different approaches to tell compelling stories as a multi-disciplinary team. It looks like it will be a lot of fun!

If you’re interested in working with data, from which angle doesn’t really matter, I recommend you have a look at the detailed program over at http://okcon.org. We look forward to meeting you in Geneva.

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. A large scale version of the final poster can be viewed at visualizing.org.

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!

For this year’s SEE#8 Conference we headed off to Wiesbaden’s Schlachthof where the annual event would take place. The conference with its approximately 900 participants had a lineup of 8 speakers worth getting excited about.

The Speakers

The conference was opened by Prof. Dr. Wolfgang Ullrich who shared an insightful analysis of consumer behavior and media philosophy.

The second speaker up was Pablo Vio, Creative Director at Jam3, a visualization agency based in Toronto. His team is the one behind the interactive documentary Bear71 which serves as a good example of powerful visual storytelling. His talk centered around their design and development process and how building their own tools helps them to advance the creative range of their projects.

“Step out of photoshop: visualize data with Code.”- Pablo Vio

Klaus Obermaier is an Austrian choreographer with a strong interest in interactive projections and how it can be used in dance performances. It was interesting to see how simple projections can transform the overall experience and performance.

One of the topics discussing the future of consumer products was Jeroen Junte, a Dutch design critic and author. In his presentation he showed the audience how the 3D-printing wave will eventually result in a new industrial revolution. I really enjoyed the example with the Solar powered 3D-printer.

“We are looking into a bright future, so bright we need to wear shades.” – Jeroen Junte

Dries Verbruggen is a Flemisch designer and co-founder of the design studio Unfold. Like the previous speaker, his talk was about 3D printing, where he shared his vision of production on-the-go becoming accessible for everyday consumers. This vision was shown as a project called Kiosk 2.0 where a mobile 3D printing services would allow anyone to quickly produce customized items for daily use. Very interesting and provocative approach to a very fascinating topic.

“Design has to be meaningful to make it personal”- Dries Verbruggen

Creating amazing everyday experiences using digital installations is something that was strongly conveyed in Daan Roosegaard’s presentation. What was especially interesting was his way of inviting new materials and technologies when creating smart and aesthetic installations in urban areas. His way of collaborating as an open minded designer together with municipal decision makers was very inspiring and proves that with a strong vision and the necessary influence, anything seems possible.

Antony Turner is the CEO and founder of Carbon Visuals, an agency focused on visualizing carbon emissions in natural habitats. The challenge of spreading emission awareness, or what Turner calls “carbon literacy” is in many cases the lack of concrete consequences to point at when explaining the effect of carbon emissions.

An interesting collection of work were presented by Catalog Tree when describing projects they have been involved in during the last years. It was nice to hear about the variety of work they have been working on, one of them being their interactive documentary about algorithmic trading and accelerated stock markets called “Money&Speed”.

The Dinner

To extend the discussion and to reflect on the conference, the team at Interactive Things organized a dinner on Saturday at the Spital in the center of Wiesbaden. Around 50 guests, including speakers, organizers, and visualization enthusiasts joined in. Besides the great food, the tables were filled with interesting discussions that eventually continued until the late hours at Kulturpalast.

The Workshop

As the tradition goes, the SEE+ Workshop was organized the next morning in the studio of Scholz & Volkmer, where speakers and conference audience get together to discuss the topics that got stuck in our minds from the day before. As in previous years, the moderators were Moritz Stefaner, Andrew Vande Moere, and Benjamin Wiederkehr. Speakers participating this year were Antony Turner from Carbon Visuals, Nina Bender and Joris Maltha from Catalogtree, Pablo Vio from Jam 3 and Klaus Obermaier. The questions discussed centered around the intent behind the creatives’ work and the potential impact they believe to have on society. With a very informal agenda, this was a great opportunity to meet and chat with like-minded people and to learn a thing or two from the pros.

Conclusion

One of the core topics for this year was the use of tools. A lot of designers nowadays write their own software to create design solutions that go way beyond Photoshop or Illustrator. One particularly great analogy came from Dries about the Japanese sword smiths, who are required to master the skill of building the tools used for sword making first, before they actually can use them to make swords.

The selection of this years presenters yielded a very broad range of topics and felt only loosely related to information visualization. Considering that see claims to be «the conference on visualization of information», it was surprising to see how little the topic was brought up and discussed among the speakers. Don’t get us wrong, we highly enjoyed the inspirational breadth of visual work presented, just the focus felt not as strong as in previous years.

Lastly, we’d like to mention something that has been brought up before here and elsewhere, which is the lack of female speakers. We as a community need to work harder to achieve an equal balance between male and female speakers. Because, when looking at the field of practitioners, the gender proportion seem actually very well balanced.

Overall, the organizers did an excellent job of creating a space where so many professionals and starting-out practitioners have the possibility to share thoughts and get inspired from one another. The atmosphere was relaxed and friendly and the event well organized. Looking forward to what next year’s conference will offer!

This article was co-written by Martina Frantzén and Benjamin Wiederkehr.

Like many other publishers, we’ve decided to stop using and move away from FeedBurner’s services. It has been a good service so far, but the uncertainty about its future bothers us. As a result, our RSS feed will be changing and it’s a good time for you to switch, too. The new RSS feed for Datavisualization.ch is:

http://datavisualization.ch/feed/

We request you to kindly update the feed in your RSS app. To subscribe to the new feed automatically, just click here. For the people who have subscribed via email, please note that we have moved you over to our internal notification system.

If you don’t use RSS to follow new articles published here, you might want to follow us on Twitter or Facebook.

Thank you.

The Starting Point

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.

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.

0.01 mSv: X-Ray of a tooth0.055 mSv: Single flight from Europe to USA1 mSv: Annual dose limit in Switzerland1.4 mSv: Smoking one box of cigarettes without filter2.3 mSv: Working one year as a flight attendant5.5 mSv: Radiation exposure in Switzerland20 mSv: Threshold for radiation-exposed personnel100 mSv: Threshold dose4.4 mSv: Zone with 0.5 µSv/h35 mSv: Zone with 4 µSv/h140 mSv: Zone with 16 µSv/h400 mSv: Fukushima nuclear power plant on March 14th 2011 (per hour)

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.