Untitled

<!DOCTYPE html>
<html>
  <head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
  </head>
  <body>
    <script>
      var width = 960;
      var height = 500;
      var projection = d3.geo.albers();
      var path = d3.geo.path().projection(projection);
      var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);
    var voteData = [];


      d3.csv("https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2018/2018-10-09/voter_turnout.csv", function(data) {
        data.forEach(function(d) {
          if (
            d.year == 2014 &&
            (d.state != "United States (Excl. Louisiana)" ||
            d.state != "United States")
          ) {
            voteData.push(d);
          }
        });


        d3.json("us-states.json", function(geojson) {

        for (var i = 0; i < voteData.length; i++) {
            var stateName = voteData[i].state;
            var stateData = voteData[i].votes;
            for (var j = 0; j < geojson.features.length; j++) {
                var state = geojson.features[j].properties.name;
                if(stateName == state) {
                    geojson.features[j].properties.votes = stateData;
                    break;
                }
            }
        }
        console.log(d3.min(voteData, function(d) { return d.votes;}))


        var states = svg
          .selectAll("path.state")
          .data(geojson.features)
          .enter()
          .append("path")
          .attr("d", path)
        .style("stroke", "#fff")
        .style("stroke-width", "1")
          .style("fill-opacity", function(d) {
            return opacity(d.votes);
          });


      });

      });
    </script>
  </body>
</html>