README.md

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    State-wise Contributions by Individual Donors 
to Donald Trump's campaign

  

  

## data.csv

        
        State
        Amount

        
        TX
        141861

        
        CA
        128439

        
        FL
        124300

        
        MA
        121155

        
        NY
        71921

        
        CO
        34771

        
        GA
        33347

        
        TN
        31178

        
        AZ
        26059

        
        LA
        23810

        
        SC
        23448

        
        PA
        22729

        
        IL
        22711

        
        OH
        20967

        
        WA
        20928

        
        NV
        18484

        
        VA
        18136

        
        NJ
        17351

        
        AL
        17068

        
        MS
        13299

        
        IA
        12973

        
        WI
        12685

        
        NC
        12621

        
        OK
        11515

        
        MD
        11377

        
        MI
        11167

        
        CT
        10321

        
        HI
        9521

        
        NH
        7855

        
        IN
        7486

        
        KS
        7303

        
        KY
        6836

        
        MN
        6373

        
        MO
        5542

        
        NE
        5255

        
        OR
        4892

        
        MT
        4700

        
        AR
        4610

        
        RI
        4383

        
        ID
        4219

        
        AK
        3324

        
        WV
        3178

        
        SD
        2950

        
        DC
        2930

        
        UT
        2587

        
        NM
        2389

        
        ND
        2249

        
        ME
        1300

        
        DE
        799

        
        WY
        775

        
        (blank)
        500

        
        VI
        250

        
        VT
        250

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<h1> State-wise Contributions by Individual Donors <br>
to Donald Trump's campaign </h1>
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
  width: 960px;
}

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
  fill-opacity: .9;
}

.x.axis path {
  display: none;
}

label {
  position: absolute;
  top: 50px;
  right: 10px;
}

svg {
padding-left: 20px;
}

</style>
<label><input type="checkbox"> Sort values</label>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 600 - margin.bottom;

//var formatPercent = d3.format(".0%");

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1, 1);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("data.csv", function(error, data) {

  data.forEach(function(d) {
    d.Amount = +d.Amount;
  });

  x.domain(data.map(function(d) { return d.State; }));
  y.domain([0, d3.max(data, function(d) { return d.Amount; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Amount");

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.State); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.Amount); })
      .attr("height", function(d) { return height - y(d.Amount); });

  d3.select("input").on("change", change);

  var sortTimeout = setTimeout(function() {
    d3.select("input").property("checked", true).each(change);
  }, 2000);

  function change() {
    clearTimeout(sortTimeout);

    // Copy-on-write since tweens are evaluated after a delay.
    var x0 = x.domain(data.sort(this.checked
        ? function(a, b) { return b.Amount - a.Amount; }
        : function(a, b) { return d3.ascending(a.State, b.State); })
        .map(function(d) { return d.State; }))
        .copy();

    svg.selectAll(".bar")
        .sort(function(a, b) { return x0(a.State) - x0(b.State); });

    var transition = svg.transition().duration(750),
        delay = function(d, i) { return i * 50; };

    transition.selectAll(".bar")
        .delay(delay)
        .attr("x", function(d) { return x0(d.State); });

    transition.select(".x.axis")
        .call(xAxis)
      .selectAll("g")
        .delay(delay);
  }
});

</script>
</body>

</html>

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png