Stacked bars use a nested join (d3-selection): layers bind to one <g> each, then each layer's points to its rectangles. Drawn from zero with an inner band scale per quarter, the same layers make grouped bars:
<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
<script src="booknest-sales.js"></script>
<svg width="620" height="194" font-family="Arial" font-size="11"></svg>
<script>
const quarter = m => `${m.slice(2, 4)}Q${Math.ceil(m.slice(5) / 3)}`; // '25Q1'
const table = d3.rollup(SALES.sales, v => d3.sum(v, d => d.units), d => quarter(d.month),
d => d.book), ids = SALES.books.map(b => b.id);
const layers = d3.stack().keys(ids).value(([, byBook], id) => byBook.get(id) ?? 0)(table);
const x0 = d3.scaleBand([...table.keys()], [36, 300]).padding(0.2);
const x1 = d3.scaleBand(ids, [0, x0.bandwidth()]); // inside one quarter
const panel = (dx, max, x, width, top, base) => {
const y = d3.scaleLinear([0, max], [168, 6]).nice();
const g = d3.select('svg').append('g').attr('transform', `translate(${dx},0)`);
g.append('g').attr('transform', 'translate(0,168)').call(d3.axisBottom(x0));
g.append('g').attr('transform', 'translate(36,0)').call(d3.axisLeft(y).ticks(5));
g.selectAll('g.layer').data(layers).join('g').attr('class', 'layer') // a g per book
.attr('fill', s => SALES.books[s.index].color)
.selectAll('rect').data(s => s.map(d => ({ key: s.key, q: d.data[0], d })))
.join('rect').attr('x', x).attr('width', width) // a rect per quarter
.attr('y', p => y(top(p))).attr('height', p => y(base(p)) - y(top(p)));
};
panel(0, d3.max(layers.at(-1), d => d[1]), p => x0(p.q), x0.bandwidth(),
p => p.d[1], p => p.d[0]); // stacked
panel(310, d3.max(layers.flat(), d => d[1] - d[0]), p => x0(p.q) + x1(p.key), x1.bandwidth(),
p => p.d[1] - p.d[0], p => 0); // grouped
</script>
Stacked bars compare quarterly totals; grouped bars compare books within a quarter (green Small Steps to Big Summits starts in 26Q1; 26Q3 is July and August only). s.map() copies each layer's key into its points.
<!doctype html>
<style>
body { margin: 0; padding: 8px; background: #fafaf7; font: 12px system-ui, sans-serif; color: #263238; }
svg { width: 100%; max-width: 600px; display: block; }
</style>
<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
<svg viewBox="0 0 600 200" font-size="10"></svg>
<script>
// BookNest sample data, invented for these examples (not real sales)
const SALES = (() => {
const books = [
{ id: 1, key: 'harbor', title: 'The Quiet Harbor', author: 'Elena Marsh', genre: 'Fiction', color: '#1f5f8b', price: 18.99, rating: 4.6 },
{ id: 2, key: 'deepweb', title: 'Patterns of the Deep Web', author: 'Ravi Menon', genre: 'Technology', color: '#5b3f99', price: 39.5, rating: 4.3 },
{ id: 3, key: 'saffron', title: 'Salt and Saffron', author: 'Leila Haddad', genre: 'Cooking', color: '#e09a10', price: 24, rating: 4.8 },
{ id: 4, key: 'summit', title: 'Small Steps to Big Summits', author: 'Tom Okafor', genre: 'Self-Help', color: '#3f7d3a', price: 14.99, rating: 4.1 },
{ id: 5, key: 'clock', title: "The Clockmaker's Paradox", author: 'Iris Vale', genre: 'Science Fiction', color: '#b5452f', price: 16.2, rating: 4.5 },
{ id: 6, key: 'glass', title: 'Gardens in Glass', author: 'June Park', genre: 'Gardening', color: '#2a9d8f', price: 22.5, rating: 4.4 },
];
const units = { // units sold per month, January 2025 to August 2026
1: [40, 47, 46, 47, 57, 51, 46, 54, 60, 60, 71, 111, 52, 42, 49, 56, 59, 48, 53, 51],
2: [40, 37, 35, 41, 48, 43, 40, 42, 50, 53, 53, 84, 42, 35, 38, 41, 45, 41, 46, 46],
3: [46, 45, 41, 46, 53, 49, 46, 45, 60, 51, 63, 100, 48, 48, 49, 48, 53, 49, 48, 52],
4: [100, 80, 72, 70, 66, 66], // released March 2026
5: [48, 47, 54, 52, 65, 55, 57, 58, 64, 66, 75, 124, 58, 49, 59, 56, 63, 57, 54, 57],
6: [31, 30, 28, 35, 31, 32, 29, 30, 41, 36, 45, 64, 31, 30, 30, 38, 40, 38, 36, 38],
};
const months = d3.utcMonths(new Date('2025-01-01'), new Date('2026-09-01')).map(d3.utcFormat('%Y-%m'));
const sales = books.flatMap(b => units[b.id].map((n, i) =>
({ month: months[i + months.length - units[b.id].length], book: b.id, units: n })));
const ratings = [[4, 8, 20, 87, 293], [6, 10, 22, 95, 147], [2, 3, 8, 45, 342], [2, 3, 8, 24, 28],
[4, 8, 20, 90, 228], [4, 7, 20, 82, 147]].map((counts, i) => ({ book: i + 1, counts })); // 1 to 5 stars
const regions = [{ id: '826', name: 'United Kingdom', units: 1480 }, { id: '276', name: 'Germany', units: 1120 },
{ id: '250', name: 'France', units: 760 }, { id: '372', name: 'Ireland', units: 540 },
{ id: '528', name: 'Netherlands', units: 410 }, { id: '724', name: 'Spain', units: 320 }];
const links = [[5, 1, 38], [1, 3, 24], [2, 5, 18], [3, 6, 21], [4, 1, 12], [2, 6, 9], [4, 3, 15], [5, 6, 14]]
.map(([source, target, value]) => ({ source, target, value })); // customers who bought both
return { books, sales, ratings, regions, links };
})();
const quarter = m => `${m.slice(2, 4)}Q${Math.ceil(m.slice(5) / 3)}`; // '25Q1'
const table = d3.rollup(SALES.sales, v => d3.sum(v, d => d.units), d => quarter(d.month), d => d.book);
const ids = SALES.books.map(b => b.id);
const layers = d3.stack().keys(ids).value(([, byBook], id) => byBook.get(id) ?? 0)(table);
const x0 = d3.scaleBand([...table.keys()], [32, 290]).padding(0.2);
const x1 = d3.scaleBand(ids, [0, x0.bandwidth()]); // inside one quarter
function panel(dx, title, max, x, width, top, base) {
const y = d3.scaleLinear([0, max], [176, 14]).nice();
const g = d3.select('svg').append('g').attr('transform', `translate(${dx},0)`);
g.append('text').attr('x', 36).attr('y', 10).attr('font-weight', 'bold').attr('font-size', 12).text(title);
g.append('g').attr('transform', 'translate(0,176)').call(d3.axisBottom(x0));
g.append('g').attr('transform', 'translate(32,0)').call(d3.axisLeft(y).ticks(5));
// Nested join: a <g> per layer (book), then a <rect> per quarter
g.selectAll('g.layer').data(layers).join('g').attr('class', 'layer')
.attr('fill', s => SALES.books[s.index].color)
.selectAll('rect').data(s => s.map(d => ({ key: s.key, q: d.data[0], d })))
.join('rect').attr('x', x).attr('width', width)
.attr('y', p => y(top(p))).attr('height', p => y(base(p)) - y(top(p)));
}
panel(0, 'stacked', d3.max(layers.at(-1), d => d[1]), p => x0(p.q), x0.bandwidth(),
p => p.d[1], p => p.d[0]);
panel(305, 'grouped', d3.max(layers.flat(), d => d[1] - d[0]), p => x0(p.q) + x1(p.key), x1.bandwidth(),
p => p.d[1] - p.d[0], p => 0);
</script>