I am playing around with the D3 stacked bar implementation from here and expanding it into a waterfall chart with having the bars consisting of stacked bars instead of just a single category bar.
This image here shows what I ultimately try to get: Waterfall Chart with stacked bars image It can be done by Excel according to this link and in Tableau here.
It has a total calculation of each period (2012, 2013 etc) and every bar consists of two categories (smartphones and laptops) in their respective color. The waterfall consists of the category newand used as additions and returned as subtractions. One flow can be described as follows:
2012 (laptop + smartphone) + laptops_new + smartphone_new + laptop_used + smartphone_used - (laptop_returned + smartphone_returned) equals 2013 (laptop + smartphone)
To make the bars between two periods appear floating above the ground, one must compile a white coloured bar which has the same height as the bar just before. This is being documented in D3 here but only with simple bars and not stacked ones.
The logic of such a floating waterfall chart and of a stacked bar chart has been shown in D3. However I struggle with the combination of these two together in one chart.
I understand that with d.total the total count of the stacked bars of a category is being calculated.
....
data.forEach(function(d) {
var y0 = 0;
d.ages = color.domain().map(function(name) { return {name: name, y0:
y0, y1: y0 += +d[name]}; });
// Total of stack calculated
d.total = d.ages[d.ages.length - 1].y1;
});
....
For creating the waterfall part I may need to adopt some logic from here
....
data.forEach(function(d) {
//first calculate the starting height for each category
total = 0
totals = {}
for (var i=0; i<categories.length; i++) {
if (i == 3) {
total = total - +d[categories[i]];
totals[categories[i]] = total;
}
else {
totals[categories[i]] = total;
total += +d[categories[i]];
}
}
//then map category name, value, and starting height to each observation
d.formatted = categories.map(function(category) {
return {
name: category,
value: +d[category],
baseHeight: +totals[category]
};
});
});
....
How can I implement this waterfall logic into the stacked bar chart such that I can achieve something which looks like the stacked bar waterfall chart in the image?
