The Planeteers: Water Visualization

A web-based story-telling style of information visualization about water data

Category: #User Interface Design & Evaluation, #User Research, #Information Visualization and Data Analysis, #Web Development, Interactive System

Check out the interactive interface here and explore all functionalities developed in this story-telling format information visualization

Adviser: Dr. John Stasko

Fall 2016

Problem Description

The purpose of this visualization is to: 

A) make users aware of the current availability and use of water resources available to the world

B) make users aware of the distribution of these resources/use across the globe

C) show users ways they can decrease their usage through food choices.


The hope is that users interacting with the visualization and seeing this information will understand the shortage of water available to humans as well as the distribution of this resource and to gain some understanding of how their food choices can help to decrease their water usage if they choose to do so.

Who the Users Will be 

The users of this system may be individuals who are interested in simply learning about water resources in the world and are probably people who are in the US or elsewhere in North America or Europe. The aim for this visualization is to be something that goes out to a broad audience and tells a story that gets people interested in water availability and use and either gives them the knowledge needed to try and make changes to their lives to try and improve the future of water availability or points them to places where they become further educated on the topic.  

Purpose of the Visualization System

The visualization we are aiming to create for this will be storytelling based, due to the lack of consistent data across all countries of interest, in particular those that have less water available, which would mean that a fully exploratory visualization may not inform the users of the problems we are trying to convey The hope of users interacting with the visualization and seeing this information is for users to understand the shortage of water available to humans now and in the future and to understand some of the different ways that they can decrease their water usage if they choose to do so.


Description of Interface/Visualization Aspects

Our visualization is a storytelling vis that takes on the style of the martini glass structure. After a few slides regarding basic numbers about access to safe drinking water across the globe we begin with a pixel plot to show the amount of water and land on the earth with every 6 pixels being equal to 1% of the mass on earth. As users scroll down the page this transitions into the amount of water that is accessible to humans, changing units along with way. Throughout this portion users can hover over the pixels for more details.

Next, users see two visualizations that show the ideal and then the actual distribution of water per capita for both continents and income groups for either availability or withdraw. Users can interact with the buttons to switch between data of income or withdraw and group by income or continent. Again hover reveals tooltips. Remember that these values are per liters per capita per day for each group being shown.

The next vis is a simple quick comparison of how many people in different countries in the world use the same amount of water per day. This vis is there to help people to better understand some of the inequality of water use.

The next step takes users to a bit more of an exploratory vis regarding the amount of water used to produce different types of food. This was done as about 92% of the water we use in the US is through the food we grow and eat. The visualization is interacted with via the sliders seen next to the food names, and again via the hover for details. This shows users how much water is used in getting the amount of food selected to their plate and visualizes that with a grouped pixel chart. Note that the coloring is coded in multiple ways, the order of pixels and sliders, the sliders themselves, as well as the legend, which is closer to the data to ensure users know exactly what the pixels represent with such a high number of values being represented.

The final visualization is the main exploratory vis. This portion of the visualization aims to allow users to really explore the data set in full and find their own insights and new questions. Users can modify if the data being shown is usage or availability through the dop down “Display” menu. Users can then filter the data by grouping or coloring the countries pixel chats by continent, average country income, water stress level (0 being no stress, 5 being high stress), or access to safe water (25 being 25% or less, 100 being 100% - 76%, and so on). Users can filter these variables as they please to gain new insights about the data. Users can also dynamically query the data using the 2 dual sided sliding bars for high and low values to display for usage/withdraw and availability. As with the other visualization’s users can hover the pixel bars for details on demand but they can also hover over the legend labels to view only the countries in that group. This allows for easier filtering and additional insights. In this vis the x axis changes dynamically based on the data being pulled and the filtering being used as does the shape of the legend as the bars become bigger or smaller. Note that the units also change depending on the data being displayed (either availability or usage). This was done as without changing the units being shown the smaller values in usage would have not been viewable to users.



What data has driven this visualization

The major datasets that will drive our  visualizations will come from the following sources:

  • Aquastat : AQUASTAT is Food and Agriculture Organization of United Nations’ (FAO) global water information system, developed by the Land and Water Division. It is the most quoted source on global water statistics

  • Aqueduct : The World Resources Institute built Aqueduct to help companies, investors, governments, and communities better understand where and how water risks are emerging around the world. Aqueduct provides global maps of water risks.

  • WHO-UNICEF Joint Monitoring Program (JMP): JMP provides a dataset of water supply and access to improved water for all countries in the world.

  • United Nations Populations Division : The Population Division of the Department of Economic and Social Affairs of the United Nations issues population estimates and projections of all countries around the world every two yearsBesides, we also plan to utilize smaller datasources that help us in building our story. These include

  • Nestle - Waters : Provides information about water content in different organs of our body

  • United States Environment Protection Agency (EPA) : WaterSense, a partnership program by the EPA, seeks to educate the people of USA by bringing out domestic water usage patterns and providing alternatives.

  • : Provides information about individual water consumption needs based on environmental temperature, age, sex, and activity.

  • Provides information about water footprint of different nations. The water footprint of a nation is defined as “the total amount of water that is used to produce the goods and services consumed by the inhabitants of the nation. The total water footprint of a country includes two components: the part of the footprint that falls inside the country (internal water footprint) and the part of the footprint that presses on other countries in the world (external water footprint).”

Data attribute Description in Detail 



Mindmap of Big Datasets with details on attributes and minor comments
















































Mindmap of Datasets and links that are potentially useful in answering our Story Questions

















































Analytic questions and queries to be supported


A) How much freshwater is available to humans on the globe?

B) How much water does this mean each person in the world can use?

C) How is the water in the world distributed across the globe?

D) How much water do people actually use in different areas of the world?

E) What does this water availability and usage look like 10 years in the future?

F) How can people decrease their usage of water?

G) What sort of impact will certain changes in people’s daily lives on their usage of water (i.e. decreasing shower time by 2 minutes, eating 1 less meal with meat in it per week, etc.)?

Design Ideas

Pixels and Precipitation View

The visualization displays a single country’s water resources (top half of the visualization) over a period of time and what format the water resources were available to the population of that country at that time (bottom half of the visualization).

The aim was for the design to feel like a waterfall with each line being shown on the top half representing a certain amount of water being from the three potential sources for the viewed country. The values for which the data mapped to could aldo be modified or chosen from a list of potential variables. This visualization was all about being able to look in detail at a specific country’s water resources over time.



People seemed to like the overall idea of the visualization but were a bit confused by the meaning of the curves in the top of the cart (which were done to make it look more like the flow of water) and expected it to be coded to some other variable. This is something we could consider going forward if we kept the design. In addition the color on the bottom of the visualization was a bit confusing for some people but this would be more clear when data was more variable than the data seen here. Overall this was one of the two favorites of those that visited our poster.

The Bar-Burst view

This design was inspired by the baseball visualization that uses radial charts to display data regarding worth of different baseball teams. We decided that such a chart could be a good way to visualize differences between continents and countries a few variables at a time. The idea was that each of these variables could also be filtered as the user desired. For example, right now the variables in the vis on the left above is colored by continent and the size of the continents is controlled by landmass each has but could be filtered by population or other factors. Then each bar represents a country in that continent and the height of the bar represents the amount of water available. In addition it was designed so users could click on one of the continents or even a country to zoom into a different view such as that on the right. This one shows all of the countries in Africa and is actually comparing water availability and GDP (outer circle). These could also be filtered by the user to tell different stories as users desired.



The feedback for this vis was mostly positive. People had a bit of a hard time understanding the double radial charts as seen on the right but once explained they could gather useful information. The main concern with this vis seemed to be if it was actually going to be able to give users new insights and not things that were obvious to users. This was taken to heart by the team and we shifted away from more obvious relationships in the following stages.

The Multi-faceted Country-statistics view

This design and the other multi coordinated view were both fairly similar from the basic idea of having a world map to show variables and then giving more detail in boxes around the map. This view however was all about looking at how a single country compared to the rest of the world, not necessarily being ideal for looking at two countries and comparing them across different variables such as the next design. The charts on the bottom were both able to be changed based on the factors someone would want to look at through filtering the fields to be displayed and hovering over a line on either or over a country made the information on the right show up for that specific country. This was good for understanding information about a single country and comparing it to all other countries.



While people thought it might be interesting to see some of this information they thought that the actual knowledge gained when walking away from this visualization might be minimal. It seemed that many of the relationships were fairly expected and we felt the story we wanted to tell was not necessarily being conveyed in full to the users.

The Multi-faceted Comparison View

This multi coordinated view was similar to the other map-based view but instead of looking at trends (which were somewhat expected by viewers) this was all about comparing a number of countries water availability at once. The ability to choose a number of different countries at a time and compare them using the radial chart and the line charts was the aim of this vis. Through looking at these relationships we hoped that users would gain insights into the differences in the use and availability of water.



Similarly to the other multi coordinated view this vis was not as preferred by viewers. It seemed to them that they were seeing obvious relationships and it might not actually tell that interesting of a story. We thought that some of the information might be different if users were to change some of the variables being displayed but overall agreed that most of the insights were going to be fairly obvious from this vis.



The storytelling visualization concludes by emboldening users to take action in preserving water in their own lives. We hope people will be encouraged after interacting with and exploring this vis to investigate the disparity of water even more and potentially take action to decrease their water footprint. We finish by pointing users to other resources where they can find more information.