Data Visualization - Week 2 assignment - Lubes em Foco

Programming Assignment 1: Visualize Data Using a Chart

US temperature graph

Programming Assignment 1: Visualize Data Using a Chart

1. Dataset used

I selected the US Temperatures dataset from  GISTEMP site as was proposed  in the Rubric.  url: https://data.giss.nasa.gov/gistemp/graphs_v4/

Dataset => Annual Mean Temperature Change in the United States

I developed the chart using d3.v4 and this dataset shows the US temperatures (Annual_Mean,Lowess) between 1880 and 2020.

2. Particular aspects of the chart to which I would like to bring attention

The line graph clearly shows the increase in both, Annual mean temperatures and lowest temperatures since 1920 and reaching the maximum values in 2020.

3. X and Y Axis:

The x axis represent the years of the temperature measurement and the y axis represent the temperature in Cº

4. What the data as shows

The graph shows the urgent need to reduce the carbon dioxide emissions that are producing global warming.

My d3 program

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <style> /* set the CSS */
        body {
            font: 12px Arial;
        }
        #graph{
            background-color: #eee;
            width: 960px;
            height: 500px;
        }
        .mean{
            fill: none;
            stroke: steelblue;
            stroke-width: 2px;
        }
        .lowess{
            fill: none;
            stroke: red;
            stroke-width: 2px;
        }
        .axis path,
        .axis line {
            fill: none;
            stroke: grey;
            stroke-width: 1;
            shape-rendering: crispEdges;
        }
        .eixo{
            fill: none;
            stroke: grey;
            stroke-width: 2;
            shape-rendering: crispEdges;
        }
        .grid line {
            stroke: lightgrey;
            stroke-opacity: 0.7;
            shape-rendering: crispEdges;
          }
          .grid path {
            stroke-width: 0;
          }
    </style>
    <!– Load d3.js –>
    <script src=”https://d3js.org/d3.v4.js” charset=”utf-8″></script>
    <script>
        document.addEventListener(‘DOMContentLoaded’, function(){
            // set the dimensions and margins of the graph
            var margin = {top: 30, right: 30, bottom: 50, left: 70},
                width = 960 – margin.left – margin.right,
                height = 500 – margin.top – margin.bottom;
            // set the ranges
            var x = d3.scaleLinear().range([0, width]);
            var y = d3.scaleLinear().range([height, 0]);
            // define the line
            var line1 = d3.line()
                .x(function(d) { return x(d.Year); })
                .y(function(d) { return y(d.Annual_Mean); });
            // define the line
            var line2 = d3.line()
                .x(function(d) { return x(d.Year); })
                .y(function(d) { return y(d.Lowess); });
            // gridlines in x axis function
            function make_x_gridlines() {
                return d3.axisBottom(x)
                    .ticks(5)
            }
            // gridlines in y axis function
            function make_y_gridlines() {
                return d3.axisLeft(y)
                    .ticks(5)
            }
            // append the svg object to the body of the page
            // appends a ‘group’ element to ‘svg’
            // moves the ‘group’ element to the top left margin
            var svg = d3.select(“#graph”)
                        .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 + “)”);
            // Get the data
            d3.csv(“data/graph01a.csv”, function(error, data) {
            if (error) throw error;
                // format the data
                data.forEach(function(d) {
                d.Year = d.Year;
                d.Annual_Mean = d.Annual_Mean;
                d.Lowess = +d.Lowess;
                });
                // Scale the range of the data
                x.domain([d3.min(data, function(d) { return d.Year; }), d3.max(data, function(d) { return d.Year; })])
                y.domain([-1.2, 2.0]);
                // Add the line 1 path.
                svg.append(“path”)
                    .data([data])
                    .attr(“class”, “mean”)
                    .attr(“d”, line1);
                // Add the line 2 path.
                svg.append(“path”)
                    .data([data])
                    .attr(“class”, “lowess”)
                    .attr(“d”, line2);
                // Add the X Axis
                svg.append(“g”)
                    .attr(“transform”, “translate(0,” + height + “)”)
                    .call(d3.axisBottom(x))
                    .selectAll(“text”)
                    .attr(“transform”, “translate(15,0)”)
                    .style(“text-anchor”, “end”)
                    .style(“font-size”, 12)
                    .style(“fill”, “#493372”);
                // Add the Y Axis
                svg.append(“g”)
                    .call(d3.axisLeft(y))
                    .selectAll(“text”)
                    .attr(“transform”, “translate(-10,0)”)
                    .style(“text-anchor”, “end”)
                    .style(“font-size”, 12)
                    .style(“fill”, “#493372”);
                // Add Y axis label:
                svg.append(“text”)
                    .attr(“text-anchor”, “end”)
                    .attr(“transform”, “rotate(-90)”)
                    .attr(“y”, -margin.left+20)
                    .attr(“x”, -margin.top)
                    .text(“Temperature (Cº)”);
                // Add X axis label:
                svg.append(“text”)
                    .attr(“text-anchor”, “end”)
                    .attr(“x”, width)
                    .attr(“y”, height + margin.top + 5)
                    .text(“Year”);
                // Add Title
                svg.append(“text”)
                    .attr(“text-anchor”, “end”)
                    .attr(“x”, width* 0.6)
                    .attr(“y”, -5)
                    .text(“U.S. Temperature”)
                    .style(“font-size”, “24”);
                // Add label line 1 – Mean:
                svg.append(“text”)
                    .attr(“text-anchor”, “end”)
                    .attr(“x”, width – 40)
                    .attr(“y”, height -50)
                    .text(“Annual Mean”)
                    .style(“font-size”, 16)
                    .style(“fill”, “#493372”);
                // Add label line 2 – Lowess:
                svg.append(“text”)
                    .attr(“text-anchor”, “end”)
                    .attr(“x”, width – 85)
                    .attr(“y”, height – 30)
                    .text(“Lowess”)
                    .style(“font-size”, 16)
                    .style(“fill”, “#493372”);
                // Data source text:
                svg.append(“text”)
                    .attr(“text-anchor”, “end”)
                    .attr(“x”, 420)
                    .attr(“y”, height + 35)
                    .text(“Source: National Aeronautics and Space Administration – Goddard Institute for Space Studies”)
                    .style(“font-size”, 10)
                    .style(“fill”, “#000”);
                // Add circle line 1 – Mean:
                svg.append(“circle”)
                    .attr(“cx”, width – 150)
                    .attr(“cy”, height -55)
                    .attr(“r”, 5)
                    .attr(“fill”, “steelblue”)
                // Add circle line 2 – Lowess:
                svg.append(“circle”)
                .attr(“cx”, width – 150)
                .attr(“cy”, height -35)
                .attr(“r”, 5)
                .attr(“fill”, “red”)
                // add the X gridlines
                svg.append(“g”)
                    .attr(“class”, “grid”)
                    .attr(“transform”, “translate(0,” + height + “)”)
                    .call(make_x_gridlines()
                        .tickSize(-height)
                        .tickFormat(“”)
                    )
                // add the Y gridlines
                svg.append(“g”)
                .attr(“class”, “grid”)
                .call(make_y_gridlines()
                    .tickSize(-width)
                    .tickFormat(“”)
                )
            });    // end get data
        });  // end DOMContentLoaded
</script>
</head>
<body>
    <div id=”graph”></div>
</body>

Data obtained from:

GISTEMP site

National Aeronautics and Space Administration – Goddard Institute for Space Studies

File: data/graph01a.csv

U.S. Temperature
Year,Annual_Mean,Lowess(5)
1880,-0.44,-0.19
1881,0.20,-0.24
1882,-0.00,-0.27
1883,-0.64,-0.29
1884,-0.66,-0.32
1885,-0.38,-0.32
1886,-0.20,-0.27
1887,-0.07,-0.16
1888,-0.26,-0.09
1889,0.29,-0.09
1890,0.20,-0.13
1891,-0.21,-0.18
1892,-0.48,-0.24
1893,-0.69,-0.30
1894,0.05,-0.32
1895,-0.76,-0.31
1896,0.07,-0.28
1897,-0.22,-0.24
1898,-0.29,-0.19
1899,-0.50,-0.17
1900,0.44,-0.20
1901,-0.06,-0.23
1902,-0.16,-0.26
1903,-0.68,-0.30
1904,-0.47,-0.33
1905,-0.51,-0.33
1906,-0.09,-0.28
1907,-0.29,-0.20
1908,0.07,-0.12
1909,-0.29,-0.09
1910,0.26,-0.11
1911,0.07,-0.11
1912,-0.90,-0.13
1913,-0.16,-0.20
1914,-0.02,-0.29
1915,-0.23,-0.33
1916,-0.60,-0.33
1917,-1.05,-0.35
1918,-0.04,-0.35
1919,-0.19,-0.29
1920,-0.49,-0.22
1921,1.02,-0.18
1922,0.08,-0.16
1923,-0.14,-0.11
1924,-0.72,-0.05
1925,0.32,-0.04
1926,-0.01,-0.04
1927,0.11,-0.02
1928,-0.01,0.02
1929,-0.58,0.06
1930,0.05,0.12
1931,0.93,0.21
1932,-0.06,0.28
1933,0.59,0.30
1934,1.15,0.28
1935,-0.02,0.27
1936,0.11,0.29
1937,-0.18,0.27
1938,0.71,0.27
1939,0.75,0.28
1940,-0.02,0.29
1941,0.46,0.24
1942,0.00,0.16
1943,0.08,0.12
1944,0.00,0.10
1945,-0.09,0.08
1946,0.57,0.07
1947,0.03,0.04
1948,-0.12,0.01
1949,0.15,-0.01
1950,-0.27,0.03
1951,-0.39,0.12
1952,0.25,0.18
1953,0.84,0.23
1954,0.78,0.28
1955,-0.08,0.29
1956,0.24,0.24
1957,0.12,0.14
1958,0.06,0.07
1959,0.16,0.05
1960,-0.22,0.03
1961,0.02,0.01
1962,-0.00,-0.01
1963,0.19,-0.03
1964,-0.10,-0.05
1965,-0.11,-0.08
1966,-0.20,-0.13
1967,-0.08,-0.16
1968,-0.29,-0.18
1969,-0.21,-0.18
1970,-0.15,-0.15
1971,-0.12,-0.11
1972,-0.30,-0.07
1973,0.25,-0.05
1974,0.19,-0.04
1975,-0.19,-0.04
1976,-0.24,-0.09
1977,0.35,-0.12
1978,-0.46,-0.09
1979,-0.54,-0.06
1980,0.25,-0.06
1981,0.66,-0.04
1982,-0.31,0.00
1983,0.01,0.06
1984,0.05,0.13
1985,-0.33,0.20
1986,0.74,0.28
1987,0.78,0.37
1988,0.36,0.46
1989,-0.08,0.49
1990,0.86,0.44
1991,0.67,0.40
1992,0.34,0.39
1993,-0.36,0.34
1994,0.48,0.28
1995,0.37,0.29
1996,-0.07,0.40
1997,0.14,0.52
1998,1.27,0.61
1999,1.04,0.70
2000,0.69,0.79
2001,0.94,0.81
2002,0.69,0.78
2003,0.68,0.79
2004,0.62,0.81
2005,0.91,0.79
2006,1.25,0.73
2007,0.92,0.69
2008,0.18,0.64
2009,0.23,0.57
2010,0.58,0.51
2011,0.68,0.50
2012,1.82,0.60
2013,0.27,0.76
2014,0.30,0.88
2015,1.35,0.96
2016,1.65,1.05
2017,1.43,1.09
2018,0.89,1.12
2019,0.44,1.13
2020,1.34,1.12