How We Visualized Life After Fukushima

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.

2_workstation_at_NZZ_1 2_workstation_at_NZZ_2 2_workstation_at_NZZ_3

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.

3_process_image_1 3_process_image_2 3_process_image_3

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_Roentgenaufnahme_eines_Zahns0.01 mSv: X-Ray of a tooth1_Einfacher_Flug_Europa_USA0.055 mSv: Single flight from Europe to USA2_Jahresdosisgrenzwert_Schweiz1 mSv: Annual dose limit in Switzerland3_1_Schachtel_Zigaretten_ohne_Filter_rauchen1.4 mSv: Smoking one box of cigarettes without filter4_1_Jahr_als_Flugbegleiter_arbeiten2.3 mSv: Working one year as a flight attendant5_Strahlenbelastung_in_der_Schweiz5.5 mSv: Radiation exposure in Switzerland6_Grenzwert_fuer_strahlen_exponiertes_Personal20 mSv: Threshold for radiation-exposed personnel7_Schwellendosis100 mSv: Threshold dose9_Zone_mit_0.5_uSv-h4.4 mSv: Zone with 0.5 µSv/h10_Zone_mit_2_uSv-h35 mSv: Zone with 4 µSv/h11_Zone_mit_8_uSv-h140 mSv: Zone with 16 µSv/h12_AKW_Fukushima_im_14_Maerz_2011400 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.

7_radiation_map_1 7_radiation_map_2 7_radiation_map_3 7_radiation_map_4 7_radiation_map_5 7_radiation_map_6 7_radiation_map_7 7_radiation_map_8

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.

8_desktop_browser_1 8_desktop_browser_2 8_desktop_browser_3 8_desktop_browser_5 8_desktop_browser_6.19_ipad_and_iphone_1

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 and let us know your thoughts.

How We Visualized Life After Fukushima This project was realized by Interactive Things. As the publisher of we regularly give you insights into the development processes of our own work.

Wanna have your work featured here?
Submit a link!

Share this article

Subscribe for more

Give Feedback

  • Guest

    It’s awesome to see the design process and decisions laid out here, especially as an aspiring graphic designer myself. Good stuff, and a really pleasing end result.

  • Jan Baykara

    It’s awesome to see the design process and decisions laid out here, especially as an aspiring graphic designer myself. Good stuff, and a really pleasing end result.

    • Interactive Things

      Thanks for this, Jan. We’re glad that you get something out of it.

  • Pingback: Five Links: Graphic Visualization | HR Examiner()

  • Pingback: Données fleuries, une veille hebdomadaire de datajournalisme()

  • Pingback: Données fleuries #8 | Data Bloom()

  • Pingback: Visualizing Fukushima()

  • Pingback: Visualising Fukushima by Interactive Things()

  • Pingback: Datenjournalismus im März 2013 | Datenjournalist()

  • Ben Irvine

    It all looks very pretty. But your radiation dosage visualisation lacks context. There is a better one here:

    Another context that is missing from this story are the casualties at Fukushima ‘disaster’:

    Japan Tohoku tsunami and earthquake death toll: 15,883
    Fukushima Daiichi accident death toll: 2
    Fukushima accident death toll due to radiation: 0
    Injuries due to radiation: ‘2 workers taken to hospital with radiation burns’
    Long term radiation effects (WHO findings): ‘Predicted future cancer deaths due to accumulated radiation exposures in the population living near Fukushima are predicted to be extremely low to none’


    I think this a great example of the sensational and biased use of stories and data to back up the view that Nuclear power is ‘evil’. Your story also largely overlooks human tragedy caused by the tsunami and earthquake.

    • Interactive Things

      Thanks for your comment and suggestions, Ben. We would be interested to hear what exactly you mean by «more context» to the radiation dosage. Where does this visualization fall short?

      In the text, the portrayed people share their experiences with the tsunami and the earthquake beside the current problematic situation with the radiation caused by the nuclear power plant.

  • Luis Frederico

    It’s awesome that you share your visualization design process. You got a very nice result. I did not verify the data to make any comments at this moment on accuracy or bias about nuclear power. But you guys definitely open the debate and that’s a good thing.

  • Bill Noran

    It’s awesome to see the design process and decisions laid out here,
    especially as an aspiring graphic designer myself. Good stuff, and a
    really pleasing end result. Please do

    check it out my website for better preferences.

  • Data recovery Utrecht

    Bottom line: we are getting a lot of radiation, but there’s not that much I can do about that..?

  • Pingback: Le storie fuori dai libri | Il blog del mestiere di scrivere()