Stacks are a class of layouts that take multiple series of data, where each measurement from each series is rendered atop each other. These are suited for demonstrating the comparative size of the measurements from each series at each measurement. They are also great at demonstrating how the multiple streams of data change over the entire set of measurements.
Stacked diagrams basically come down to two different representations: stacked bar graphs and stacked area graphs. We will examine both of these and explain how to create these with D3.js.
The implementation of a stacked bar graph is similar to that of a bar graph, except that we need to take into account the fact that the height of each bar consists of the sum of each measurement. Normally, each bar is subdivided, with each division sized relative to the sum, and is given a different color to differentiate it.
Let's jump into creating our own stacked bar graph. The data that will be used...