Skip to content

Instantly share code, notes, and snippets.

@pamtobey

pamtobey/TempAnomolies.csv

Last active August 29, 2015 14:19
Show Gist options
  • Save pamtobey/4e7c0fef7cc940376c74 to your computer and use it in GitHub Desktop.
Save pamtobey/4e7c0fef7cc940376c74 to your computer and use it in GitHub Desktop.
Download ZIP
Exercise 4: Temp difference from long-term average
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Temperature Anomalies</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
rect:hover {
fill: gray;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
</style>
</head>
<body>
<h1>Temperature ups and downs</h1>
<p>The difference in each year's average temperature from the long-term average (1880 to 2014), in degrees Celsius.</p>
<p>Source: <a href="http://www.ncdc.noaa.gov/monitoring-references/faq/anomalies.php">NOAA National Climatic Data Center.</a></p>
<script type="text/javascript">
var w = 700;
var h = 1800;
var padding = [ 20, 10, 30, 120 ]; //Top, right, bottom, left
var widthScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("TempAnomolies.csv", function(data)
{
data.sort(function(a, b) {
return d3.ascending(a.Year, b.Year);
});
widthScale.domain([ -0.4, d3.max(data, function(d) {
return +d.ValueLandOcean;
}) ]);
console.log("domain:", widthScale.domain())
heightScale.domain(data.map(function(d) { return d.Year; } ));
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", function(d) {
var x = padding[3];
var value = +d.ValueLandOcean
if(d.ValueLandOcean > 0) {
x += widthScale(0)
}else {
x += widthScale(value)
}
return x;
})
.attr("y", function(d) {
return heightScale(d.Year);
})
.attr("width", function(d) {
if(d.ValueLandOcean >= 0) {
return widthScale(d.ValueLandOcean) - widthScale(0)
}else {
return widthScale(0) - widthScale(d.ValueLandOcean);
}
})
.attr("height", heightScale.rangeBand())
.attr("fill", "darkkhaki")
.append("title")
.text(function(d) {
return d.Year + "'s temperature difference from long-term average is " + d.ValueLandOcean;
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
svg.append("line")
.attr({
x1: padding[3] + widthScale(0),
x2: padding[3] + widthScale(0),
y1: 0,
y2: h,
stroke: "#000"
})
});
</script>
</body>
</html>
Raw
TempAnomolies.csv
Year ValueLandOcean ValueLand ValueOcean MeanLandOcean MeanLand MeanOcean
1914 -0.19 -0.08 -0.23 13.9 8.5 16.1
1915 -0.11 -0.07 -0.13 13.9 8.5 16.1
1916 -0.31 -0.37 -0.28 13.9 8.5 16.1
1917 -0.34 -0.52 -0.27 13.9 8.5 16.1
1918 -0.24 -0.36 -0.18 13.9 8.5 16.1
1919 -0.26 -0.32 -0.23 13.9 8.5 16.1
1920 -0.24 -0.3 -0.22 13.9 8.5 16.1
1921 -0.17 -0.06 -0.21 13.9 8.5 16.1
1922 -0.26 -0.24 -0.27 13.9 8.5 16.1
1923 -0.24 -0.21 -0.25 13.9 8.5 16.1
1924 -0.23 -0.26 -0.22 13.9 8.5 16.1
1925 -0.16 -0.11 -0.18 13.9 8.5 16.1
1926 -0.07 -0.01 -0.09 13.9 8.5 16.1
1927 -0.13 -0.16 -0.12 13.9 8.5 16.1
1928 -0.13 -0.1 -0.15 13.9 8.5 16.1
1929 -0.25 -0.41 -0.19 13.9 8.5 16.1
1930 -0.06 -0.08 -0.06 13.9 8.5 16.1
1931 -0.04 -0.03 -0.04 13.9 8.5 16.1
1932 -0.06 0 -0.09 13.9 8.5 16.1
1933 -0.2 -0.33 -0.15 13.9 8.5 16.1
1934 -0.06 -0.03 -0.07 13.9 8.5 16.1
1935 -0.09 -0.13 -0.07 13.9 8.5 16.1
1936 -0.06 -0.11 -0.04 13.9 8.5 16.1
1937 0.05 -0.01 0.08 13.9 8.5 16.1
1938 0.08 0.2 0.03 13.9 8.5 16.1
1939 0.07 0.12 0.04 13.9 8.5 16.1
1940 0.11 0.06 0.13 13.9 8.5 16.1
1941 0.16 0.11 0.19 13.9 8.5 16.1
1942 0.12 0.07 0.14 13.9 8.5 16.1
1943 0.11 0.09 0.13 13.9 8.5 16.1
1944 0.22 0.21 0.23 13.9 8.5 16.1
1945 0.09 -0.08 0.19 13.9 8.5 16.1
1946 -0.04 -0.01 -0.05 13.9 8.5 16.1
1947 -0.04 0.07 -0.09 13.9 8.5 16.1
1948 -0.06 0.05 -0.1 13.9 8.5 16.1
1949 -0.07 -0.05 -0.07 13.9 8.5 16.1
1950 -0.16 -0.33 -0.09 13.9 8.5 16.1
1951 0 -0.07 0.02 13.9 8.5 16.1
1952 0.04 -0.07 0.09 13.9 8.5 16.1
1953 0.12 0.18 0.09 13.9 8.5 16.1
1954 -0.1 -0.15 -0.07 13.9 8.5 16.1
1955 -0.11 -0.13 -0.11 13.9 8.5 16.1
1956 -0.17 -0.42 -0.08 13.9 8.5 16.1
1957 0.07 -0.06 0.12 13.9 8.5 16.1
1958 0.12 0.12 0.12 13.9 8.5 16.1
1959 0.07 0.05 0.08 13.9 8.5 16.1
1960 0.02 -0.05 0.05 13.9 8.5 16.1
1961 0.1 0.1 0.1 13.9 8.5 16.1
1962 0.13 0.17 0.11 13.9 8.5 16.1
1963 0.15 0.21 0.12 13.9 8.5 16.1
1964 -0.12 -0.24 -0.07 13.9 8.5 16.1
1965 -0.05 -0.13 -0.03 13.9 8.5 16.1
1966 0.01 -0.07 0.03 13.9 8.5 16.1
1967 0.02 0 0.03 13.9 8.5 16.1
1968 0.01 -0.11 0.05 13.9 8.5 16.1
1969 0.11 -0.1 0.19 13.9 8.5 16.1
1970 0.07 0.02 0.08 13.9 8.5 16.1
1971 -0.03 -0.04 -0.03 13.9 8.5 16.1
1972 0.06 -0.17 0.14 13.9 8.5 16.1
1973 0.19 0.29 0.15 13.9 8.5 16.1
1974 -0.05 -0.22 0.01 13.9 8.5 16.1
1975 0.02 0.11 -0.02 13.9 8.5 16.1
1976 -0.07 -0.26 0 13.9 8.5 16.1
1977 0.18 0.2 0.17 13.9 8.5 16.1
1978 0.1 0.07 0.11 13.9 8.5 16.1
1979 0.19 0.14 0.2 13.9 8.5 16.1
1980 0.23 0.27 0.22 13.9 8.5 16.1
1981 0.27 0.49 0.19 13.9 8.5 16.1
1982 0.15 0.09 0.17 13.9 8.5 16.1
1983 0.32 0.48 0.26 13.9 8.5 16.1
1984 0.13 0.05 0.16 13.9 8.5 16.1
1985 0.11 0.07 0.12 13.9 8.5 16.1
1986 0.2 0.28 0.17 13.9 8.5 16.1
1987 0.33 0.4 0.3 13.9 8.5 16.1
1988 0.34 0.55 0.27 13.9 8.5 16.1
1989 0.27 0.38 0.23 13.9 8.5 16.1
1990 0.4 0.59 0.33 13.9 8.5 16.1
1991 0.38 0.53 0.32 13.9 8.5 16.1
1992 0.24 0.26 0.23 13.9 8.5 16.1
1993 0.27 0.34 0.24 13.9 8.5 16.1
1994 0.33 0.46 0.28 13.9 8.5 16.1
1995 0.45 0.77 0.33 13.9 8.5 16.1
1996 0.32 0.34 0.31 13.9 8.5 16.1
1997 0.52 0.67 0.46 13.9 8.5 16.1
1998 0.64 0.95 0.52 13.9 8.5 16.1
1999 0.46 0.79 0.33 13.9 8.5 16.1
2000 0.43 0.63 0.35 13.9 8.5 16.1
2001 0.55 0.81 0.45 13.9 8.5 16.1
2002 0.61 0.93 0.49 13.9 8.5 16.1
2003 0.62 0.88 0.52 13.9 8.5 16.1
2004 0.58 0.81 0.49 13.9 8.5 16.1
2005 0.65 1.04 0.5 13.9 8.5 16.1
2006 0.6 0.91 0.48 13.9 8.5 16.1
2007 0.59 1.09 0.41 13.9 8.5 16.1
2008 0.51 0.85 0.39 13.9 8.5 16.1
2009 0.6 0.86 0.5 13.9 8.5 16.1
2010 0.66 1.06 0.5 13.9 8.5 16.1
2011 0.53 0.87 0.4 13.9 8.5 16.1
2012 0.57 0.89 0.45 13.9 8.5 16.1
2013 0.62 0.98 0.48 13.9 8.5 16.1
2014 0.69 1 0.57 13.9 8.5 16.1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment