d3.partition() gives each depth a band and each node a slice proportional to its value: drawn straight, an icicle; with size([2 * Math.PI, radius]), angles and radii for d3.arc(), a sunburst. The rings run shelf, genre and author, sized by revenue:
<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
<script src="booknest-sales.js"></script><script src="booknest-prep.js"></script>
<script src="booknest-tree.js"></script>
<svg width="720" height="262" font-family="Arial" font-size="10" text-anchor="middle"></svg>
<script>
const R = 130, root = d3.partition().size([2 * Math.PI, R])
(catalogTree(prepareSales(SALES)));
const arc = d3.arc().startAngle(d => d.x0).endAngle(d => d.x1).padAngle(0.01)
.innerRadius(d => d.y0 + 1).outerRadius(d => d.y1 - 1);
const color = d => d.depth === 1 ? '#78909c' // genres: a tint of the book
: d3.interpolate(d.leaves()[0].data.color, 'white')(d.depth === 2 ? 0.55 : 0);
const g = d3.select('svg').append('g').attr('transform', `translate(360,${R + 1})`);
const slice = g.selectAll('g').data(root.descendants().slice(1)).join('g'); // skip the root
slice.append('path').attr('d', arc).attr('fill', color);
slice.append('text').attr('dy', '0.35em').attr('fill', d => d.depth - 2 ? '#fff' : '#263238')
.attr('transform', d => { const a = (d.x0 + d.x1) * 90 / Math.PI, r = (d.y0 + d.y1) / 2;
return `rotate(${a}) translate(0,${-r}) rotate(${a > 90 && a < 270 ? 180 : 0})`; })
.text(d => d.children ? nodeName(d).replace(' and ', ' & ') : d.data.author);
g.append('text').attr('dy', '0.35em').text(d3.format('$.3s')(root.value));
</script>
Labels sit tangent to their ring, flipped on the lower half; production sunbursts hide labels on thin wedges (short arc length (y0 + y1) / 2 * (x1 - x0)). For exact comparisons, an icicle reads better.
<!doctype html>
<style>
body { margin: 0; padding: 8px; background: #fafaf7; font: 11px 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 280" font-size="10" text-anchor="middle"></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 };
})();
// prepareSales(raw): parsed dates, sales linked to book objects, revenue and totals
function prepareSales(raw) {
const parse = d3.utcParse('%Y-%m'), books = raw.books.map(b => ({ ...b }));
const byId = d3.index(books, b => b.id);
const sales = raw.sales.map(s => ({ date: parse(s.month), book: byId.get(s.book),
units: s.units, revenue: s.units * byId.get(s.book).price }));
for (const [book, rows] of d3.group(sales, s => s.book)) {
book.units = d3.sum(rows, s => s.units);
book.revenue = d3.sum(rows, s => s.revenue);
}
const months = d3.rollups(sales, v => ({ units: d3.sum(v, s => s.units),
revenue: d3.sum(v, s => s.revenue) }), s => +s.date).map(([t, v]) => ({ date: new Date(t), ...v }))
.sort((a, b) => a.date - b.date);
const ratings = raw.ratings.map(r => ({ ...r, book: byId.get(r.book) }));
return { ...raw, books, sales, months, ratings };
}
// catalogTree(data, value): shelf → genre → book, as a d3.hierarchy summed by value
const SHELF = { Fiction: 'Novels', 'Science Fiction': 'Novels' }; // the rest: Nonfiction
function catalogTree(data, value = b => b.revenue) {
const nest = d3.group(data.books, b => SHELF[b.genre] ?? 'Nonfiction', b => b.genre);
return d3.hierarchy(nest) // a Map becomes the entry [undefined, map]
.sum(d => d.id ? value(d) : 0) // only books (the leaves) carry a value
.sort((a, b) => b.height - a.height || b.value - a.value);
}
const nodeName = n => n.depth === 0 ? 'BookNest' : n.children ? n.data[0] : n.data.title;
const tree = catalogTree(prepareSales(SALES));
const svg = d3.select('svg');
const color = d => d.depth === 1 ? '#78909c' // genres: a tint of their book
: d3.interpolate(d.leaves()[0].data.color, 'white')(d.depth === 2 ? 0.55 : 0);
const label = d => d.children ? nodeName(d).replace(' and ', ' & ') : d.data.author;
// Sunburst: size([2π, radius]) gives angles (x) and radii (y) for d3.arc()
const R = 132, sun = d3.partition().size([2 * Math.PI, R])(tree.copy());
const arc = d3.arc().startAngle(d => d.x0).endAngle(d => d.x1).padAngle(0.01)
.innerRadius(d => d.y0 + 1).outerRadius(d => d.y1 - 1);
const g = svg.append('g').attr('transform', `translate(140,${R + 6})`);
const slice = g.selectAll('g').data(sun.descendants().slice(1)).join('g'); // skip the root
slice.append('path').attr('d', arc).attr('fill', color);
slice.filter(d => (d.y0 + d.y1) / 2 * (d.x1 - d.x0) > 24) // hide labels on thin wedges
.append('text').attr('dy', '0.35em').attr('fill', d => d.depth - 2 ? '#fff' : '#263238')
.attr('transform', d => { const a = (d.x0 + d.x1) * 90 / Math.PI, r = (d.y0 + d.y1) / 2;
return `rotate(${a}) translate(0,${-r}) rotate(${a > 90 && a < 270 ? 180 : 0})`; })
.text(label);
g.append('text').attr('dy', '0.35em').attr('font-size', 13).attr('font-weight', 'bold').text(d3.format('$.3s')(sun.value));
// Icicle: the same layout, drawn straight
const ice = d3.partition().size([260, 300])(tree.copy());
const ig = svg.append('g').attr('transform', 'translate(290,10)');
const cell = ig.selectAll('g').data(ice.descendants()).join('g').attr('transform', d => `translate(${d.y0},${d.x0})`);
cell.append('rect').attr('width', d => d.y1 - d.y0 - 1).attr('height', d => d.x1 - d.x0 - 1)
.attr('fill', d => d.depth ? color(d) : '#37474f');
cell.filter(d => d.x1 - d.x0 > 12).append('text').attr('x', 4).attr('y', d => (d.x1 - d.x0) / 2).attr('dy', '0.35em')
.attr('text-anchor', 'start').attr('fill', d => d.depth === 2 ? '#263238' : '#fff')
.text(d => d.depth ? label(d) : 'BookNest');
</script>