An animated normalized stacked barchart.

This is an animated variation of mbostock's normalized stacked barchart. When you click on a block, that block is sent to the bottom of the stack and the bars are reordered by decreasing height of that block. This allows you to compare any value in the stacks with a common baseline, eliminating a common criticism of stacked barcharts.

xxxxxxxxxx
 
<!-- get rid of legend -->
​
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  font: 10px sans-serif;
}
​
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
.bar {
  fill: steelblue;
}
​
.x.axis path {
  display: none;
}
​
.y.axis path {
  display: none;
}
​
.legend line {
  stroke: #000;
  shape-rendering: crispEdges;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="colorbrewer.js"></script>
<script src="barchart.js"></script>
</body>
​
    

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

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