cornfact/index.html

## 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>

## layersFifteen.csv

          
            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

## layersFourteen.csv

          
            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
	<!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