cornfact · September 27, 2015 03:54
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Line Chart with Two Lines</title>
 		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
 		<style type="text/css">
 			
 			body {
 				background-color: white;
 				font-family: Helvetica, Arial, sans-serif;
 			}

 			h1 {
 				font-size: 20px;
 				margin: 0;
 			}

 			p {
 				font-size: 14px;
 				margin: 10px 0 0 0;
 			}

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

 		</style>
 	</head>
 	<body>

 		<h1>USDA Layers 2014 and 2015</h1>

 		<p>Number of U.S. layers in millions between <strong style="color: black;">2014</strong> and <strong style="color: blue;">2015</strong> Source: <a href="http://http://usda.mannlib.cornell.edu/MannUsda/viewDocumentInfo.do?documentID=1028">USDA</a>, September 22, 2015</p>

 		<script type="text/javascript">		


 			//Dimensions and padding
 			var w = 700;
 			var h = 400;
 			var padding = [ 20, 10, 50, 50 ];  //Top, right, bottom, left



 			//Set up date formatting and years
 			var dateFormat = d3.time.format("%b");



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



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

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



 			//Configure line generator
 			var line = d3.svg.line()
 				.x(function(d) {
 					return xScale(dateFormat.parse(d.month));
 				})
 				.y(function(d) {
 					return yScale(d.number);
 				});



 			//Create the empty SVG image
 			var svg = d3.select("body")
 						.append("svg")
 						.attr("width", w)
 						.attr("height", h);



 			//Load layersFourteen data
 			d3.csv("layersFourteen.csv", function(layersFourteen) {

 				//Load layersFifteen data
 				d3.csv("layersFifteen.csv", function(layersFifteen) {

 					//Create a new array that contains both 2014 and 2015
 					var mergedData = layersFourteen.concat(layersFifteen);

 					//Use the newly merged data to determine the
 					//min and max values, for setting scale domains
 					xScale.domain([ 
 						d3.min(mergedData, function(d) {
 							return dateFormat.parse(d.month);
 						}),
 						d3.max(mergedData, function(d) {
 							return dateFormat.parse(d.month);
 						})
 					]);

 					yScale.domain([ 
 						d3.max(mergedData, function(d) {
 							return +d.number;
 						}),
 						300
 					]);



 					//create the lines
 					svg.data([ layersFourteen ])
 						.append("path")
 						.attr("class", "line layersFourteen")
 						.attr("d", line)
 						.attr("fill", "none")
 						.attr("stroke", "black")
 						.attr("stroke-width", 2)
 						

 					svg.data([ layersFifteen ])
 						.append("path")
 						.attr("class", "line layersFifteen")
 						.attr("d", line)
 						.attr("fill", "none")
 						.attr("stroke", "blue")
 						.attr("stroke-width", 2);
 						
 			

 					//x and y axis
 					svg.append("g")
 						.attr("class", "x axis")
 						.attr("transform", "translate(0," + (h - padding[2]) + ")")
 						.call(xAxis);

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



 				});
 				//End layersFifteen data load function

 			});
 			//End layersFourteen data load function


 		</script>

 	</body>
 </html>
diff --git a/layersFifteen.csv b/layersFifteen.csv
diff --git a/layersFourteen.csv b/layersFourteen.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Line Chart with Two Lines</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<style type="text/css">

	body {
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-size: 20px;
	margin: 0;
	}

	p {
	font-size: 14px;
	margin: 10px 0 0 0;
	}

	svg {
	background-color: white;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	</style>
	</head>
	<body>

	<h1>USDA Layers 2014 and 2015</h1>

	<p>Number of U.S. layers in millions between <strong style="color: black;">2014</strong> and <strong style="color: blue;">2015</strong> Source: <a href="http://http://usda.mannlib.cornell.edu/MannUsda/viewDocumentInfo.do?documentID=1028">USDA</a>, September 22, 2015</p>

	<script type="text/javascript">


	//Dimensions and padding
	var w = 700;
	var h = 400;
	var padding = [ 20, 10, 50, 50 ]; //Top, right, bottom, left



	//Set up date formatting and years
	var dateFormat = d3.time.format("%b");



	//Set up scales
	var xScale = d3.time.scale()
	.range([ padding[3], w - padding[1] - padding[3] ]);

	var yScale = d3.scale.linear()
	.range([ padding[0], h - padding[2] ]);



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

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



	//Configure line generator
	var line = d3.svg.line()
	.x(function(d) {
	return xScale(dateFormat.parse(d.month));
	})
	.y(function(d) {
	return yScale(d.number);
	});



	//Create the empty SVG image
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);



	//Load layersFourteen data
	d3.csv("layersFourteen.csv", function(layersFourteen) {

	//Load layersFifteen data
	d3.csv("layersFifteen.csv", function(layersFifteen) {

	//Create a new array that contains both 2014 and 2015
	var mergedData = layersFourteen.concat(layersFifteen);

	//Use the newly merged data to determine the
	//min and max values, for setting scale domains
	xScale.domain([
	d3.min(mergedData, function(d) {
	return dateFormat.parse(d.month);
	}),
	d3.max(mergedData, function(d) {
	return dateFormat.parse(d.month);
	})
	]);

	yScale.domain([
	d3.max(mergedData, function(d) {
	return +d.number;
	}),
	300
	]);



	//create the lines
	svg.data([ layersFourteen ])
	.append("path")
	.attr("class", "line layersFourteen")
	.attr("d", line)
	.attr("fill", "none")
	.attr("stroke", "black")
	.attr("stroke-width", 2)


	svg.data([ layersFifteen ])
	.append("path")
	.attr("class", "line layersFifteen")
	.attr("d", line)
	.attr("fill", "none")
	.attr("stroke", "blue")
	.attr("stroke-width", 2);



	//x and y axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h - padding[2]) + ")")
	.call(xAxis);

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



	});
	//End layersFifteen data load function

	});
	//End layersFourteen data load function


	</script>

	</body>
	</html>
	month	number
	Jan	363.7
	Feb	362.3
	Mar	362.5
	Apr	358.4
	May	341.6
	Jun	328.7
	Jul	329.1
	Aug	330.1
	month	number
	Jan	359.6
	Feb	359.1
	Mar	360.1
	Apr	360.8
	May	359.7
	Jun	360.8
	Jul	360.8
	Aug	361.7
	Sep	361.8
	Oct	362
	Nov	364