Created
November 1, 2015 02:56
-
-
Save cornfact/db6f07debf4c77a8c1fb to your computer and use it in GitHub Desktop.
Corn Production 1934-2014
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | ||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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"> | |
| 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.1); | |
| 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", "black"); | |
| //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); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + padding[3] + ",0)") | |
| .call(yAxis); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment