The simulation mutates nodes, adding index, x, y, vx and vy; unplaced nodes start on a phyllotaxis spiral and jitter comes from a fixed-seed generator, so layouts are deterministic. forceLink(links).id(d => d.id) swaps each link's source and target ids for node objects. Forces are registered by name:
| Force | Pulls or pushes | Defaults |
|---|---|---|
| forceLink | linked nodes toward a rest distance | distance 30, strength 1 / min(degree) |
| forceManyBody | every pair apart (negative) or together | strength -30, theta 0.9 |
| forceCenter | shifts all nodes so their mean sits at a point | (0, 0), strength 1 |
| forceCollide | overlapping circles apart | radius 1, strength 1 |
| forceX, forceY | each node toward a coordinate | 0, strength 0.1 |
The simulation's timer dispatches a tick event every animation frame; stop() then tick(300) runs the whole cool-down at once, without events, which is how this chapter's figures stay reproducible.
<!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; background: #fff; }
label { margin-right: 10px; white-space: nowrap; }
</style>
<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
<p id="toggles"></p>
<svg viewBox="0 0 600 240" 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 };
})();
const W = 600, H = 240;
// 36 nodes: the six books plus five readers of each, linked to their book
const nodes = SALES.books.map(b => ({ id: b.key, book: b, r: 12 }))
.concat(SALES.books.flatMap(b => d3.range(5).map(i => ({ id: `${b.key}-${i}`, book: b, r: 5 }))));
const links = nodes.filter(n => n.r === 5).map(n => ({ source: n.book.key, target: n.id }));
const forces = {
link: () => d3.forceLink(links).id(n => n.id).distance(30), // pull linked nodes to a rest length
charge: () => d3.forceManyBody().strength(-30), // push every pair apart
center: () => d3.forceCenter(W / 2, H / 2), // shift the mean to a point
collide: () => d3.forceCollide(n => n.r + 2), // separate overlapping circles
x: () => d3.forceX(n => 60 + (n.book.id - 1) * 96).strength(0.1), // pull each toward its column
y: () => d3.forceY(H / 2).strength(0.1),
};
const on = { link: true, charge: true, center: true, collide: true, x: true, y: true };
const sim = d3.forceSimulation(nodes); // unplaced nodes start on a phyllotaxis spiral
const line = d3.select('svg').append('g').attr('stroke', '#cfd8dc').selectAll('line').data(links).join('line');
const dot = d3.select('svg').append('g').selectAll('circle').data(nodes).join('circle')
.attr('r', n => n.r).attr('fill', n => n.book.color).attr('fill-opacity', n => n.r === 5 ? 0.6 : 1);
sim.on('tick', () => {
line.attr('x1', l => l.source.x).attr('y1', l => l.source.y).attr('x2', l => l.target.x).attr('y2', l => l.target.y);
dot.attr('cx', n => n.x).attr('cy', n => n.y);
});
function apply() {
for (const name in forces) sim.force(name, on[name] ? forces[name]() : null); // register by name
sim.alpha(1).restart(); // reheat
}
d3.select('#toggles').selectAll('label').data(Object.keys(forces)).join('label')
.html(name => `<input type="checkbox" ${on[name] ? 'checked' : ''}> force${name[0].toUpperCase() + name.slice(1)}`)
.select('input').on('change', (e, name) => { on[name] = e.target.checked; apply(); });
apply();
</script>