your-donations.html

---
layout: landing-newpledge
title: MAYDAY.US - Our Donors
omit_title_suffix: true
cssid: graph
og_image: https://mayday.us/images/mayday-genericshare.jpg
og_title: Our Donors
og_description: Join the kickstarted campaign to put government back in the hands of the people. Pledge MAYDAY.US now.
pledgeTitle: Our Donors
---

{% capture content %}
<div class="container">
<div class="col-md-12">
  <h2>67,547 donations for over $10,947,947 from across the nation.</h2>
  <h4>This is our final data release from the 2014 election cycle, from our launch on May 1st through Election Day on November 4th. You can find our <a href="http://blog.mayday.us/post/102963766405/data-release-7-post-election-data-release">recent data release here</a>, and we'll be releasing our FEC reports in early December. You can read more about our <a href="http://blog.mayday.us/post/98259998165/our-fundraising-so-far" target="_blank">fundraising history and transparency pledge here.</a></h4>
  <div class='map-container'>
    <div id='map'><span class="loading">Loading donation database, please wait...</span></div>
    <div id='circle-legend'>
      Circles represent the total number of donations received from each zipcode. Select a circle to get the details.
    </div>
  </div>
</div>
<div class="col-md-12">
  <div class="col-md-6">
    <h3>
      Individual Donations by Grouped Amount/Value <br />
      <small>Click bars to see where the donations come from and exact amounts included in each segment.</small>
    </h3>
      <a href="#" class="toggle measure-count" data-measure="count">Number of Donations</a>
      <a href="#" class="toggle measure-sum" data-measure="sum">Value of Donations</a>
    </p>
    <div class="graph">
      <div class="histogram loading">Loading donation database, please wait...
      </div>

      <div class="histogram">
      <svg></svg>
      </div>
      <table id="states-drilldown" style="display:none">
        <thead>
          <tr>
            <td colspan="2">
              <p>Donations of <span id="binLabel"></span></p>
              <div><span id="binMeasureLabel"></span></span></div>
            </td>
          </tr>
        </thead>
        <tbody class='histogram'></tbody>
      </table>
    </div>
  </div>
  <div class="col-md-6">
    <h3>Download Anonymized Donor Data</h3>
    <div class="donorDownload">
      <p> MAYDAY is committed to transparency. Every two weeks, we'll release aggregated donation data &ndash; anonymized for donors under $10,000. You can download the full data below, or see our <a href="https://github.com/MayOneUS/homepage_redesign/commits/gh-pages/data/donors.csv" title="MAYDAY PAC Donor data release history">data release full history on github here</a>.</p>
      <a href="/data/donors.csv" title="" class="btn downloadBtn">Download</a> <a href="/your-donations-top-donors" title="" class="btn downloadBtn">Top Donors</a>
    </div>
  </div>
  <div class="col-md-6 targetedWrapper">
    <h3>Donation Breakdown by Targeting</h3>
    <table class="targetedBreakout">
      <thead>
        <tr>
          <th></th>
          <th>Less than $10k</th>
          <th>$10k or More</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Democrats Only</td>
          <td>$938,219</td>
          <td>$60,164</td>
        </tr>
        <tr>
          <td>Republicans Only</td>
          <td>$27,998</td>
          <td>$0</td>
        </tr>
        <tr>
          <td>Whatever Helps</td>
          <td>$3,795,726</td>
          <td>$6,125,840</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

