Untitled

<!DOCTYPE html>
<html>
  <head>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style>
      .axis {
        font: 10px sans-serif;
      }

      .axis path,
      .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
      }
      svg {
        background: white;
      }
      div.tooltip {
        position: absolute;
        text-align: center;
        width: 150px;
        height: 30px;
        font: 12px sans-serif;
        background: rgb(216, 213, 213);
        border-radius: 8px;
      }
    </style>
  </head>
  <body>
    <h1>VIZ GRAF</h1>
    <script>
      var votes = [];
      var eligibleVotes = [];
      var years = [];
      var dataUSA = [];

      var margin = { left: 70, right: 40, top: 20, bottom: 50 };
      var width = 800 - margin.left - margin.right;
      var height = 500 - margin.top - margin.bottom;

      d3.csv("voter_turnout.csv", function(data) {
        data.forEach(function(d) {
          if (
            d.state == "United States" ||
            d.state == "United States (Excl. Louisiana)"
          ) {
            votes.push(d.votes);
            eligibleVotes.push(d.eligible_voters);
            years.push(d.year);
            dataUSA.push(d);
          }
        });

        var x = d3.scale
          .linear()
          .domain([d3.min(years), d3.max(years)])
          .range([0, width]);
        var y = d3.scale
          .linear()
          .domain([0, d3.max(eligibleVotes)])
          .range([height, 0]);
        var xAxis = d3.svg
          .axis()
          .scale(x)
          .orient("bottom")
          .tickValues(years.reverse());
        var yAxis = d3.svg
          .axis()
          .scale(y)
          .orient("left")
          .ticks(10);

        var svg = d3
          .select("body")
          .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.bottom + margin.top)
          .append("g")
          .attr(
            "transform",
            "translate(" + margin.left + "," + margin.top + ")"
          );
        svg
          .append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
          .selectAll("text")
          .style("text-anchor", "middle");
        svg
          .append("g")
          .attr("class", "y axis")
          .call(yAxis)
          .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6);

        var valueline1 = d3.svg
          .line()
          .interpolate("linear")
          .x(function(d) {
            return x(d.year);
          })
          .y(function(d) {
            return y(d.eligible_voters);
          });

        var linechart = svg
          .append("path")
          .attr("class", "line")
          .attr("d", valueline1(dataUSA))
          .style("stroke", "blue")
          .style("fill", "none");

        var div = d3
          .select("body")
          .append("div")
          .attr("class", "tooltip")
          .style("opacity", 0);

        svg
          .selectAll("dot")
          .data(dataUSA)
          .enter()
          .append("circle")
          .attr("opacity", 0.9)
          .attr("fill", "lightblue")
          .attr("r", 4)
          .attr("cx", function(d) {
            return x(d.year);
          })
          .attr("cy", function(d) {
            return y(d.eligible_voters);
          })
          .on("mouseover", function(d) {
            div
              .transition()
              .duration(200)
              .style("opacity", 0.8);
            div
              .html(
                "Year: " +
                  d.year +
                  "<br/>" +
                  "Eligible voters: " +
                  d.eligible_voters
              )
              .style("left", d3.event.pageX + "px")
              .style("top", d3.event.pageY + 20 + "px");
          })
          .on("mouseout", function(d) {
            div
              .transition()
              .duration(500)
              .style("opacity", 0);
          });

          var valueline2 = d3.svg
          .line()
          .interpolate("basis")
          .x(function(d) {
            return x(d.year);
          })
          .y(function(d) {
            if(d.votes == "NA"){
              return y(74825832);
            } else {
              return y(d.votes);
            }
          });
          var linechart2 = svg
          .append("path")
          .attr("class", "line")
          .attr("d", valueline2(dataUSA))
          .style("stroke", "red")
          .style("fill", "none");
          svg
          .selectAll("dot")
          .data(dataUSA)
          .enter()
          .append("circle")
          .attr("opacity", 0.4)
          .attr("fill", "red")
          .attr("r", 4)
          .attr("cx", function(d) {
            return x(d.year);
          })
          .attr("cy", function(d) {
            if(d.votes == "NA"){
              return y(74825832);
            } else {
              return y(d.votes);
            }

          })
          .on("mouseover", function(d) {
            div
              .transition()
              .duration(200)
              .style("opacity", 0.8);
            div
              .html(
                "Year: " +
                  d.year +
                  "<br/>" +
                  "Voters: " +
                  d.votes
              )
              .style("left", d3.event.pageX + "px")
              .style("top", d3.event.pageY + 20 + "px");
          })
          .on("mouseout", function(d) {
            div
              .transition()
              .duration(500)
              .style("opacity", 0);
          });
      });
    </script>
  </body>
</html>