D3 Examples - Small Multiple Bar Charts UK GE 2017

Small Multiple Bar Charts UK GE 2017
Sortable D3.js small multiple bar charts for the 2017 UK GE results.
Data from FT. Uses d3-tip for tooltips.
Open in full browser mode to see all 632 constituency results
xxxxxxxxxx
 
<!DOCTYPE html>
​
<html>
<meta charset="utf-8">
<head>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="d3-tip.js"></script>
  
  <style type="text/css">
  body {
    font: 11px sans-serif;
    margin: 10px;
  }
​
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
​
  .bar:hover {
    fill: #bcbcbc ;
  }
​
  .x.axis path {
    display: none;
  }
  </style>
</head>
​
<body>
Sort by
<a href="#" class="sort-btn" data-sort="Cons">Conservative</a> /
<a href="#" class="sort-btn" data-sort="Lab">Labour</a> /
<a href="#" class="sort-btn" data-sort="LD">Lib Dems</a> /
<a href="#" class="sort-btn" data-sort="Gre">Greens</a> /
<a href="#" class="sort-btn" data-sort="PC">Plaid Cymru</a> /
<a href="#" class="sort-btn" data-sort="SNP">SNP</a> /
<a href="#" class="sort-btn" data-sort="UKIP">UKIP</a>
  
  <div id="vis"></div>
<script type="text/javascript">
​
// need to switch to d3v4 and use ES6 where possible for mapping data
  
var margin = {top: 45, right: 100, bottom: 20, left: 20},
    width = 300 - margin.left - margin.right,
    height = 110 - margin.top - margin.bottom;
  
var barWidth = 50;
​
var formatPercent = d3.format(".0%");
  
var dataUrl = "https://raw.githubusercontent.com/ft-interactive/ge2017-dataset/master/financialTimes_ge2017_dataset.csv";
​
var partyColours = {
  "Cons": "#0087dc",
  "Gre": "#008066",
  "Lab": "#d50000",
  "LD": "#FDBB30",
  "PC": "#3F8428",
  "SNP": "#FFF95D",
  "UKIP": "#B3009D"
};
​
var x = d3.scaleBand()
    .range([0, width])
        .round(0.1);
​
// Scales. Note the inverted domain fo y-scale: bigger is up!
var y = d3.scaleLinear()
    .range([height, 0]);
​
var xAxis = d3.axisBottom()
    .scale(x);
​
var yAxis = d3.axisLeft()
    .scale(y)
    .tickFormat(formatPercent);
​
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-1, 0])
  .html(function(d) {
    return Math.round(d.percent) + "%";
  })
​
var nestedGeData = [];
  
d3.selectAll(".sort-btn")
  .on("click", function(d) {
    d3.event.preventDefault();
    sortByParty(this.dataset.sort);
  });
​
d3.csv(dataUrl, function(geData) {
        
    var parties = [
      "Cons",
      "Gre",
      "Lab",
      "LD",
      "PC",
      "SNP",
      "UKIP"
    ]
 
    geData.forEach(function(g) {
      var key = g.PCON15CD;
      var seat = g.seat;
​
      var values = [];
      if (g.con_PC_2017 !== "NA") {
        values.push({
          "party": "Cons",
          "percent": +g.con_PC_2017
        });
      }
      if (g.green_PC_2017 !== "NA") {
        values.push({
          "party": "Gre",
          "percent": +g.green_PC_2017
        });
      }
      if (g.lab_PC_2017 !== "NA") {
        values.push({
          "party": "Lab",
          "percent": +g.lab_PC_2017
        });
      }
      if (g.ld_PC_2017 !== "NA") {
        values.push({
          "party": "LD",
          "percent": +g.ld_PC_2017
        });
      }
      if (g.pc_PC_2017 !== "NA") {
        values.push({
          "party": "PC",
          "percent": +g.pc_PC_2017
        });
      }
      if (g.snp_PC_2017 !== "NA") {
        values.push({
          "party": "SNP",
          "percent": +g.snp_PC_2017
        });
      }
      if (g.ukip_PC_2017 !== "NA") {
        values.push({
          "party": "UKIP",
          "percent": +g.ukip_PC_2017
        });
      }
      
      nestedGeData.push({
        "key": key,
        "seat": seat,
        "values": values
      })
    });
​
    x.domain(parties);    
​
    y.domain([0, 100]);
​
    var svg = d3.select("#vis").selectAll("svg")
      .data(nestedGeData)
      .enter()
      .append("svg:svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .each(multiple);
​
    svg.append("g")
        // Hide y axis
        // .attr("class", "y axis")
        // .call(yAxis)
      .append("text")
      .attr("x", 0)
      .attr("y", 0)
      .attr("dy", "-1em")
      .attr("text-anchor", "start")
      .attr("font-size", "1.1em")
      .text(function(d) { return d.seat});
​
    svg.call(tip);
​
  });
  
  function multiple(constituency) {
      
      var svg = d3.select(this);
      var x = d3.scaleBand();
      
      var sortedValues = constituency.values.sort(function(a, b) {
        return b.percent - a.percent;
      });
    
      x.domain(sortedValues.map(function(d) { return d.party; }))
​
      var calculatedWidth = barWidth * (x.domain().length - 1);
​
      x.range([0, calculatedWidth])
        .round(0.1);      
      
      
      var xAxis = d3.axisBottom()
        .scale(x);
      
      var yAxis = d3.axisLeft()
        .scale(y)
        .tickFormat(formatPercent);
        
      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
      
      svg.selectAll(".bar")
        .data(function(d) { return d.values; })
        .enter()
        .append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.party); })
        .attr("width", x.bandwidth())
        .attr("y", function(d) { return y(d.percent); })
        .attr("height", function(d) { return height - y(d.percent); })
        .attr("fill", function(d) {return partyColours[d.party]})
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide);
    }
  
    function sortByParty(partyName) {
      
      d3.selectAll("svg").remove();
      
      var filteredData = nestedGeData.filter(function(a) {
        for (var i in a.values) {
          if (a.values[i].party === partyName) {
            return true;
          }
        }
        return false;
      });
    
      var nestedGeDataSorted = filteredData.sort(function(a, b) {
        var aPc;
        var bPc;
        for (var i in a.values) {
          if (a.values[i].party === partyName) {
            aPc = a.values[i].percent;
          }
        }
        for (var i in b.values) {
          if (b.values[i].party === partyName) {
            bPc = b.values[i].percent;
          }
        }
        return bPc - aPc;
      });
      
      var svg = d3.select("#vis").selectAll("svg")
        .data(nestedGeDataSorted)
        .enter()
        .append("svg:svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .each(multiple);
​
        svg.append("g")
          // Hide y axis
          // .attr("class", "y axis")
          // .call(yAxis)
        .append("text")
        .attr("x", 0)
        .attr("y", 0)
        .attr("dy", "-1em")
        .attr("text-anchor", "start")
        .attr("font-size", "1.1em")
        .text(function(d) { return d.seat});
    }
 
​
</script>
</body>
</html>
    