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 = '#2ca25f'
var highColor = '#e5f5f9'

// 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_voted.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 voting, 2016")
	      .style("font-size","30px")
	      .style("font-family","Helvetica Neue")
	      .style("fill","#e2e3e3")
  });
});
</script>
</body>
</html>

## percent_voted.csv

          
            state
            value

            
              Alabama
              56.4

            
              Alaska
              59.4

            
              Arizona
              53.3

            
              Arkansas
              56.0

            
              California
              48.2

            
              Colorado
              63.8

            
              Connecticut
              57.5

            
              Delaware
              57.2

            
              District Of Columbia
              68.7

            
              Florida
              52.9

            
              Georgia
              55.7

            
              Hawaii
              43.3

            
              Idaho
              58.3

            
              Illinois
              58.8

            
              Indiana
              56.0

            
              Iowa
              60.7

            
              Kansas
              58.0

            
              Kentucky
              55.3

            
              Louisiana
              59.7

            
              Maine
              71.3

            
              Maryland
              59.2

            
              Massachusetts
              61.7

            
              Michigan
              61.8

            
              Minnesota
              65.3

            
              Mississippi
              66.7

            
              Missouri
              62.8

            
              Montana
              65.2

            
              Nebraska
              63.4

            
              Nevada
              53.5

            
              New Hampshire
              66.9

            
              New Jersey
              53.4

            
              New Mexico
              49.4

            
              New York
              50.7

            
              North Carolina
              61.6

            
              North Dakota
              62.1

            
              Ohio
              61.4

            
              Oklahoma
              53.2

            
              Oregon
              61.0

            
              Pennsylvania
              60.2

            
              Rhode Island
              55.5

            
              South Carolina
              59.8

            
              South Dakota
              57.3

            
              Tennessee
              52.0

            
              Texas
              47.7

            
              Utah
              58.9

            
              Vermont
              61.0

            
              Virginia
              62.6

            
              Washington
              60.5

            
              West Virginia
              50.4

            
              Wisconsin
              68.7

            
              Wyoming
              63.5

## 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 = '#2ca25f'
	var highColor = '#e5f5f9'

	// 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_voted.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 voting, 2016")
	.style("font-size","30px")
	.style("font-family","Helvetica Neue")
	.style("fill","#e2e3e3")
	});
	});
	</script>
	</body>
	</html>
	state	value
	Alabama	56.4
	Alaska	59.4
	Arizona	53.3
	Arkansas	56.0
	California	48.2
	Colorado	63.8
	Connecticut	57.5
	Delaware	57.2
	District Of Columbia	68.7
	Florida	52.9
	Georgia	55.7
	Hawaii	43.3
	Idaho	58.3
	Illinois	58.8
	Indiana	56.0
	Iowa	60.7
	Kansas	58.0
	Kentucky	55.3
	Louisiana	59.7
	Maine	71.3
	Maryland	59.2
	Massachusetts	61.7
	Michigan	61.8
	Minnesota	65.3
	Mississippi	66.7
	Missouri	62.8
	Montana	65.2
	Nebraska	63.4
	Nevada	53.5
	New Hampshire	66.9
	New Jersey	53.4
	New Mexico	49.4
	New York	50.7
	North Carolina	61.6
	North Dakota	62.1
	Ohio	61.4
	Oklahoma	53.2
	Oregon	61.0
	Pennsylvania	60.2
	Rhode Island	55.5
	South Carolina	59.8
	South Dakota	57.3
	Tennessee	52.0
	Texas	47.7
	Utah	58.9
	Vermont	61.0
	Virginia	62.6
	Washington	60.5
	West Virginia	50.4
	Wisconsin	68.7
	Wyoming	63.5