Stack-to-split-Stack Transition with D3 v4

Stack-to-split-Stack Transition

Transitions between stacked bar charts and splitting them up into smaller stacked bar charts.

forked from zachmargolis's block: Stack-to-Split Transition

forked from mashehu's block: Stack-to-split-Stack Transition with D3 v4

forked from Thanaporn-sk's block: Stack-to-split-Stack Transition with D3 v4

<!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;
}
.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}

</style>
<form>
  <label><input type="radio" name="mode" value="together"checked> together</label>
  <label><input type="radio" name="mode" value="split"> split</label>
</form>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
      var margin = {
            top: 40,
            right: 160,
            bottom: 100,
            left: 25
        },
        height = 485 - margin.top - margin.bottom,
        width = height * 3 - margin.left - margin.right;

d3.json("example_data.json", function(error, data_input) {
  if (error) throw error;

var assay_types = data_input.assay_types;

var assay_types_inv = arrayAwareInvert(assay_types);

var assays = [],
        assay_groups = [];

for (var i in assay_types) {
        assay_types[i].map(function(item) {
            assays.push(item);
        });
    }
    for (var i in assay_types_inv) {
        assay_groups.push(assay_types_inv[i]);
    }
    
			var	assay_groups_uniq = Object.keys(assay_types),
		  n = assay_groups_uniq.length, //number of groups
        lastRow = (n - 1),
        spacing = {
            bottom: 15,
            right: 5
        },
		    rowHeight = Math.floor((height - (n - 1) * spacing.bottom) / n);

var x = d3.scaleBand()
        .rangeRound([0, width])
        .padding(0.1)
        .domain(data_input.stages);
		
    var y_split = d3.scaleLinear()
        .range([rowHeight, 0]);

var y_stacked = d3.scaleLinear()
        .range([height, 0]);

var z = d3.scaleBand().domain(assays).rangeRound([0, x.bandwidth()]);

var color = d3.scaleOrdinal().domain(assays)
        .range(['#f03e3e', '#f76707', '#40c057', '#0ca678', '#1098ad', '#0b7285']);

var color_shades = d3.scaleOrdinal().domain(assays)
        .range(['#69db7c', '#40c057', '#37b24d', '#2b8a3e',
            '#66d9e8', '#22b8cf', '#1098ad', '#0b7285',
            '#ffc9c9', '#ffa8a8', '#ff6b6b', '#f03e3e', '#c92a2a'
        ]);

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 stack = d3.stack().keys(assays),
        layers = stack(data_input.data);
  
  console.log('keys', assays)
  console.log('data_input.data', data_input.data)
  console.log('layers', layers)

layers.forEach(function(d, i) {
        d.forEach(function(dd) {
            dd.assay = assays[i];
            dd.assay_group = assay_groups[i];
        });
    });

// gridlines in y axis function
    function make_y_gridlines(scale, ticks) {
        return d3.axisLeft(scale).ticks(ticks);
    }

// add the Y gridlines
    svg.append("g")
        .attr("class", "grid")
        .call(make_y_gridlines(y_stacked)
            .tickSize(-width)
            .tickFormat("")
        );

var layer = svg.selectAll(".layer")
        .data(layers, function(d) {
            return assay_types_inv[d.key];
        })
        .enter().append("g")
        .attr("class", "layer")
        .attr("class", function(d) {
            return "layer " + assay_types_inv[d.key];
        });

assay_groups_uniq.forEach(function(d) {
        svg.select("." + d)
            .append("g")
            .transition()
            .duration(300)
            .attr("class", "grid grid--split")
            .call(make_y_gridlines(y_split, 4)
                .tickSize(-width)
                .tickFormat("")
            )
            .attr('opacity', 0);

svg.select("." + d)
            .append('g')
            .attr('class', 'axis--y')
            .attr('opacity', 0);
        svg.select("." + d)
            .append("g")
            .attr("class", "axis axes--x")
            .attr("transform", function() {
                return translate(0, rowHeight);
            })
            .attr('opacity', 0);
    });

layer.append('g')
        .attr('class', 'axis--y')
        .attr('opacity', 0);
    layer.append("g")
        .attr("class", "axis axes--x")
        .attr("transform", function() {
            return translate(0, rowHeight);
        })
        .attr('opacity', 0);

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

var legend = svg.selectAll(".legend")
        .data(assays)
        .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) {
            return "translate(30," + i * 20 + ")";
        });

legend.append("rect")
        .attr("x", width - 18)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", function(d) {
            return color_shades(d);
        })
        .on("mouseover", function(d) {
            svg.selectAll(".bar:not(." + d.replace(" ", "_") + ")")
                .style('opacity', '0.1');
        })
        .on("mouseout", function(d) {
            svg.selectAll(".bar:not(." + d.replace(" ", "_") + ")")
                .style('opacity', '1');
        });

legend.append("text")
        .attr("x", width + 5)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "start")
        .text(function(d) {
            return d;
        })
        .on("mouseover", function(d) {
            svg.selectAll(".bar:not(." + d.replace(" ", "_") + ")")
                .transition()
                .duration(100)
                .style('opacity', '0.25');
        })
        .on("mouseout", function(d) {
            svg.selectAll(".bar:not(." + d.replace(" ", "_") + ")")
                .transition()
                .duration(500)
                .style('opacity', '1');
        });

svg.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x).tickSizeOuter(0))
        .selectAll("text")
        .attr("dx", "-0.35em")
        .attr("dy", "0.6em")
        .attr("transform", "rotate(-45)")
        .style("text-anchor", "end");
    svg.append("g")
        .attr("class", "axis axis--y axis--stacked")
        .call(d3.axisLeft(y_stacked).ticks(10))
        .append("text")
        .attr("x", 6)
        .attr("y", y_stacked(y_stacked.ticks(10).pop()))
        .attr("dy", "0.35em")
        .attr("text-anchor", "start")
        .attr("fill", "#000")
        .text("counts");

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

function change() {
        if (this.value === "split") {
            transitionSplit();
        } else if (this.value === "together") {
            transitionStacked();
        }
    }

function translate(x, y) {
        return "translate(" + x + ", " + y + ")";
    }

function rowPosition(d) {
        return assay_groups_uniq.indexOf(assay_types_inv[d.key]);
    }

function transitionSplit() {
            var g = svg.selectAll(".layer")
						.transition().duration(750)
            .attr("transform", function(d) {
                return translate(0, rowPosition(d) * (rowHeight + spacing.bottom));
            });

svg.selectAll('g.grid')
            .attr('opacity', 0);
        layer.selectAll('g.grid--split')
            .attr('opacity', 1)
            .transition()
            .duration(750);
     
        g.selectAll("rect")
            .attr("y", function(d, i) {
                return y_split(d.data[d.assay]);
            })
            .attr("height", function(d) {
                return rowHeight - y_split(d.data[d.assay]);
            });

layer.selectAll('.axes--x')
						.transition()
            .duration(750)
            .attr('opacity', 1)
            .call(d3.axisBottom(x).tickSize(0))
            .selectAll("text")
            .attr('opacity', 0);

layer.selectAll('.axis--y')
            .transition()
            .duration(750)
            .attr('opacity', 1)
            .call(d3.axisLeft(y_split).ticks(3));

svg.selectAll('g.axis--stacked')
            .attr('opacity', 0);
    }

svg.selectAll('g.axis--stacked')
            .transition()
            .duration(300)
            .attr('opacity', 1);

}

setTimeout(function() {
        d3.select("input[value=\"split\"]").property("checked", true).each(change);
    }, 2000);

});
</script>

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

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