-
-
Save jborden/2692e6f9896ed283ce5ba38ef0daa698 to your computer and use it in GitHub Desktop.
Illinois counties, revised
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
| city | longitude | latitude | population | |
|---|---|---|---|---|
| Bloomington-88.9936900 | -88.99369 | 40.4842 | 76610 | |
| Chicago | -87.65005 | 41.85003 | 2695598 | |
| Springfield | -89.64371 | 39.80172 | 116250 |
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: Helvetica, Arial, sans-serif; | |
| } | |
| svg { | |
| background-color: white; | |
| } | |
| h1 { | |
| font-size: 20px; | |
| margin: 0; | |
| } | |
| p { | |
| font-size: 12px; | |
| margin: 5px 0 5px 0; | |
| } | |
| #container { | |
| width: 550px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 50px; | |
| padding: 50px; | |
| background-color: white; | |
| } | |
| div.tooltip { | |
| visibility:hidden; | |
| position:absolute; | |
| background: #ffffff; | |
| width: 155px; | |
| height: 10px; | |
| padding-bottom: .5em; | |
| padding-top: .25em; | |
| padding-left: .5em; | |
| font-size: 12px; | |
| font-family: Helvetica, Arial, sans-serif; | |
| text-align: left; | |
| border: 1px solid; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <h1>Libertarian Party Support by County in Illinois</h1> | |
| <p>Libertarian Party support is defined by the percentage of voters for Gary Johnson.</p> | |
| <p>Source: <a href="http://www.elections.il.gov/ElectionInformation/DownloadVoteTotals.aspx">Illinois Election Information</a></p> | |
| </div> | |
| <div class="tooltip"></div> | |
| <script type="text/javascript"> | |
| //crop revenue to map | |
| var percent = "percent" | |
| //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); | |
| //define quantize scale to sort data values into areas of color | |
| var color = d3.scale.quantize() | |
| .range(["#2c7bb6", "#00a6ca","#00ccbc","#90eb9d","#ffff8c","#f9d057","#f29e2e","#e76818","#d7191c"]); | |
| //Create SVG | |
| var svg = d3.select("#container") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| //Load in revenue data | |
| d3.csv("JohnsonVotes.csv", function(data) { | |
| //set input domain for color scale | |
| color.domain ([ | |
| d3.min(data, function(d) {return +d[percent]; }), | |
| d3.max(data, function(d) {return +d[percent]; }) | |
| ]); | |
| var nameToPercent = {} | |
| data.forEach(function(d){ | |
| nameToPercent[d.county.toUpperCase()] = +d.percent | |
| }) | |
| //Load in GeoJSON data | |
| d3.json("mapshaper_illinois.json", function(json) { | |
| json.features.forEach(function(d){ | |
| var name = d.properties.COUNTY_NAM | |
| var dataValue = nameToPercent[name] | |
| d.properties.percent = dataValue | |
| }) | |
| //Merge the revenue data and GEOjson into a single array | |
| //Loop through once for each revenue data value | |
| // for (var i = 0; i < data.length; i++) { | |
| // debugger | |
| // //grab county name | |
| // var dataCounty = data[i].COUNTY_NAM; | |
| // //grab data value, and convert from string to float | |
| // var dataValue = +data[i][percent]; | |
| // //find the corresponding county inside GeoJSON | |
| // for (var j = 0; j < json.features.length; j++) { | |
| // //link to the FIPS code | |
| // var jsonCounty = json.features[j].properties.CO_FIPS; | |
| // if (dataCounty == jsonCounty) { | |
| // //copy the data value into the GeoJSON | |
| // json.features[j].properties.percent = dataValue; | |
| // //Stop looking through the JSON | |
| // break; | |
| // } | |
| // } | |
| // } | |
| //console.log(json); | |
| //Bind data and create one path per GeoJSON feature | |
| svg.selectAll("path") | |
| .data(json.features) | |
| .enter() | |
| .append("path") | |
| .attr("d", path) | |
| .attr("stroke", "black") | |
| .attr("stroke-width", .75 ) | |
| .style("fill", function(d) { | |
| //get data value | |
| var value = d.properties.percent | |
| if (value) { | |
| //if value exists... | |
| return color(value); | |
| } | |
| }); | |
| var tooltip = d3.select("div.tooltip"); | |
| //Create tooltips | |
| svg.selectAll("path") | |
| .data(json.features) | |
| .on("mouseover", function() { | |
| return tooltip.style("visibility", "visible"); | |
| }) | |
| .on("mousemove", function(d) { | |
| //debugger | |
| tooltip.html('') | |
| tooltip | |
| .style("top", (d3.event.pageY + 16) + "px") | |
| .style("left", (d3.event.pageX + 16) + "px") | |
| tooltip | |
| .append('div') | |
| .text(d.properties.COUNTY_NAM + ": " + d.properties.percent + "%") | |
| // .html('<div class="countyName">'+d.properties.COUNTY_NAM+'</div>' + ": " + d.properties.percent + " percent"); | |
| }) | |
| .on("mouseout", function() { | |
| return tooltip.style("visibility", "hidden"); | |
| }) | |
| //Load in cities data | |
| // d3.csv("cityChicago.csv", function(data) { | |
| // //Create a circle for each city | |
| // svg.selectAll("circle") | |
| // .data(data) | |
| // .enter() | |
| // .append("circle") | |
| // .attr("cx", function(d) { | |
| // return projection([d.longitude, d.latitude])[0]; | |
| // }) | |
| // .attr("cy", function(d) { | |
| // return projection([d.longitude, d.latitude])[1]; | |
| // }) | |
| // .attr("r", function(d) { | |
| // //Use Math.sqrt to scale by area (not radius) | |
| // return Math.sqrt(+d.population / w * .075); | |
| // }) | |
| // //.attr("r", 10) | |
| // .style("fill", "none") | |
| // .attr("stroke", "black") | |
| // .attr("stroke-width", 1); | |
| // }); | |
| //end cities data | |
| }); //end d3.json() | |
| }); //end d3.csv | |
| </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
| county | percent | |
|---|---|---|
| ALEXANDER | 1.7 | |
| PULASKI | 2.0 | |
| HARDIN | 2.2 | |
| WAYNE | 2.3 | |
| UNION | 2.6 | |
| SCOTT | 2.6 | |
| GALLATIN | 2.7 | |
| COOK | 2.7 | |
| EDWARDS | 2.7 | |
| HAMILTON | 2.7 | |
| WHITE | 2.8 | |
| CALHOUN | 2.8 | |
| POPE | 2.9 | |
| FRANKLIN | 2.9 | |
| MASSAC | 2.9 | |
| GREENE | 3.0 | |
| FAYETTE | 3.0 | |
| JOHNSON | 3.0 | |
| RICHLAND | 3.1 | |
| WILLIAMSON | 3.2 | |
| SALINE | 3.2 | |
| LAWRENCE | 3.2 | |
| WABASH | 3.2 | |
| MARION | 3.2 | |
| BROWN | 3.3 | |
| CLAY | 3.3 | |
| SHELBY | 3.4 | |
| CASS | 3.4 | |
| JEFFERSON | 3.4 | |
| PIKE | 3.4 | |
| ST. CLAIR | 3.5 | |
| RANDOLPH | 3.5 | |
| CLARK | 3.5 | |
| JASPER | 3.5 | |
| PERRY | 3.5 | |
| VERMILION | 3.6 | |
| ADAMS | 3.7 | |
| EFFINGHAM | 3.7 | |
| CRAWFORD | 3.7 | |
| JERSEY | 3.8 | |
| MOULTRIE | 3.8 | |
| HANCOCK | 3.9 | |
| MONROE | 3.9 | |
| MACON | 3.9 | |
| WASHINGTON | 3.9 | |
| WILL | 3.9 | |
| SCHUYLER | 4.1 | |
| EDGAR | 4.2 | |
| MACOUPIN | 4.2 | |
| MADISON | 4.3 | |
| KANKAKEE | 4.3 | |
| IROQUOIS | 4.3 | |
| WINNEBAGO | 4.3 | |
| CUMBERLAND | 4.3 | |
| CHRISTIAN | 4.3 | |
| PUTNAM | 4.4 | |
| LOGAN | 4.4 | |
| JoDAVIESS | 4.5 | |
| JACKSON | 4.5 | |
| LAKE | 4.5 | |
| DOUGLAS | 4.5 | |
| MARSHALL | 4.5 | |
| HENDERSON | 4.5 | |
| MORGAN | 4.6 | |
| WARREN | 4.7 | |
| MONTGOMERY | 4.7 | |
| SANGAMON | 4.7 | |
| STEPHENSON | 4.7 | |
| LaSALLE | 4.7 | |
| KANE | 4.7 | |
| CLINTON | 4.7 | |
| BOONE | 4.7 | |
| COLES | 4.7 | |
| PEORIA | 4.7 | |
| ROCK ISLAND | 4.8 | |
| DuPAGE | 4.8 | |
| MENARD | 4.8 | |
| WOODFORD | 4.8 | |
| OGLE | 4.9 | |
| McDONOUGH | 4.9 | |
| GRUNDY | 5.0 | |
| MASON | 5.0 | |
| FULTON | 5.0 | |
| KNOX | 5.0 | |
| KENDALL | 5.0 | |
| CHAMPAIGN | 5.1 | |
| McHENRY | 5.1 | |
| WHITESIDE | 5.1 | |
| HENRY | 5.1 | |
| FORD | 5.1 | |
| LIVINGSTON | 5.1 | |
| BUREAU | 5.2 | |
| TAZEWELL | 5.3 | |
| CARROLL | 5.4 | |
| STARK | 5.5 | |
| MERCER | 5.6 | |
| DeWITT | 5.8 | |
| DeKALB | 5.8 | |
| LEE | 5.9 | |
| BOND | 6.0 | |
| McLEAN | 6.1 | |
| PIATT | 6.3 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment