2222.jpg

Data Vizualization

Data-informed Design: A waiting room toy

Advisor : Umi Syam

 

Data visualizations can show the story behind data sets — and pull readers' attention to what really matters — by combining images and text. These visualizations are usually represented through charts and graphs and almost always on 2-dimensional surfaces meant to be viewed on screens. Through this project, I am exploring how climate data can be represented through 3-dimensional tangible objects in order to make data more accessible and easily readable by all ages.

The internet and computers have made data astronomically easier to gather, process, analyze, and manipulate, leading to expanded data visualization capabilities. By making data visually appealing and interactive, it can help people to pay attention to the story you’re trying to tell.

A key approach for examining climate change as it continues to impact our present and future is to use complex computer models of the climate system that include atmosphere, ocean, sea ice, and land components. The raw climate change data available on NOAA and NASA websites come in form of number tables. This data is hard to analyze and decode if you are not a data analyst.

Data: 

symbol,date,value
GT,1880,-0.12
GT,1890,-0.33
GT,1900,-0.07
GT,1910,-0.38
GT,1920,-0.21
GT,1930,-0.10
GT,1940,0.09
GT,1950,-0.16
GT,1960,0.02
GT,1970,0.04
GT,1980,0.26
GT,1990,0.43
GT,2000,0.43
GT,2010,0.70
GT,2016,0.93
SL,1880,-181
SL,1890,-154
SL,1900,-127
SL,1910,-125
SL,1920,-108
SL,1930,-111
SL,1940,-86
SL,1950,-68
SL,1960,-47
SL,1970,-37
SL,1980,-13
SL,1990,-4
SL,2000,20.3
SL,2009,68.3
CO,1880,290.8
CO,1890,294
CO,1900,295
CO,1910,300
CO,1920,303
CO,1930,307
CO,1940,311
CO,1950,312
CO,1960,317
CO,1970,325
CO,1980,338
CO,1990,354.29
CO,2000,369
CO,2010,391

This project explores objects and technology as subjects instead of considering them solely as tools and aims to create an interaction between natural systems (climate and weather) and technological systems (data sets and visualizations).

Open data can help communities react to global warming and make better decisions. We need to improve the free flow of climate change data so we can start to get a handle on protecting people and property from the coming impacts of a changing climate. With that intention in mind, I acquired raw data sets from NASA and NOAA for sea level rise, change in CO2 levels, and rise in average global temperatures. I cleaned up the raw data to be easily input into my code that is open source on my website. I then generated graphs.

Rise in Global Temperatures

Rise in Global Temperatures

Sea Level Rise

Sea Level Rise

Change in CO2

Change in CO2

The biggest challenge was how to represent these graphs with a 3-dimensional object. I wanted to show the scale and severity of these issues as clearly as possible. If you’re using data to communicate your story, whatever it may be, presenting it in a simple, memorable, digestible format is the best way to get your message across.

I decided to focus on school-aged children as my user group. If children are able to learn about climate change from a young age they may act more responsibly towards their environments. I started prototyping toys that would communicate this data.

Using objects to represent data takes visualizations to another level — it is much more compelling than simply showing a graph on a piece of paper or screen. As my final prototype for the class, I created an interactive 3-dimensional waiting room toy for children that represented key climate data from 1880 to 2010.

CODE

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body { font: 12px Arial;}

path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

</style>
<body>

<script src="https://d3js.org/d3.v4.min.js"></script>

<script>

var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

var parseDate = d3.timeParse("%Y");

var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var valueline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });

var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

d3.csv("combineddataALL.csv", function(error, data) {
    console.log(data);
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.value = +d.value;
    });

    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain(d3.extent(data, function(d) { return d.value; }));

    // Nest the entries by symbol
    var dataNest = d3.nest()
        .key(function(d) {return d.symbol;})
        .entries(data);

    var color = d3.scaleOrdinal(d3.schemeCategory10);

    dataNest.forEach(function(d) {

        svg.append("path")
            .attr("class", "line")
            .style("stroke", function() { // Add the colours dynamically
                return d.color = color(d.key); })
            .attr("d", valueline(d.values));

    });

    svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    svg.append("g")
      .attr("class", "axis")
      .call(d3.axisLeft(y));

});

</script>
</body>