Created
September 21, 2015 00:33
-
-
Save cornfact/6d90c5af580148540fc9 to your computer and use it in GitHub Desktop.
Egg layer population
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>Loading CSV Data with D3</title> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.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: 5px 0 0 0; | |
| } | |
| svg { | |
| background-color: white; | |
| } | |
| circle:hover { | |
| fill: yellow; | |
| } | |
| .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> | |
| <h1>Egg laying poultry population</h1> | |
| <p>Percentage change in egg producing states July 2014 to July 2015</p> | |
| <script type="text/javascript"> | |
| //define size of graphic | |
| var w = 600; | |
| var h = 400; | |
| var padding = [ 20, 10, 20, 50 ]; //Top, right, bottom, left | |
| //define scale | |
| var xScale = d3.scale.linear() | |
| .range([ padding[3], w - padding[1] - padding[3] ]); | |
| var yScale = d3.scale.linear() | |
| .range([ padding[0], h - padding[2] ]); | |
| //define x axis | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left") | |
| .ticks(20) | |
| var formatAsPercentage = d3.format(".1%"); | |
| yAxis.tickFormat(formatAsPercentage); | |
| //define svg | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| //Load in contents of CSV file | |
| d3.csv("layersbystate.csv", function(data) { | |
| xScale.domain([ | |
| d3.min(data, function(d) { | |
| return +d.yearFifteen; | |
| }), | |
| d3.max(data, function(d) { | |
| return +d.yearFifteen; | |
| }) | |
| ]); | |
| yScale.domain([ | |
| d3.max(data, function(d) { | |
| return +d.percentChange; | |
| }), | |
| d3.min(data, function(d) { | |
| return +d.percentChange; | |
| }) | |
| ]); | |
| var circle = svg.selectAll("circle") | |
| .data(data) | |
| .enter() | |
| .append("circle"); | |
| circle.attr("cx", function(d) { | |
| return xScale(d.yearFifteen); | |
| }) | |
| .attr("cy", function(d) { | |
| return yScale(d.percentChange); | |
| }) | |
| .attr("r", 2) | |
| .attr("fill", "blue") | |
| .attr("opacity", .55) | |
| .append("title") | |
| .text(function(d) { | |
| return d.state + " has " + d.yearFifteen + " layers, a " + d.percentChange + " percent change"; | |
| }); | |
| circle.sort(function(a, b) { | |
| return d3.descending(+a.percentChange, +b.percentChange); | |
| }) | |
| .transition() | |
| .delay(function(d, i) { | |
| return i * 25; | |
| }) | |
| .duration(1000) | |
| .attr("r", 9); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + (h - padding[2] + 2) + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + (padding[3] - 2) + ",0)") | |
| .call(yAxis); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
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
| state | yearFourteen | yearFifteen | percentChange | |
|---|---|---|---|---|
| Alabama | 9309 | 9551 | 0.03 | |
| Arkansas | 12271 | 12906 | 0.05 | |
| Caifornia | 15997 | 13545 | -0.18 | |
| Colorado | 5001 | 4516 | -0.11 | |
| Florida | 8583 | 8926 | 0.04 | |
| Georgia | 18159 | 18429 | 0.01 | |
| Illinois | 4761 | 4642 | -0.03 | |
| Indiana | 27467 | 26884 | -0.02 | |
| Iowa | 58787 | 33593 | -0.75 | |
| Maryland | 2774 | 2703 | -0.03 | |
| Michigan | 13082 | 13016 | -0.01 | |
| Minnesota | 11088 | 8314 | -0.33 | |
| Mississippi | 5501 | 5801 | 0.05 | |
| Missouri | 8725 | 8278 | -0.05 | |
| Nebraska | 9576 | 5877 | -0.63 | |
| New York | 5094 | 4927 | -0.03 | |
| North Carolina | 13728 | 14745 | 0.07 | |
| Ohio | 31145 | 31778 | 0.02 | |
| Oregon | 2378 | 2445 | 0.03 | |
| Pennsylvania | 25146 | 25683 | 0.02 | |
| South Carolina | 4201 | 4306 | 0.02 | |
| South Dakota | 2551 | 1550 | -0.65 | |
| Texas | 18901 | 19424 | 0.03 | |
| Utah | 4198 | 4230 | 0.01 | |
| Virgina | 3073 | 2836 | -0.08 | |
| Washignton | 6852 | 7327 | 0.06 | |
| Wisconsin | 4892 | 4307 | -0.14 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment