cornfact/cornYield.csv

## cornYield.csv

          
            date
            bushels

            
              1934
              1.1

            
              1944
              1.8

            
              1954
              2.7

            
              1964
              3.5

            
              1974
              4.7

            
              1984
              7.7

            
              1994
              10.1

            
              2004
              11.8

            
              2005
              11.1

            
              2006
              10.5

            
              2007
              13.0

            
              2008
              12.1

            
              2009
              13.1

            
              2010
              12.4

            
              2011
              12.4

            
              2012
              10.8

            
              2013
              13.9

            
              2014
              14.2


## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Bar Chart, Framed</title>
		<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
		<style type="text/css">

			svg{
				overflow: visible;
			}

			body {
				margin: 0;
				background-color: lightGray;
				font-family: Helvetica, Arial, sans-serif;
			}

			#container {
				width: 600px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
			}

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

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

			a:link {
				text-decoration: none;
				color: gray;
			}

			a:hover {
				text-decoration: underline;
			}

			a:visited {
				color: gray;
			}

			a:active {
				color: black;
			}

			svg {
				background-color: white;
			}

			g.bar text {
				font-size: 11px;
				font-weight: bold;
				text-anchor: end;
				opacity: 0;
			}

			g.bar:hover rect {
				fill: yellow;
			}

			g.bar:hover text {
				opacity: 1;
			}

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

		<div id="container">

			<h1>U.S. corn production, 1934-2014</h1>

			<p>Corn production shown in billions of bushels. 2014 was a record year while the 2012 crop was hit by drought. <a href="http://www.worldofcorn.com/#us-corn-production">NCGA, 2015</a></p>

		</div>

		<script type="text/javascript">


			var w = 600;
			var h = 500;
			var padding = [ 20, 10, 30, 35 ];  //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);


			var xAxis = d3.svg.axis()
							.scale(widthScale)
							.orient("bottom");

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


			//Now SVG goes into #container instead of body
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);


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


				widthScale.domain([ 0, d3.max(data, function(d) {
					return +d.bushels;
				}) ]);

				heightScale.domain(data.map(function(d) { return d.date; } ));

				//Bind data to groups (not bars directly)
				var groups = svg.selectAll("g")
								.data(data)
								.enter()
								.append("g")
								.attr("class", "bar");

				//Add a rect to each group
				var rects = groups.append("rect")
					.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.date);
					})
					.attr("width", 0)
					.attr("height", heightScale.rangeBand())
					.attr("fill", "white")
					.attr("stroke", "black")
					.attr("stroke-width", .5);

				//Add a text element to each group
				groups.append("text")
					.attr("x", function(d) {
						return padding[3] + widthScale(d.bushels) - 3;
					})
					.attr("y", function(d) {
						return heightScale(d.date) + 15;
					})
					.text(function(d) {
						return d.bushels + "b";
					});

				rects.transition()
					.delay(function(d, i) {
						return i * 50;
					})
					.duration(1000)
					.attr("width", function(d) {
						return widthScale(d.bushels);
					});

				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
					.call(xAxis
						.tickValues([0, widthScale.domain()[1]])
						.tickFormat(function(d){ return "$" + d + "b" }));

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

			});


		</script>

	</body>
</html>
	date	bushels
	1934	1.1
	1944	1.8
	1954	2.7
	1964	3.5
	1974	4.7
	1984	7.7
	1994	10.1
	2004	11.8
	2005	11.1
	2006	10.5
	2007	13.0
	2008	12.1
	2009	13.1
	2010	12.4
	2011	12.4
	2012	10.8
	2013	13.9
	2014	14.2
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Bar Chart, Framed</title>
	<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
	<style type="text/css">

	svg{
	overflow: visible;
	}

	body {
	margin: 0;
	background-color: lightGray;
	font-family: Helvetica, Arial, sans-serif;
	}

	#container {
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	padding: 50px;
	background-color: white;
	}

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

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

	a:link {
	text-decoration: none;
	color: gray;
	}

	a:hover {
	text-decoration: underline;
	}

	a:visited {
	color: gray;
	}

	a:active {
	color: black;
	}

	svg {
	background-color: white;
	}

	g.bar text {
	font-size: 11px;
	font-weight: bold;
	text-anchor: end;
	opacity: 0;
	}

	g.bar:hover rect {
	fill: yellow;
	}

	g.bar:hover text {
	opacity: 1;
	}

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

	<div id="container">

	<h1>U.S. corn production, 1934-2014</h1>

	<p>Corn production shown in billions of bushels. 2014 was a record year while the 2012 crop was hit by drought. <a href="http://www.worldofcorn.com/#us-corn-production">NCGA, 2015</a></p>

	</div>

	<script type="text/javascript">


	var w = 600;
	var h = 500;
	var padding = [ 20, 10, 30, 35 ]; //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);



	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom");

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


	//Now SVG goes into #container instead of body
	var svg = d3.select("#container")
	.append("svg")
	.attr("width", w)
	.attr("height", h);


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


	widthScale.domain([ 0, d3.max(data, function(d) {
	return +d.bushels;
	}) ]);

	heightScale.domain(data.map(function(d) { return d.date; } ));

	//Bind data to groups (not bars directly)
	var groups = svg.selectAll("g")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "bar");

	//Add a rect to each group
	var rects = groups.append("rect")
	.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.date);
	})
	.attr("width", 0)
	.attr("height", heightScale.rangeBand())
	.attr("fill", "white")
	.attr("stroke", "black")
	.attr("stroke-width", .5);

	//Add a text element to each group
	groups.append("text")
	.attr("x", function(d) {
	return padding[3] + widthScale(d.bushels) - 3;
	})
	.attr("y", function(d) {
	return heightScale(d.date) + 15;
	})
	.text(function(d) {
	return d.bushels + "b";
	});

	rects.transition()
	.delay(function(d, i) {
	return i * 50;
	})
	.duration(1000)
	.attr("width", function(d) {
	return widthScale(d.bushels);
	});

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
	.call(xAxis
	.tickValues([0, widthScale.domain()[1]])
	.tickFormat(function(d){ return "$" + d + "b" }));

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

	});


	</script>

	</body>
	</html>