Animated Sort: Small Multiples Single SVG

Animated sorting of small multiple bar charts for the 2017 UK GE results in a single SVG using d3-grid

Data from FT.

Uses d3-tip for tooltips.

forked from tlfrd's block: Small Multiples UK GE 17 Single SVG

forked from tlfrd's block: Animated Sort: Small Multiples Single SVG

<!DOCTYPE html>

<html>
<meta charset="utf-8">
<head>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="d3-tip.js"></script>
  <script src="d3-grid.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>

  
<div id="vis"></div>
<script type="text/javascript">
  
var innerPadding = 30;

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 rectGrid = d3.grid()
	.bands()
	.size([1000, 1000]);
    
var x = d3.scaleBand()
    .range([0, rectGrid.nodeSize()[0]])
		.round(0.1);

// Scales. Note the inverted domain fo y-scale: bigger is up!
var y = d3.scaleLinear()
    .range([rectGrid.nodeSize()[1] - innerPadding, 0]);

var xAxis = d3.axisBottom()
    .scale(x);

var yAxis = d3.axisLeft()
    .scale(y);

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-1, 0])
  .html(d => Math.round(d.value.percent) + "%" );
  
var svg = d3.select("body").append("svg")
	.attr("width", 1200)
	.attr("height", 1200)
.append("g")
	.attr("transform", "translate(70, 70)")
  .attr("class", "charts");

var nestedGeData = [];
  
d3.selectAll(".sort-btn")
  .on("click", function(d) {
    d3.event.preventDefault();
  	updatedData = sortByParty(nestedGeData, this.dataset.sort);
  	update(updatedData);
  });

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;

});
  
  function multipleEnter(constituency) { 
      var barChart = d3.select(this);
    
      var x = d3.scaleBand();
      
      var sortedValues = constituency.values.sort((a, b) => 
        b.percent - a.percent
      );
	
      x.domain(sortedValues.map(d => d.party));

x.range([0, rectGrid.nodeSize()[0] - (innerPadding / 2)])
        .round(0.1);      
      
      var xAxis = d3.axisBottom()
        .scale(x)
      	.tickFormat(d => d.slice(0, 2));
      
    	y = d3.scaleLinear()
    		.range([rectGrid.nodeSize()[1] - innerPadding, 0])
      	.domain([0, 100]);
        
      var yAxis = d3.axisLeft()
        .scale(y)
        .tickFormat(formatPercent);
      
    	barChart
      	.append("g")
        .attr("class", "x axis")
        .call(xAxis)
      	.transition().duration(500)
        .delay((d, i) => i * 20)
        .attr("transform", function(d) {
        	return "translate(" + d.x + "," + (d.y + rectGrid.nodeSize()[1] - innerPadding) + ")";
      	})
      
      barChart.selectAll(".bar")
      	.data(d => d.values.map(function(a) {
        	return {
           	properties: {
              key: d.key,
              seat: d.seat,
              x: d.x,
              y: d.y
            },
            value: a
          }
      	}))
      .enter()
      	.append("rect")
      	.attr("class", "bar")
      	.attr("x", d => x(d.value.party))
	     	.attr("width", x.bandwidth())
    		.attr("y", d => y(d.value.percent))
      	.attr("height", d => rectGrid.nodeSize()[1] - y(d.value.percent) - innerPadding)
      	.attr("fill", d => partyColours[d.value.party])
      	.on('mouseover', tip.show)
      	.on('mouseout', tip.hide)
        .transition().duration(500)
        .delay((d, i) => i * 20)
      	.attr("transform", function(d) {
        	return "translate(" + d.properties.x + "," + d.properties.y + ")";
      	})
        	
    	barChart
        .append("text")
      	.attr("class", "label")
        .attr("dy", "-1em")
        .attr("text-anchor", "start")
        .attr("font-size", "1em")
        .text(d => { 
          if (d.seat.length < 12) {
            return d.seat;
          } else {
            return d.seat.slice(0, 12) + "..."; 
          }	
        })
      	.transition().duration(500)
        .delay((d, i) => i * 20)
        .attr("transform", function(d) {
        	return "translate(" + d.x + "," + (d.y + (innerPadding / 2)) + ")";
      	})
    }
  
  	function multipleUpdate(constituency) {
      // some duplication here that should be removed
      var barChart = d3.select(this);
    
      var x = d3.scaleBand();
      
      var sortedValues = constituency.values.sort((a, b) => 
        b.percent - a.percent
      );
	
      x.domain(sortedValues.map(d => d.party));

x.range([0, rectGrid.nodeSize()[0] - (innerPadding / 2)])
        .round(0.1);      
      
      var xAxis = d3.axisBottom()
        .scale(x)
      	.tickFormat(d => d.slice(0, 2));
      
    	y = d3.scaleLinear()
    		.range([rectGrid.nodeSize()[1] - innerPadding, 0])
      	.domain([0, 100]);
        
      var yAxis = d3.axisLeft()
        .scale(y)
        .tickFormat(formatPercent);
      
      barChart.select("g.x.axis")
      	.transition().duration(500)
//         .delay((d, i) => i * 20)
        .attr("transform", function(d) {
        	return "translate(" + d.x + "," + (d.y + rectGrid.nodeSize()[1] - innerPadding) + ")";
      	})
      
      barChart.selectAll(".bar")
      	.data(d => d.values.map(function(a) {
        	return {
           	properties: {
              key: d.key,
              seat: d.seat,
              x: d.x,
              y: d.y
            },
            value: a
          }
      	}))
      	.transition().duration(500)
        .delay((d, i) => i * 20)
      	.attr("transform", function(d) {
        	return "translate(" + d.properties.x + "," + d.properties.y + ")";
      	});
      	
        barChart.select("text.label")
          .transition().duration(500)
          .delay((d, i) => i * 20)
          .attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
          });
    }
  
  	function sortByParty(nestedGeData, partyName) {
      
      var sortedDataSet = nestedGeData
      .slice(0, 100);
                
//       sortedDataSet = sortedDataSet.filter((a) => {
//         for (var i in a.values) {
//           if (a.values[i].party === partyName) {
//             return true;
//           }
//         }
//         return false;
//       });
    	
      sortedDataSet = sortedDataSet.sort((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;
      });
      
      return sortedDataSet; 
      
    }
  
  	function update(data) {
      var update = svg.selectAll("g")
      	.data(rectGrid(data), d => d.key);
      
      var enter = update.enter()
      	.append("g")
      	.attr("class", "chart");
      
      var exit = update.exit();
      
      // follow pattern https://bl.ocks.org/cmgiven/32d4c53f19aea6e528faf10bfe4f3da9
//       console.log("Update: " + update.size());
      update.each(multipleUpdate);
     
//      	console.log("Enter: " + enter.size());
      enter.each(multipleEnter);
      
//       console.log("Exit: " + exit.size());
//       exit.remove();
      
      update.merge(enter);
      
      	
    }
      
</script>
</body>
</html>

Modified http://d3js.org/d3.v4.min.js to a secure url

https://d3js.org/d3.v4.min.js