Skip to content

Instantly share code, notes, and snippets.

@enjalot
Forked from pamtobey/TempAnomolies.csv
Last active August 29, 2015 14:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save enjalot/04a94df516b2f36b172c to your computer and use it in GitHub Desktop.
Save enjalot/04a94df516b2f36b172c to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cleaning Up</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) {
return d3.descending(+a.Year);
});
widthScale.domain([ -1, 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] + widthScale(0);
if(d.ValueLandOcean < 0) {
x -= widthScale(d.ValueLandOcean)
}
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(d.ValueLandOcean);
}
})
.attr("height", heightScale.rangeBand())
.attr("fill", "red")
.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>
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