Data Visualization & Dashboard Design: A Tale of Two Greenlands

Team Size: 3 People
Role: Dashboard Designer, Data Visualizer, Front End Developer
Skills/Tools: D3.js
Summary: We designed a dashboard that, through visualizations of data, highlight not only the negative but also the positive effects of global warming on Greenland. This dashboard was intended to be used by Greenland policy makers as firepower when rationalizing the policies that they will be making.

Problem Space

Deriving information trough an analysis of data can require a high level of cognitive load if it is not presented in a format that is easy to digest. Data visualizations are made exactly for this purpose, and when aggregated into a dashboard, provides easy access to a centralized source of easily accessible information. For this project, a team of scientists gave us access to a pool of climate and biodiversity data from which we filtered, created visualizations and laid out in a way that would help make a strong case for their decisions.

Solution

A Tale of Two Greenlands

The dashboard we designed centers around temperature and global warming, arguably the hottest topics of discussion when it comes to Greenland and its ice sheets.

To view the dashboard in its website form, click here

In Greenland, global warming has created new opportunities and challenges. The aim of our dashboard is to inform policymakers on how to react to these changes; taking advantage of the opportunities and mitigating the challenges.

Rising temperatures have led to the melting of ice, which has exposed more land suitable for farming. Additionally, new rivers have formed which could provide renewable energy if policymakers were to advocate for the creation of hydroelectric plans.

The melting ice has also disrupted the habitat of Greenland’s polar bear population, driving them towards human-populated areas. Increased sightings of polar bears has also yielded increased deaths due to human causes. Again, policymakers can take action in mitigating the situation.


Design Challenge 1: Choosing the Right Metrics

Before we can make a dashboard that displays information, we first need to figure out what specific pieces of information to display. Imagine seeing an indicator on your car dashboard that tells you how many people are currently seated in your two seat sports car. I’d imagine that that’s not very useful.

For our domain we chose metrics that make sense for Greenland:

Salmon Population

Salmon naturally migrates to Greenland and can be easily affected by human activity.

Firn saturation

The amount of melted ice captured in the firn is a good thing to monitor because if it reaches a certain threshold that means that melted ice will start escaping to the ocean, possibly increasing sea water levels.

Ice Sheet Size

A good indicator of how much ice has melted over time is how the shore line of the ice sheet has changed through the years.

GDP vs Arable Land

When ice melts, more land gets exposed. This land can be ripe for agriculture which lends to an expansion of a market that might increse the GDP of the country.

Temperature

Almost anything from salmon to ice melting to human activity can be affected by temperature, so it’s pretty important to have this on the dashboard.

Bear Encounters and Killings

Changes in its natural habitat can drive bears closer to cities which might result in them getting shot.

Challenge 2: How do we visualize?

Highlight: I did some initial sketches on paper for an idea of how we wanted our dashboard to look like. When we struggled a bit with how we would take the feedback we got to get to a direction we wanted to take, I created a mindmap of our best idea so far to get us all on the same page.
“It’s hard to take seriously because it looks childish” -Feedback we got when we presented our initial design

Our first attempt at a “visualization of data” was quite literal. We took the data about salmon and made bar graphs out of fish icons, each black fish representing an arbitrary unit of salmon and the red fish representing a threshold.

While cute, the feedback that we got from it was that it was hard to take seriously because it looked childish. It would look good for a science exhibit but not as a dashboard meant to be used by policy makers.

So if we want to be taken more seriously we needed to look more scientific.

Iteration 2: Good Old Bar Graphs and Maps

To gain more credibility, we went to the whiteboard and thought of more conventional visualizations of our data for a more scientific approach

So we toned down on our icons and went a little more scientific by using traditional bar graphs and maps. We did a couple of iterative sketches on paper and had people take a look at it to see if they are getting what the graph is trying to portray. And sure enough, traditional graphs were both easy to interpret and more professional looking.

Iterations on our GDP-to-arable land graph highlighting the positive effects of increased land mass

Challenge 3: Is our narrative powerful?

This Greenland dashboard was meant to dictate the creation of policies that will affect not only Greenland but also other countries as well. While saturation and salmon population were interesting metrics to track, we felt that their connection to the narrative as a whole was weak. We felt that we had good visualizations, but we needed to present a stronger narrative. We needed to drive a better story.

Iteration 3: Tale of Two Greenlands

Highlight When deciding what our narrative would be, there was a point where we were throwing out ideas but weren’t actually committing to any of them. It was then that I decided to create a mind map of everyone’s input so that we can have an artifact to look at and modify. This would eventually shape our final narrative.
Our new narrative

When you think about Greenland, it’s inevitable that you talk about temperature and global warming. While thinking about what story our dashboard can be telling, we played with this idea looking at global warming from two perspectives — that while people tend to focus on the negative aspects of global warming, with the renewable energy and increased GDP from arable land, Greenland itself is actually gaining a few good things out of it. The positive side of global warming. Hence, the Tale of Two Greelands.

Laying out what our idea would look like on a dashboard

The idea was simple. We had temperature as our main metric. Since it directly affects all of the other metrics, we wanted to put it in front and center. Next we put all of the positive effects of temperature on one side and the negative on the other.


Implementation

Highlight I flexed my web development skills by creating a website with javascript driven animations instead of a video to showcase what our dashboard would look like.

When it came to actually creating the dashboard, we were required to show some animations, something that would make Adobe fans think of After Effects immediately. But we were doing this project during a time when I was learning data visualization and the corresponding javascript library, d3.js.

Since we were doing data visualization for this project I figured I could do this project in D3 as well to get more familiar with the library — effectively hitting two birds with one stone.

Sketch can luckily export SVG files, so my non-developer teammates could create static graphs using it

Of course since not all of my teammates are learning d3, we decided to utilize sketch as well so that they can work on creating the static graphs. And since sketch can export to SVG, and d3 is a library built around creating and manipulating SVG, it was perfect.

Implementation Highlight 1: Temperature Graph

Spiralling Global Temperatures by Ed Hawkins

If we wanted to tell people that global warming is a thing, a line graph of average temperature change during the past 12 months showing a slight dip during the summer months that then stabilizes back to a baseline isn’t really that convincing. What we would want to show instead is how that baseline has been shifting higher and higher through the years. So we searched for existing visualizations and found this particular one by Ed Hawkins.

Our version of the temperature graph

Pulling from multiple examples online, I was able to recreate a similar looking graph in d3 but modified to accommodate a few project requirements we had to incorporate into our dashboard:

Showing Real-time Data

For demo purposes we changed the time scale so that one second represents a day.

Crossing a Threshold

For our case we set 1.0 degrees as our threshold and blinked the background red whenever the graph crossed that threshold.

Implementation Highlight 2: Ice Sheet

Our initial visualization for the ice sheet involved showing the ice sheet shrink over time in comparison to Greenland as a whole. We chose this visualization at first because we wanted to put Greenland in the center of the dashboard.

The javascript-animated ice sheet illustration

But since we shifted to temperature as our main metric, we chose to crop the ice sheet off and show just a small part of Greenland. It actually kinda worked out well because the shrinking of the ice sheet’s shore line looks a lot more dramatic when zooming in to a particular part of Greenland.

Using Sketch to edit the individual vertices of the Greenland SVG

Animating the ice sheet wasn’t that difficult, really. It just involved getting an SVG of greenland, editing the vertices to make it look like the ice sheet has moved, exporting the resulting shape into an svg, and parsing the d attribute from the svg and feeding that into d3 to animate.


And that’s it. If you haven’t already, click here to visit the website form of the dashboard.

Show your support

Clapping shows how much you appreciated Neil Bantoc’s story.