</div>
<style>
.map-container{margin-bottom:15px;}
#map .loading{display:block;text-align:center;font-size:1.6em;line-height:200px;color:#313945}
#map, #map .loading{font-family:'Merriweather', Georgia, 'Times New Roman', Times, serif}
  .subpage-content h3{line-height:normal}
  .donorDownload{font-size:14px}
    .downloadBtn{font-size:1.2em;background-color:#ccc;float:right;margin-left:15px}
  .subpage-content h2{padding:0 0 5px}
  .subpage-content h4{padding:0.5em 0 0.7em}
  .map-container{position:relative;padding:5px;border:1px solid #ddd;margin-bottom:10px}
  #circle-legend{position:absolute;right:25px;bottom:40px;width:40%;max-width:530px;background:rgba(255,255,255,0.6);padding:6px;font-size:1.2em;text-shadow:0 0 0.2em #fff}
  #map{position:relative;height:400px}
  .leaflet-popup-content{font-size:12px}
  .leaflet-popup-content b{color:#cc3333}
  p{font-size:14px;margin:10px 0}
  .toggle:first-child{margin-left:12px}
  .toggle,
  .toggle:hover,
  .toggle:active{display:inline-block;padding:4px 10px;border:1px solid #ddd;text-decoration:none!important;-webkit-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;transition:all 200ms linear}
  .toggle:hover,
  .toggle.active{background:#eee}
  .histogram{font-size:14px;font-family:'Questrial',Arial,sans-serif}

  .graph{position:relative;min-height:270px}
  #states-drilldown{border-collapse:inherit;position:absolute;top:0;right:0;width:185px;border:1px solid #537288;font-size:12px;background-color:white;z-index:100}
  #states-drilldown thead tr td{padding:10px 10px}
  #states-drilldown thead tr td p{margin:0}
  #states-drilldown tbody{display:block;padding:10px;height:256px;line-height:16px;overflow-y:scroll;border-top:1px solid #ddd;background-color:#efefef}
  #states-drilldown tbody tr td{width:60px}
  @media (max-width:1200px) and (min-width:950px){
    #states-drilldown{position:relative;top:0;left:0;width:50% }
    #states-drilldown tbody{overflow-y:visible;height:initial}
  }

  .binLabel{cursor:pointer}
  .binLabel:hover,
  .binLabel.hover{fill:#537288}
  .bar{cursor:pointer;fill:#8FAEC3;-webkit-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;transition:all 200ms linear}
  .bar:hover,
  .bar.hover{fill:#537288}

.targetedWrapper{margin-top:20px;}
  .targetedBreakout, .targetedBreakout table{width:100%;}
    .targetedBreakout {max-width:300pxfloat:none}
    .targetedBreakout h2{}
    .targetedBreakout{border:2px solid #ddd}
      .targetedBreakout thead{margin-bottom:6px}
      .targetedBreakout th{background:#eee;text-shadow:1px 1px #fff;font-size:16px;line-height:30px}
      .targetedBreakout th:first-child {background:none;}
      .targetedBreakout tbody tr{border-top:1px solid #ddd;}
      /*.targetedBreakout tr:nth-child(even){background:#f1f1f1}*/
        /*.targetedBreakout td:nth-child(2), .targetedBreakout th:nth-child(2) {text-align:center}*/
        .targetedBreakout td:first-child{padding-left:8px;background:#eee;}
        .targetedBreakout td, .targetedBreakout th{padding:2px 4px;white-space:nowrap;text-align:right;}
</style>
{% endcapture %}

{% capture footer_content %}
<script>L_PREFER_CANVAS = true;</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" rel="stylesheet" />
<script src='//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js'></script>
<script>
  // ----------------------
  // set up basemap
  // ----------------------
  var map = L.map('map',{
    minZoom:4,
    maxZoom:10
  }).setView([40,-98],4);

  L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map tiles and data by OpenStreetMap, under CC BY SA.'
  }).addTo(map);

  function assignRadius(value){
    if (value >=0 && value <= 5){
      return 2
    } else if (value > 5 && value <=10) {
      return 5
    } else if (value > 10 && value <= 50) {
      return 8
    } else if (value > 50 && value <= 100) {
      return 11
    } else if (value > 100 && value <= 200){
      return value / 10
    } else if (value > 200 && value <= 500) {
      return value / 8
    } else if (value > 500 && value <= 1000 ){
      return value / 7
    } else if (value > 1000) {
      return 150
    }
  }

  d3.csv('{{site.baseurl}}/data/pledges_for_map.csv',function(error,data){

    // filter out invalid zipcode
    var valid = data.filter(function(d){
      return d.zip.length=== 5 && d.longitude.length != 0;
    })

    var features = valid.map(function(d){
      return {
        'type':'Feature',
        'geometry':{
          'type':'Point',
          'coordinates':[parseFloat(d.longitude),parseFloat(d.latitude)]
        },
        'properties':{
          'zip':d.zip,
          'count':parseInt(d.count),
          'dollars':parseInt(d.dollars)
        }
      }
    });

    var circleStyle = {
      color:'#000000',
      fillColor:'#cc3333',
      weight:0.25,
      opacity:0.8,
      fillOpacity:0.5
    };

    var featureLayer = L.geoJson(features,{
      pointToLayer:function(feature,latlng){
        var circle = new L.circleMarker(latlng, circleStyle);
        circle.setRadius(assignRadius(feature.properties.count));
        return circle
      },
      onEachFeature:function(feature,layer){
        var popupContent = 'Zipcode ' + feature.properties.zip + ': </br>' +
        '<b>' + feature.properties.count + '</b> Donations Totals <b>$' + feature.properties.dollars + '</b> Dollars';

        layer.bindPopup(popupContent);
      }
    });

    map.addLayer(featureLayer);

  });

  // ----------------------
  // set up graph
  // ----------------------
  function getKey(collection){
    return _.chain(collection)
      .pairs()
      .sortBy(function(a){return parseInt(a[0]);})
      .map(function(a){return a[0];})
      .value();
  }

  function getValue(collection){
    return _.chain(collection)
      .pairs()
      .sortBy(function(a){return parseInt(a[0]);})
      .map(function(a){return a[1];})
      .value()
  }

  d3.csv('{{site.baseurl}}/data/pledges.csv',function(error,data){

    data.forEach(function(d) {
      d.dollars = parseInt(d.dollars, 10);
    });

    // ----------------------
    // format data for graph
    // ----------------------

    // Create kinda-log approximately-doubling histogram bins to capture the spread of different donation sizes
    var binThresholds = [1, 11, 21, 41, 81, 151, 301, 501, 1001, 2001, 3001, 5001, 50001, 100001, 250001, 500001],
        histogram = (d3.layout.histogram()
                     // each donation is bucketed by the value of the donation
                     .value(function(d) {return d.dollars; })
                     .bins(binThresholds))(data);

    // Parse the buckets: Calculate the different ways of measures buckets: sum, count
    histogram.forEach(function(bucket, i) {
      bucket.measures = {
        nil: {
          value: 0,
          label: '',
          byState: []
        },
        sum: {
          value: d3.sum(bucket, function(d) {return d.dollars;})
          // label: below
        },
        count: {
          value: bucket.length
          // label: below
        }
      };

      bucket.measures.sum.label = numeral(bucket.measures.sum.value).format('$0,0');
      bucket.measures.count.label = numeral(bucket.measures.count.value).format('0,0');

      bucket.label = numeral(bucket.x + bucket.dx - 1).format('$0,0');
      bucket.rangeLabel = numeral(bucket.x).format('$0,0') + '-' +
                          numeral(bucket.x + bucket.dx - 1).format('$0,0')

      bucket.measures.sum.drilldownLabel = 'Total value: ' + bucket.measures.sum.label;
      bucket.measures.count.drilldownLabel = bucket.measures.count.label + ' donations';
    });

    // subdivide each measure (sum, count) by US states associated with buckets' donations
    // we're creating a schema: bucket.measures.<measure>.byState = [{state: {string}, label: {string}}, ...]
    // (where each byState is sorted in desc order)
    histogram.forEach(function(bucket) {
      var statesIdx = {};
      bucket.forEach(function(donation) {
        if (!donation.state)
          donation.state = 'n/a';

        if (!statesIdx[donation.state]) {
          statesIdx[donation.state] = {count: 0, sum: 0};
        }

        statesIdx[donation.state].count++;
        statesIdx[donation.state].sum += donation.dollars;
      });

      var bucketByState = _.chain(_.keys(statesIdx))
                          .map(function(state) {
                            return {
                              state: state,
                              count: statesIdx[state].count,
                              sum: statesIdx[state].sum
                            };
                          })
                          .value();

      bucket.measures.sum.byState = _.sortBy(bucketByState, function(stateSummary) {
                                      return -stateSummary.sum;
                                    })
                                    .map(function(stateSummary) {
                                      return {
                                        state: stateSummary.state,
                                        //value: stateSummary.sum,
                                        label: numeral(stateSummary.sum).format('$0,0')
                                      };
                                    });

      bucket.measures.count.byState = _.sortBy(bucketByState, function(stateSummary) {
                                        return -stateSummary.count;
                                      })
                                      .map(function(stateSummary) {
                                        return {
                                          state: stateSummary.state,
                                          //value: stateSummary.count,
                                          label: numeral(stateSummary.count).format('0,0')
                                        };
                                      });
    });

    // ----------------------
    // set up graph
    // ----------------------
    var margin = {right:163, left:70},
      width = 500 - margin.left - margin.right,
      barHeight = 22,
      height = barHeight * histogram.length;

    var svg = d3.select('.histogram > svg')
      .attr('width',width + margin.left + margin.right)
      .attr('height', height )
    .append('g')
      .attr('transform','translate(' + margin.left + ',0)');

    // widths for each measure
    var measureScales = {
      nil: function(val) {return 0;},
      sum:   d3.scale.linear()
             .range([0, width])
             .domain([0, d3.max(histogram, function(bin) { return bin.measures.sum.value; })]),
      count: d3.scale.linear()
             .range([0, width])
             .domain([0, d3.max(histogram, function(bin) { return bin.measures.count.value; })])
    }

    // How many bars?
    var y = d3.scale.ordinal()
      .rangeRoundBands([0, height], .1)
      .domain(histogram.map(function(bin, i) {return i;}));

    // bind data
    var binGs = svg.selectAll('.bar')
                  .data(histogram)
                .enter().append('g')
                  .attr('class','barGroup')
                  .attr('transform', function(d, i) { return 'translate(0,' + y(i) + ')'; });


    // Render bin and text labels el's (note: rendering with nil/0-state... changeMeasure() sets the actual sizes)
    var currentMeasure = 'nil';

    // bin labels
    binGs.append('text')
      .attr('class','binLabel')
      .attr('x', '-70')
      .attr('y', y.rangeBand()-8)
      .attr('dy', '.35em')
      .text(function(bucket) {
          return bucket.label;
      })
      .on('click',function(d){
        clearSelection();

        d3.select(this).classed({'hover':true});
        d3.select(this.parentNode.childNodes[0]).classed({'hover':true}); // rect

        updateTable(d);
      });

    // generate bars
    binGs.append('rect')
      .attr('class','bar')
      .attr('width', 2) // 2 to give small visible width
      .attr('height', y.rangeBand())
      .on('click',function(d){
        clearSelection();

        d3.select(this).classed({'hover':true,'clicked':true});
        d3.select(this.parentNode.childNodes[1]).classed({'hover':true}); // text left

        updateTable(d);
      });

    // bin measure labels
    binGs.append('text')
      .attr('class','binValueLabel')
      .attr('x', 0)
      .attr('y',y.rangeBand()-8)
      .attr('dy','.35em')
      .text('');

    $('.histogram.loading').hide();

    // ----------------------
    // events
    // ----------------------

    /**
     * Change (and animate) the histogram to show a different measure of the bins
     * @param {'sum' | 'count' | 'nil'} m Which measure to show
     */
    window.changeMeasure = function changeMeasure(m) {
      if (currentMeasure === m)
        return;
      else
        currentMeasure = m;

      // update the drilldown table
      updateTable();

      // define common transition
      d3.transition()
        .duration(750)

      // apply transition to bars
      .each(function() {
        binGs.selectAll('rect').transition()
        .attr('width', function(bin){return measureScales[m](bin.measures[m].value)+2;}); // plus 2 to give small counts a visible width
      })

      // apply transition to text labels
      .each(function() {
        binGs.selectAll('text.binValueLabel')
          .style('opacity', 0)
        .transition()
          .style('opacity', 1)
          .attr('x', function(bin) { return measureScales[m](bin.measures[m].value) + 10; })
          .text(function(bin) { return bin.measures[m].label; })
      });
    };

    function clearSelection(){
      //d3.select('.states').remove();
      d3.selectAll('rect').classed({'hover':false});
      d3.selectAll('text').classed({'hover':false});
    };

    var lastBin;
    function updateTable(binData){

      if (binData && binData !== lastBin)
        lastBin = binData;
      else if (!binData)
        binData = lastBin;
      // else, we may be updating measure, re-run anyways.

      if (!binData)
        return; // no bin has been selected yet

      d3.select('#states-drilldown').style('display', 'table');

      var m = currentMeasure;

      $('#binLabel').html(binData.rangeLabel);
      $('#binMeasureLabel').html(binData.measures[m].drilldownLabel);

      // clear out previous rows
      d3.select('#states-drilldown tbody').selectAll('tr').remove();

      //make new rows
      var rows = d3.select('#states-drilldown tbody').selectAll('tr')
                   .data(binData.measures[m].byState)
                 .enter().append('tr');

      rows.append('td')
      .html(function(d) { return d.state; });

      rows.append('td')
      .html(function(d) { return d.label; });
    }


    // create scrollspy the starts the histogram when it first comes into view
    var triggerPageY = $('div.histogram > svg').position().top + 200;
    function scrollspy() {
      if (window.pageYOffset + $(window).height() < triggerPageY)
        return;

      setTimeout(function() {
        $('.toggle.measure-count').trigger('click');
      }, 250);
      $(window).off('scroll', scrollspy);
    };

    $(window).on('scroll', scrollspy);
    scrollspy(); // try it once incase user already here

  });

  // ----------------------
  // page interaction
  // ----------------------
  $('.toggle').on('click',function(e){
    e.preventDefault();
    $('.toggle').removeClass('active');
    $(this).toggleClass('active');

    changeMeasure($(this).attr('data-measure'));
  });
</script>
{% endcapture %}

{% include pledgeSubpage-fullpage.html %}