Skip to content

Instantly share code, notes, and snippets.

@pamtobey

pamtobey/T_index.html

Created April 12, 2015 02:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save pamtobey/3dcbff37f13b42142074 to your computer and use it in GitHub Desktop.
Save pamtobey/3dcbff37f13b42142074 to your computer and use it in GitHub Desktop.
Download ZIP
Test for module 4--still has the old bad data
Raw
T_index.html
<!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: orange;
}
.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).</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 = 2500;
var padding = [ 20, 10, 30, 50 ]; //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.data(function(a) {
return (a.MeanLandOcean);
});
widthScale.domain([ d3.min(-15), d3.max(15) {
return d.MeanLandOcean;
}) ]);
heightScale.domain(data.map(function(d) { return d.Year; } ));
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", padding[3])
.attr("y", function(d) {
return heightScale(d.Years);
})
.attr("width", function(d) {
return widthScale(d.MeanLandOcean;
})
.attr("height", heightScale.rangeBand())
.attr("fill", "red")
.append("title")
.text(function(d) {
return d.Year + "'s temperature fluctuation is " + d.MeanLandOcean;
});
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);
});
</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