Stacked-to-Grouped Bars III

Part III - Highlighted layers

One of the challenges with stacked bar charts is comparing values across bars, since the baseline is offset for all except the bottom layer. In this version, the entire layer is highlighed on mouseover, the bars adjust vertically to match up the layer baseline, and the y axis shifts to set the baseline to zero.

One remaining issue with this approach is that some bars may move above the top of the visualization. Any suggestions on how to deal with this best would be welcome!

Earlier versions:
Part I
Part II

Originally forked from mbostock's block: Stacked-to-Grouped Bars

Updated for D3 4.0

forked from chornbaker's block: Stacked-to-Grouped Bars III

forked from lorenzopub's block: Stacked-to-Grouped Bars III

forked from Thanaporn-sk's block: Stacked-to-Grouped Bars III

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: auto;
    position: relative;
    width: 960px;
}

text {
    font: 10px sans-serif;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

form {
    position: absolute;
    right: 10px;
    top: 10px;
}

</style>
<form>
    <label><input type="radio" name="mode" value="percent"> Percent</label>
    <label><input type="radio" name="mode" value="grouped"> Grouped</label>
    <label><input type="radio" name="mode" value="stacked" checked> Stacked</label>
</form>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var n = 4, // number of layers
    m = 58, // number of samples per layer
    stack = d3.stack(),
    data = d3.range(n).map(function() { return bumpLayer(m, .1); }),
    yOffset = {},
    yRecover = {},
    yRecoverDomain,
    isTransitioning = true,
    transitionDuration = 500;

var formatPercent = d3.format(".0%");
var formatNumber = d3.format(",");

// transpose data
data = data[0].map(function(col, i) { 
    return data.map(function(row) { 
        return row[i] 
    })
});

var margin = {top: 40, right: 10, bottom: 20, left: 35},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scaleBand()
    .domain(d3.range(m))
    .rangeRound([0, width])
    .padding(0.1)
    .align(0.1);

var y = d3.scaleLinear()
    .domain([0, yStackMax])
    .rangeRound([height, 0]);

var color = d3.scaleLinear()
    .domain([0, n - 1])
    .range(["#aad", "#556"]);

var xAxis = d3.axisBottom()
    .scale(x)
    .tickSize(0)
    .tickPadding(6);

var yAxis = d3.axisLeft()
    .scale(y)
    .tickSize(2)
    .tickPadding(6);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var layer = svg.selectAll(".layer")
    .data(layers)
  .enter().append("g")
    .attr("class", "layer")
    .attr("id", function(d) { return d.key; })
    .style("fill", function(d, i) { return color(i); })

var rect = layer.selectAll("rect")
    .data(function(d) { return d; })
  .enter().append("rect")
    .attr("x", function(d, i) { return x(i); })
    .attr("y", height)
    .attr("width", x.bandwidth())
    .attr("height", 0)
    .on("mouseenter", highlightLayer)
    .on("mouseout", restoreLayer);

rect.transition()
    .delay(function(d, i) {return i * 10; })
    .attr("y", function(d) { return y(d[1]); })
    .attr("height", function(d) { return y(d[0]) - y(d[1]); });

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + 0 + ",0)")
    .style("font-size", "10px")
    .call(yAxis);

d3.selectAll("input").on("change", change);

// Automated initial transitions 
var timeout = setTimeout(function() {
    d3.select("input[value=\"grouped\"]").property("checked", true).each(change);
    setTimeout(function() {
        d3.select("input[value=\"percent\"]").property("checked", true).each(change);
    }, 2000);
}, 2000);

function change() {
    clearTimeout(timeout);

isTransitioning = true;
    setTimeout(function() {
        isTransitioning = false;
    }, transitionDuration * 3.5);
    
    if (this.value === "grouped") transitionGrouped();
    else if (this.value === "stacked") transitionStacked();
    else if (this.value === "percent") transitionPercent();
}

