block by enjalot 3f77662f74c2546e41d2

3f77662f74c2546e41d2

Full Screen

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Temperature Anomalies</title>
		<script type="text/javascript" src="//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="//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(value > 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>

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