block by zanarmstrong 1bf0556d3a4a257373a975fa309b309b

1bf0556d3a4a257373a9

Full Screen

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="2000" font-family="sans-serif" font-size="10"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-legend/1.1.0/d3-legend.js"></script>
<script>


var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
g = svg.append("g").attr("transform", "translate(" + 100 + "," + 100 + ")");

var barHeight = 15;
var gap = 2;
var hFactor = 400;

var types = ['dem', 'rep', 'lib', 'other'];



var colors = d3.scaleOrdinal()
  .domain(['dem', 'rep', 'lib', 'other'])
  .range(['#a7bfe8', // blue
    '#e8a7a7', // red
    'grey',
    '#F5F5F5' // slightly off white
    ]);
console.log(colors('dem'))


var dataMunge = function(d, i, columns) {
  c = {};
  c.state = d.State;
  c.values = {
    'dem': +d.dem,
    'rep': +d.rep,
    'lib': +d.lib,
    'other': +d.other
  };
  c.percent = {
    'dem': d.dem / d.Total,
    'rep': d.rep / d.Total,
    'lib': d.lib/d.Total,
    'other': d.other / d.Total
  };
  c.totalVotes = +d.Total;
  return c;
};

d3.csv("stateVotes2016.csv", dataMunge, function(error, data) {
  if (error) throw error;

  data.sort(function(a,b){
    return b.percent['dem'] - a.percent['dem'];
  });
  console.log(data);

  var boxes = g.append("g")
    .selectAll("g")
    .data(data);

  // dem
  var type = 'dem'
  boxes.enter().append("rect")
      .attr("x", 0)
      .attr("y", function(d,i){return i * (barHeight + gap);})
      .attr("width", function(d){return d.percent[type] * hFactor;})
      .attr("height", barHeight)
      .attr("fill", colors(type))
      .attr("stroke", "white");

  // 
  type = 'other'
  boxes.enter().append("rect")
      .attr("x", function(d){return d.percent['dem'] * hFactor + d.percent['lib'] * hFactor;})
      .attr("y", function(d,i){return i * (barHeight + gap);})
      .attr("width", function(d){return d.percent[type] * hFactor;})
      .attr("height", barHeight)
      .attr("fill", colors(type))
      .attr("stroke", "white");

  type = 'lib'
  boxes.enter().append("rect")
      .attr("x", function(d){return d.percent['dem'] * hFactor;})
      .attr("y", function(d,i){return i * (barHeight + gap);})
      .attr("width", function(d){return d.percent[type] * hFactor;})
      .attr("height", barHeight)
      .attr("fill", colors(type))
      .attr("stroke", "white");

  type = 'rep'
  boxes.enter().append("rect")
      .attr("x", function(d){return d.percent['dem'] * hFactor + d.percent['lib'] * hFactor + d.percent['other']* hFactor;})
      .attr("y", function(d,i){return i * (barHeight + gap);})
      .attr("width", function(d){return d.percent[type] * hFactor;})
      .attr("height", barHeight)
      .attr("fill", colors(type))
      .attr("stroke", "white");

  boxes.enter().append("text")
      .attr("x", function(d){return hFactor + 20;})
      .attr("y", function(d,i){return i * (barHeight + gap) + barHeight - 4;})
      .text( function (d) { return d.state; })
      .attr("font-family", "sans-serif")
      .attr("font-size", "12px")
      .attr("fill", "grey");

  var verticalMarkers = g.append("g");

  verticalMarkers.append("line")
    .attr("x1", hFactor * .51)
    .attr("x2", hFactor * .51)
    .attr("y1", 0)
    .attr("y2", (barHeight + gap) * 52)
    .attr("stroke", 'black');

  verticalMarkers.append("line")
    .attr("x1", hFactor * .49)
    .attr("x2", hFactor * .49)
    .attr("y1", 0)
    .attr("y2", (barHeight + gap) * 52)
    .attr("stroke", 'black');


});

</script>

stateVotes2016.csv

State,Total,dem,rep,lib,other
Nationwide,137045863,65844610,62979636,4488912,3732705
Alabama,2123372,729547,1318255,44467,31103
Alaska,318608,116454,163387,18725,20042
Arizona,2604657,1161167,1252401,106327,84762
Arkansas,1130635,380494,684872,29829,35440
California,14237884,8753788,4483810,478500,521786
Colorado,2780247,1338870,1202484,144121,94772
Connecticut,1644920,897572,673215,48676,25457
Delaware,443814,235603,185127,14757,8327
Florida,9501617,4504975,4617886,207043,171713
Georgia,4138772,1877963,2089104,125306,46399
Hawaii,428937,266891,128847,15954,17245
Idaho,690433,189765,409055,28331,63282
Illinois,5571950,3090729,2146015,209596,125610
Indiana,2757828,1033126,1557286,133993,33423
Iowa,1566031,653669,800983,59186,52193
Kansas,1192627,427005,671018,55406,39198
Kentucky,1924149,628854,1202971,53752,38572
Louisiana,2029032,780154,1178638,37978,32262
Maine,747927,357735,335593,38105,16494
Maryland,2781446,1677928,943169,79605,80744
Massachusetts,3325046,1995196,1090893,138018,100939
Michigan,4822952,2268839,2279543,172136,102434
Minnesota,2944813,1367716,1322951,112972,141174
Mississippi,1211088,485131,700714,14435,10808
Missouri,2827673,1071068,1594511,97359,64735
Montana,501822,177709,279240,28037,16836
Nebraska,844227,284494,495961,38946,24826
Nevada,1125385,539260,512058,37384,36683
New Hampshire,744296,348526,345790,30777,19203
New Jersey,3906723,2148278,1601933,72477,84035
New Mexico,798318,385234,319666,74541,18877
New York,7706777,4547218,2814346,176289,168924
North Carolina,4741564,2189316,2362631,130126,59491
North Dakota,344360,93758,216794,21434,12374
Ohio,5536528,2394164,2841005,174498,126861
Oklahoma,1452992,420375,949136,83481,0
Oregon,2001336,1002106,782403,94231,122596
Pennsylvania,6163012,2926441,2970733,146715,119123
Rhode Island,464144,252525,180543,14746,16330
South Carolina,2103027,855373,1155389,49204,43061
South Dakota,370093,117458,227721,20850,4064
Tennessee,2508027,870695,1522925,70397,44010
Texas,8969226,3877868,4685047,283492,122819
Utah,1143601,310676,515231,39608,278086
Vermont,315067,178573,95369,10078,31047
Virginia,3982752,1981473,1769443,118274,113562
Washington,3311630,1742718,1221747,160879,186286
West Virginia,721231,188794,489371,23004,20062
Wisconsin,2976150,1382536,1405284,106674,81656
Wyoming,255849,55973,174419,13287,12170
Washington DC,311268,282830,12723,4906,10809