Created
November 11, 2015 23:17
-
-
Save cornfact/a299a79a9d2848de4c76 to your computer and use it in GitHub Desktop.
Illinois counties
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>Illinois by county</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: "Lucida Console", Monaco, monospace; | |
| } | |
| #container { | |
| width: 500px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 50px; | |
| padding: 50px; | |
| background-color: white; | |
| } | |
| svg { | |
| background-color: white; | |
| } | |
| h1 { | |
| font-size: 20px; | |
| margin: 0; | |
| } | |
| p { | |
| font-size: 12px; | |
| margin: 5px 0 5px 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <h1>Illinois counties</h1> | |
| <p>ARC crop insurance payouts as of November 5, 2015 [will show] show county by county differences <a href="http://www.fsa.usda.gov/programs-and-services/arcplc_program/index">FSA/USDA, 2015</a></p> | |
| </div> | |
| <script type="text/javascript"> | |
| //Width and height | |
| var w = 500; | |
| var h = 800; | |
| var padding = [ 20, 10, 30, 35 ]; //Top, right, bottom, left | |
| //Define map projection | |
| var projection = d3.geo.albers() | |
| .center([ 6.5, 40 ]) | |
| .translate([ w/2, h/2 ]) | |
| .scale([ w * 15 ]); | |
| //Define path generator | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| //Create SVG | |
| var svg = d3.select("#container") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| //Load in GeoJSON data | |
| d3.json("mapshaper_illinois.json", function(json) { | |
| //Bind data and create one path per GeoJSON feature | |
| svg.selectAll("path") | |
| .data(json.features) | |
| .enter() | |
| .append("path") | |
| .attr("d", path) | |
| .attr("fill", "white") | |
| .attr("stroke", "black") | |
| .attr("stroke-width", .75 ); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment