Module 5: Tree rings and climate change

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Tree Rings and Temperature Variations in the Northern Hemisphere, 1850-1981</title>
		<script type="text/javascript" src="https://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;
			}

circle:hover {
				fill: black ;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

</style>
	</head>
	<body>

<h1>Tree Rings and Temperature Variations in the Northern Hemisphere, 1850-1981</h1>

<p>Mapping tree ring data over time gives us a sense of patterns of growth and decline in the earth's forests. This chart plots the difference between each year's average temperature against the global mean from 1850 to 1981 in the Northern Hemisphere. The size of the circle shows the relative diameter of the tree ring for that year. Source: <a href="https://www.ncdc.noaa.gov/paleo/treering.html">National Centers for Environmental Information</a>, 2014</p>

var w = 1000;
			var h = 600;
			var padding = [ 20, 10, 50, 50 ];  //Top, right, bottom, left

var dateFormat = d3.time.format("%Y");

var xScale = d3.time.scale()
								.range([ padding[3], w - padding[1] - padding[3] ]);
			
			var yScale = d3.scale.linear()
								.range([ padding[0], h - padding[2] ]);

var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(12)
							.tickFormat(function(d) {
								return dateFormat(d);
							});

var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							;

var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

d3.csv("TreeRingWidthTemperature.csv", function(data) {

xScale.domain([ 
					d3.min(data, function(d) {
						return dateFormat.parse(d.Year);
					}),
					d3.max(data, function(d) {
						return dateFormat.parse(d.Year);
					})
				]);

yScale.domain([
                    d3.max(data, function(d) {
                        return +d.Northern_Temperature;
                    }),
                    d3.min(data, function(d) {
                        return +d.Northern_Temperature;
                    })
                ]);

svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3]) + ",0)")
					.call(yAxis);

});

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js