Last active
March 3, 2020 18:23
-
-
Save ihgrant/569c042b04eda84bc56792a3d4959ec4 to your computer and use it in GitHub Desktop.
2016 voter turnout by state
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"> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script src="https://d3js.org/d3-color.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-interpolate.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-array.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-collection.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-format.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-scale.v2.min.js"></script> | |
| <style type="text/css"> | |
| /* On mouse hover, lighten state color */ | |
| path:hover { | |
| fill-opacity: .7; | |
| } | |
| /* Style for Custom Tooltip */ | |
| div.tooltip { | |
| position: absolute; | |
| text-align: center; | |
| width: 60px; | |
| height: 28px; | |
| padding: 2px; | |
| font: 12px sans-serif; | |
| background: white; | |
| border: 0px; | |
| border-radius: 8px; | |
| pointer-events: none; | |
| } | |
| /* Legend Font Style */ | |
| body { | |
| font: 11px sans-serif; | |
| } | |
| /* Legend Position Style */ | |
| .legend { | |
| position:absolute; | |
| left:800px; | |
| top:350px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="map.js"></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
| /* This visualization was made possible by modifying code provided by: | |
| Scott Murray, Choropleth example from "Interactive Data Visualization for the Web" | |
| https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html | |
| Malcolm Maclean, tooltips example tutorial | |
| http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html | |
| Mike Bostock, Pie Chart Legend | |
| http://bl.ocks.org/mbostock/3888852 */ | |
| //Width and height of map | |
| var width = 960; | |
| var height = 500; | |
| // D3 Projection | |
| var projection = d3.geo.albersUsa() | |
| .translate([width/2, height/2]) // translate to center of screen | |
| .scale([1000]); // scale things down so see entire US | |
| // Define path generator | |
| var path = d3.geo.path() // path generator that will convert GeoJSON to SVG paths | |
| .projection(projection); // tell path generator to use albersUsa projection | |
| //Create SVG element and append map to the SVG | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // Append Div for tooltip to SVG | |
| var div = d3.select("body") | |
| .append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| d3.csv("voter_turnout.csv", (data) => { | |
| let displayKey = 'vep_highest_office' | |
| let dataValues = data.map(el => el[displayKey]) | |
| let min = d3.min(dataValues) | |
| let max = d3.max(dataValues) | |
| // Loop through each state data value in the .csv file | |
| const dataJson = data.reduce(function(acc, cur) { | |
| const {state, vep_total_counted, vep_highest_office, vap_highest_office} = cur | |
| acc[state.toLowerCase()] = { | |
| vep_total_counted, vep_highest_office, vap_highest_office | |
| } | |
| return acc | |
| }, {}) | |
| const x = d3.scaleLinear() | |
| .domain([min, max]) | |
| .range([0, 1]); | |
| d3.json("us_states.json", function(json) { | |
| // Bind the data to the SVG and create one path per GeoJSON feature | |
| svg.selectAll("path") | |
| .data(json.features) | |
| .enter() | |
| .append("path") | |
| .attr("d", path) | |
| .style("stroke", "#fff") | |
| .style("stroke-width", "1") | |
| .style("fill", function(d) { | |
| let stateData = dataJson[d.properties.name.toLowerCase()]; | |
| if (!stateData) { | |
| return 'rgb(50,50,50)' | |
| } | |
| let scaledValue = x(stateData[displayKey]) | |
| return d3.interpolateBlues(scaledValue) || "rgb(213,222,217)" | |
| }); | |
| }); | |
| }) |
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 | vep_total_counted | vep_highest_office | vap_highest_office | |
|---|---|---|---|---|
| Alabama | 0.59 | 0.59 | 0.56 | |
| Alaska | 0.62 | 0.61 | 0.57 | |
| Arizona | 0.56 | 0.55 | 0.49 | |
| Arkansas | 0.53 | 0.53 | 0.49 | |
| California | 0.58 | 0.57 | 0.47 | |
| Colorado | 0.72 | 0.70 | 0.65 | |
| Connecticut | 0.65 | 0.64 | 0.58 | |
| Delaware | 0.64 | 0.64 | 0.59 | |
| District of Columbia | 0.61 | 0.60 | 0.55 | |
| Florida | 0.66 | 0.65 | 0.57 | |
| Georgia | 0.60 | 0.59 | 0.53 | |
| Hawaii | 0.43 | 0.42 | 0.38 | |
| Idaho | 0.61 | 0.59 | 0.55 | |
| Illinois | 0.63 | 0.62 | 0.57 | |
| Indiana | 0.58 | 0.56 | 0.54 | |
| Iowa | 0.69 | 0.68 | 0.65 | |
| Kansas | 0.60 | 0.58 | 0.54 | |
| Kentucky | 0.60 | 0.59 | 0.56 | |
| Louisiana | 0.61 | 0.60 | 0.57 | |
| Maine | 0.73 | 0.71 | 0.69 | |
| Maryland | 0.67 | 0.66 | 0.60 | |
| Massachusetts | 0.68 | 0.67 | 0.61 | |
| Michigan | 0.66 | 0.65 | 0.62 | |
| Minnesota | 0.75 | 0.74 | 0.69 | |
| Mississippi | 0.55 | 0.53 | ||
| Missouri | 0.62 | 0.62 | 0.60 | |
| Montana | 0.64 | 0.62 | 0.61 | |
| Nebraska | 0.64 | 0.63 | 0.59 | |
| Nevada | 0.57 | 0.57 | 0.49 | |
| New Hampshire | 0.73 | 0.71 | 0.69 | |
| New Jersey | 0.66 | 0.64 | 0.56 | |
| New Mexico | 0.55 | 0.55 | 0.50 | |
| New York | 0.57 | 0.57 | 0.50 | |
| North Carolina | 0.65 | 0.65 | 0.60 | |
| North Dakota | 0.62 | 0.61 | 0.59 | |
| Ohio | 0.64 | 0.63 | 0.61 | |
| Oklahoma | 0.52 | 0.49 | ||
| Oregon | 0.68 | 0.66 | 0.62 | |
| Pennsylvania | 0.64 | 0.61 | ||
| Rhode Island | 0.60 | 0.59 | 0.55 | |
| South Carolina | 0.57 | 0.57 | 0.54 | |
| South Dakota | 0.60 | 0.59 | 0.57 | |
| Tennessee | 0.52 | 0.51 | 0.49 | |
| Texas | 0.51 | 0.51 | 0.43 | |
| Utah | 0.58 | 0.57 | 0.53 | |
| Vermont | 0.65 | 0.64 | 0.62 | |
| Virginia | 0.66 | 0.61 | ||
| Washington | 0.66 | 0.65 | 0.58 | |
| West Virginia | 0.50 | 0.49 | ||
| Wisconsin | 0.70 | 0.66 | ||
| Wyoming | 0.60 | 0.60 | 0.57 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
after http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922