wboykinm/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    A map of voter turnout by state, derived from U.S. Census estimates representing the 2016 election. Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
/* Legend Font Style */
body {
	font: 11px sans-serif;
	background-color: #333;
}

/* Legend Position Style */
.legend {
	position:absolute;
	left:20px;
	top:30px;
}
.axis text {
	font: 10px sans-serif;
	fill: #e2e3e3;
}
.axis line, .axis path {
	fill: none;
	stroke: #e2e3e3;
	shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script type="text/javascript">

//Width and height of map
var width = 960;
var height = 500;
var lowColor = '#c51b8a'
var highColor = '#fde0dd'
// D3 Projection
var projection = d3.geoAlbersUsa()
  .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.geoPath() // 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);
// Load in my states data!
d3.csv("percent_registered.csv", function(data) {
	var dataArray = [];
	for (var d = 0; d < data.length; d++) {
		dataArray.push(parseFloat(data[d].value))
	}
	var minVal = d3.min(dataArray)
	var maxVal = d3.max(dataArray)
	var ramp = d3.scaleLinear().domain([minVal,maxVal]).range([lowColor,highColor])

  // Load GeoJSON data and merge with states data
  d3.json("us-states.json", function(json) {
    // Loop through each state data value in the .csv file
    for (var i = 0; i < data.length; i++) {
      // Grab State Name
      var dataState = data[i].state;
      // Grab data value
      var dataValue = data[i].value;
      // Find the corresponding state inside the GeoJSON
      for (var j = 0; j < json.features.length; j++) {
        var jsonState = json.features[j].properties.name;
        if (dataState == jsonState) {
          // Copy the data value into the JSON
          json.features[j].properties.value = dataValue;
          // Stop looking through the JSON
          break;
        }
      }
    }
    // 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", "#e2e3e3")
      .style("stroke-width", "1")
      .style("fill", function(d) { return ramp(d.properties.value) });

		// add a legend
		var w = 140, h = 300;
		var key = d3.select("body")
			.append("svg")
			.attr("width", w)
			.attr("height", h)
			.attr("class", "legend");
		var legend = key.append("defs")
			.append("svg:linearGradient")
			.attr("id", "gradient")
			.attr("x1", "100%")
			.attr("y1", "0%")
			.attr("x2", "100%")
			.attr("y2", "100%")
			.attr("spreadMethod", "pad");
		legend.append("stop")
			.attr("offset", "0%")
			.attr("stop-color", highColor)
			.attr("stop-opacity", 1);

		legend.append("stop")
			.attr("offset", "100%")
			.attr("stop-color", lowColor)
			.attr("stop-opacity", 1);
		key.append("rect")
			.attr("width", w - 100)
			.attr("height", h)
			.style("fill", "url(#gradient)")
			.attr("transform", "translate(0,10)");
		var y = d3.scaleLinear()
			.range([h, 0])
			.domain([minVal, maxVal]);
		var yAxis = d3.axisRight(y);
		key.append("g")
			.attr("class", "y axis")
			.attr("transform", "translate(41,10)")
			.call(yAxis)

		svg.append("text")
	      .attr("class", "title")
	      .attr("x", (width/2))
	      .attr("y", (height/12))
	      .attr("text-anchor", "middle")
	      .text("Percent registered, 2016")
	      .style("font-size","30px")
	      .style("font-family","Helvetica Neue")
	      .style("fill","#e2e3e3")
  });
});
</script>
</body>
</html>

## percent_registered.csv

          
            state
            value

            
              Alabama
              68.0

            
              Alaska
              69.1

            
              Arizona
              60.5

            
              Arkansas
              65.7

            
              California
              53.8

            
              Colorado
              68.2

            
              Connecticut
              63.9

            
              Delaware
              66.8

            
              District Of Columbia
              75.9

            
              Florida
              59.3

            
              Georgia
              64.1

            
              Hawaii
              49.8

            
              Idaho
              64.5

            
              Illinois
              68.5

            
              Indiana
              66.1

            
              Iowa
              69.2

            
              Kansas
              67.1

            
              Kentucky
              67.3

            
              Louisiana
              70.6

            
              Maine
              78.5

            
              Maryland
              67.3

            
              Massachusetts
              68.1

            
              Michigan
              71.3

            
              Minnesota
              72.9

            
              Mississippi
              78.3

            
              Missouri
              72.1

            
              Montana
              72.8

            
              Nebraska
              71.7

            
              Nevada
              61.4

            
              New Hampshire
              73.1

            
              New Jersey
              60.7

            
              New Mexico
              59.2

            
              New York
              59.0

            
              North Carolina
              68.1

            
              North Dakota
              72.8

            
              Ohio
              69.5

            
              Oklahoma
              63.7

            
              Oregon
              67.4

            
              Pennsylvania
              69.2

            
              Rhode Island
              64.4

            
              South Carolina
              69.0

            
              South Dakota
              69.3

            
              Tennessee
              64.3

            
              Texas
              58.1

            
              Utah
              66.7

            
              Vermont
              70.2

            
              Virginia
              69.4

            
              Washington
              69.9

            
              West Virginia
              63.6

            
              Wisconsin
              74.4

            
              Wyoming
              69.7

## us-states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-states.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style type="text/css">
	/* Legend Font Style */
	body {
	font: 11px sans-serif;
	background-color: #333;
	}

	/* Legend Position Style */
	.legend {
	position:absolute;
	left:20px;
	top:30px;
	}
	.axis text {
	font: 10px sans-serif;
	fill: #e2e3e3;
	}
	.axis line, .axis path {
	fill: none;
	stroke: #e2e3e3;
	shape-rendering: crispEdges;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">

	//Width and height of map
	var width = 960;
	var height = 500;
	var lowColor = '#c51b8a'
	var highColor = '#fde0dd'
	// D3 Projection
	var projection = d3.geoAlbersUsa()
	.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.geoPath() // 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);
	// Load in my states data!
	d3.csv("percent_registered.csv", function(data) {
	var dataArray = [];
	for (var d = 0; d < data.length; d++) {
	dataArray.push(parseFloat(data[d].value))
	}
	var minVal = d3.min(dataArray)
	var maxVal = d3.max(dataArray)
	var ramp = d3.scaleLinear().domain([minVal,maxVal]).range([lowColor,highColor])

	// Load GeoJSON data and merge with states data
	d3.json("us-states.json", function(json) {
	// Loop through each state data value in the .csv file
	for (var i = 0; i < data.length; i++) {
	// Grab State Name
	var dataState = data[i].state;
	// Grab data value
	var dataValue = data[i].value;
	// Find the corresponding state inside the GeoJSON
	for (var j = 0; j < json.features.length; j++) {
	var jsonState = json.features[j].properties.name;
	if (dataState == jsonState) {
	// Copy the data value into the JSON
	json.features[j].properties.value = dataValue;
	// Stop looking through the JSON
	break;
	}
	}
	}
	// 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", "#e2e3e3")
	.style("stroke-width", "1")
	.style("fill", function(d) { return ramp(d.properties.value) });

	// add a legend
	var w = 140, h = 300;
	var key = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h)
	.attr("class", "legend");
	var legend = key.append("defs")
	.append("svg:linearGradient")
	.attr("id", "gradient")
	.attr("x1", "100%")
	.attr("y1", "0%")
	.attr("x2", "100%")
	.attr("y2", "100%")
	.attr("spreadMethod", "pad");
	legend.append("stop")
	.attr("offset", "0%")
	.attr("stop-color", highColor)
	.attr("stop-opacity", 1);

	legend.append("stop")
	.attr("offset", "100%")
	.attr("stop-color", lowColor)
	.attr("stop-opacity", 1);
	key.append("rect")
	.attr("width", w - 100)
	.attr("height", h)
	.style("fill", "url(#gradient)")
	.attr("transform", "translate(0,10)");
	var y = d3.scaleLinear()
	.range([h, 0])
	.domain([minVal, maxVal]);
	var yAxis = d3.axisRight(y);
	key.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(41,10)")
	.call(yAxis)

	svg.append("text")
	.attr("class", "title")
	.attr("x", (width/2))
	.attr("y", (height/12))
	.attr("text-anchor", "middle")
	.text("Percent registered, 2016")
	.style("font-size","30px")
	.style("font-family","Helvetica Neue")
	.style("fill","#e2e3e3")
	});
	});
	</script>
	</body>
	</html>
	state	value
	Alabama	68.0
	Alaska	69.1
	Arizona	60.5
	Arkansas	65.7
	California	53.8
	Colorado	68.2
	Connecticut	63.9
	Delaware	66.8
	District Of Columbia	75.9
	Florida	59.3
	Georgia	64.1
	Hawaii	49.8
	Idaho	64.5
	Illinois	68.5
	Indiana	66.1
	Iowa	69.2
	Kansas	67.1
	Kentucky	67.3
	Louisiana	70.6
	Maine	78.5
	Maryland	67.3
	Massachusetts	68.1
	Michigan	71.3
	Minnesota	72.9
	Mississippi	78.3
	Missouri	72.1
	Montana	72.8
	Nebraska	71.7
	Nevada	61.4
	New Hampshire	73.1
	New Jersey	60.7
	New Mexico	59.2
	New York	59.0
	North Carolina	68.1
	North Dakota	72.8
	Ohio	69.5
	Oklahoma	63.7
	Oregon	67.4
	Pennsylvania	69.2
	Rhode Island	64.4
	South Carolina	69.0
	South Dakota	69.3
	Tennessee	64.3
	Texas	58.1
	Utah	66.7
	Vermont	70.2
	Virginia	69.4
	Washington	69.9
	West Virginia	63.6
	Wisconsin	74.4
	Wyoming	69.7