D3 Examples - US grid campaign finance

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head> 
    <meta charset="utf-8">
    <link rel = "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
    <style>
​
    .state rect {
      fill: #dedede;
    }
​
    .state text {
      font: 12px sans-serif;
      text-anchor: middle;
    }
​
    .state--selected rect {
      fill: #9f4a6c;
    }
​
    .state--selected text {
      fill: white;
    }
​
    </style>
  <head>
​
  <body>
    <div class="container">
      <h1> Who's Giving Them Money? </h1>
​
      <div class="row">
          <div class="col-sm-6">
        <p> A look at the individual contributions to prominent candidates in the 2016 presidential campaign. The visualization below looks at the amount per 1,000 persons in each state of the US. Data has been sourced from the <strong> Federal Election Commission </strong> website, and is from April 1, 2015 to September 30, 2015. </p>
        </div>
      </div>
    <svg width="960" height="500"></svg>
<script id="grid" type="text/plain">
                              ME
               WI          VT NH
WA ID MT ND MN IL MI    NY MA
OR NV WY SD IA IN OH PA NJ CT RI
CA UT CO NE MO KY WV VA MD DE
   AZ NM KS AR TN NC SC
         OK LA MS AL GA
HI AK    TX             FL
    </script>
    <div id="myButtons"></div>
    
    <script>
        var tooltip = d3.tip().attr('class', 'd3-tip').html(
              function(d) { 
                return '$' + d['Amount'];
            });              
​
        var candidate_map = {
              "rubio": "Marco Rubio"
            , "clinton": "Hillary Clinton"
            , "trump":  "Donald Trump"
            , "bush" : "Jeb Bush"
            , "sanders" : "Bernie Sanders"
            , "cruz" : "Ted Cruz"
          };
​
        var buttons = d3.select("#myButtons").selectAll("button");
        var myData;
​
        
        d3.csv("Candidates.csv", function(error, data) {
            myData = data;
            buttonize(myData);
        });
​
        var states = [];
​
        d3.select("#grid").text().split("\n").forEach(function(line, i) {
          var re = /\w+/g, m;
          while (m = re.exec(line)) states.push({
            name: m[0],
            
            x: m.index / 3,
            y: i
          });
        });
​
        var svg = d3.select("svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height");
​
​
        var gridWidth = d3.max(states, function(d) { return d.x; }) + 1,
            gridHeight = d3.max(states, function(d) { return d.y; }) + 1,
            cellSize = 50;
​
         svg.call(tooltip);
            
        function update(candidate, data) {
          data = data.filter(function(d) { return d["Candidate"] = candidate;});
​
          console.log(data);
​
          svg.selectAll("g").remove();
​
          data = data.map(function(d) {
              d.value = +d["Amount"];
              return d;
          });
​
        var colorScale = d3.scale.linear()
        .domain([0, d3.max(data, function (d) {
          return d.Amount;}
          )])
        .range(["#ffffff", "#db0015"]);
​
         var state = svg.append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
          .selectAll(".state")
            .data(states)
          .enter()
                .append("g")
            .attr("class", function(d) { return "state"; })
            .attr("transform", function(d) { return "translate(" + (d.x - gridWidth / 2) * cellSize + "," + (d.y - gridHeight / 2) * cellSize + ")"; });
​
        state.append("rect")
            .attr("x", -cellSize / 2)
            .attr("y", -cellSize / 2)
            .attr("width", cellSize - 1)
            .attr("height", cellSize - 1)
            .style({
              fill: function(d) {
                return colorScale(d.Amount); }
            })
​
        state.append("text")
            .attr("dy", ".35em")
            .text(function(d) { return d.name; });
        }
​
        function choose(candidate) {
              update(candidate, myData);
          }
​
          function buttonize() {
              var candidates = d3.nest()
                        .key(function(d) { return d.Candidate; })
                        .map(myData);
                        
               d3.select("#myButtons").selectAll("button")
                  .data(d3.keys(candidates))
                .enter().append("button")
                  .attr("type", "button")
                  .attr("id", function(d) { return d; })
                  .attr("class", "btn btn-primary")
                  .on("click", function(d) { choose(d); })
                .append("text")
                  .text(function(d) { return candidate_map[d] || d; })              
          } // buttonize()
            
      
    </script>
   </div> 
  </body>
</html>
    