function transitionGrouped() {
    y.domain([0, yGroupMax]);

rect.transition()
        .duration(transitionDuration)
        .delay(function(d, i) { return i * 10; })
        .attr("x", function(d, i, j) { return x(i) + x.bandwidth() / n * parseInt(this.parentNode.id); })
        .attr("width", x.bandwidth() / n)
    .transition()
        .attr("y", function(d) { return height - (y(d[0]) - y(d[1])); })
        .attr("height", function(d) { return y(d[0]) - y(d[1]); })
        .on("end", setYRecover);

yAxis.tickFormat(formatNumber)
    svg.selectAll(".y.axis").transition()
        .delay(transitionDuration)
        .duration(transitionDuration)
        .call(yAxis)
}

function transitionStacked() {
    y.domain([0, yStackMax]);

rect.transition()
        .duration(transitionDuration)
        .delay(function(d, i) { return i * 10; })
        .attr("y", function(d) { return y(d[1]); })
        .attr("height", function(d) { return y(d[0]) - y(d[1]); })
    .transition()
        .attr("x", function(d, i) { return x(i); })
        .attr("width", x.bandwidth())
        .on("end", setYRecover);

yAxis.tickFormat(formatNumber)
    svg.selectAll(".y.axis").transition()
        .delay(transitionDuration)
        .duration(transitionDuration)
        .call(yAxis);
}

function transitionPercent() {
    y.domain([0, 1]);

rect.transition()
        .duration(transitionDuration)
        .delay(function(d, i) { return i * 10; })
        .attr("y", function(d) { 
            var total = d3.sum(d3.values(d.data)); 
            return y(d[1] / total); })
        .attr("height", function(d) { 
            var total = d3.sum(d3.values(d.data));
            return y(d[0] / total) - y(d[1] / total); })
    .transition()
        .attr("x", function(d, i) { return x(i); })
        .attr("width", x.bandwidth())
        .on("end", setYRecover);

yAxis.tickFormat(formatPercent)
    svg.selectAll(".y.axis").transition()
        .delay(transitionDuration)
        .duration(transitionDuration)
        .call(yAxis);
}

function highlightLayer(d,i) {
    if (isTransitioning == false) {
        // Highlight layer
        var j = parseInt(d3.select(this.parentNode).attr("id"))
        layer.transition()
            .style("opacity", function() { 
                return parseInt(this.id) == j? 1 : 0.2;
            });

// Align bottom of selected layer
        var layerRects = d3.selectAll(this.parentNode.childNodes).selectAll(".rect")._parents;
        var baseline = yRecover[i][j] + parseFloat(d3.select(this).attr("height"));
        layerRects.forEach(function(d, i) {
            yOffset[i] = baseline - (parseFloat(d3.select(d).attr("y")) + parseFloat(d3.select(d).attr("height")));
        })
        rect.transition()
            .attr("y", function(d, i) {
                return parseFloat(d3.select(this).attr("y")) + yOffset[i];
            });

// Match y axis to bottom of layer
        y.domain([y.domain()[0] - y.invert(baseline), y.domain()[1] - y.invert(baseline) ])
        svg.selectAll(".y.axis").transition()
            .call(yAxis);
    }
}

function restoreLayer(d,i) {
    if (isTransitioning == false) {
            // Restore layer opacity
            layer.transition()
                .style("opacity", 1)

// Restore bar Y values
            rect.transition()
                .attr("y", function(d, i) {
                    j = parseInt(d3.select(this.parentNode).attr("id"))
                    return yRecover[i][j];
                })

// Restore y axis
            y.domain(yRecoverDomain)
            svg.selectAll(".y.axis").transition()
                .call(yAxis);
        }
}

// Inspired by Lee Byron's test data generator.
function bumpLayer(n, o) {

function bump(a) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < n; i++) {
      var w = (i / n - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }

var a = [], i;
  for (i = 0; i < n; ++i) a[i] = o + o * Math.random();
  for (i = 0; i < 5; ++i) bump(a);

return a.map(function(d, i) { return Math.max(0, d); });
}

</script>

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