Programming Assignment 1: Visualize Data Using a Chart

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>

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 –>

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>

</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

Lubes em Foco

Programming Assignment 1: Visualize Data Using a Chart