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.
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.
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.
This project was realized by Interactive Things. As the publisher of Datavisualization.ch we regularly give you insights into the development processes of our own work.