D3 Force Bubble Chart — Draggable Clustered Bubbles

A force simulation is not a chart type — it is a tiny physics engine. You describe forces you want acting on a set of nodes, and D3 iteratively nudges them until the whole system reaches equilibrium. That makes it the right tool whenever a layout has no single correct answer, only constraints: bubbles that must not overlap, cluster near their category, and stay inside the frame.

The scale that keeps the chart honest

This line is the difference between a truthful chart and a misleading one:

var r = d3.scaleSqrt().domain([0, max]).range([0, 46]);

Humans read a circle's area, not its radius. If radius were mapped linearly, a value twice as large would produce a circle with four times the area — visually claiming a 4× difference where the data says 2×. Taking the square root makes area proportional to value, which is exactly why scaleSqrt exists in D3 and why it should be the default choice for any circle-sized encoding.

Forces, and why there are three

.force('x', d3.forceX(...).strength(...)) — pulls each node toward a target x. In cluster mode that target is derived from the node's category, so groups separate horizontally; in pack mode every node targets the center and the groups merge.

.force('y', d3.forceY(height / 2).strength(0.12)) — a gentle vertical pull toward the middle. Its strength is deliberately higher than the x force in pack mode so the arrangement stays wide and shallow rather than becoming a tall column.

.force('collide', d3.forceCollide(d => d.r + 2).iterations(3)) — the force doing the actual packing. iterations is worth knowing about: collision resolution is approximate, and at the default of 1 large bubbles visibly overlap because one pass is not enough to satisfy every constraint. Raising it to 3 costs a little per tick and produces clean separation. The + 2 is the visual gutter between circles.

Alpha: the concept that trips everyone up

A D3 simulation has an internal alpha value — its energy. It starts near 1 and decays each tick until it drops below a threshold, at which point the simulation stops. That is what makes a layout settle instead of jittering forever.

It is also why changing a force appears to do nothing:

sim.alpha(0.9).restart();

If the simulation has already cooled, adding a new force has no effect — there is no energy left to move anything. Reheating with alpha() and calling restart() gives it the budget to rearrange. Nearly every "my D3 force layout is not responding to my update" question has this as its answer.

Dragging uses a different mechanism on purpose:

sim.alphaTarget(0.3).restart() on drag start, sim.alphaTarget(0) on end.

alphaTarget sets the value alpha *decays toward*. Setting it to 0.3 keeps the simulation permanently warm for as long as the drag lasts, so other bubbles keep reacting continuously. Returning it to 0 lets everything cool and settle again. Using alpha() here instead would give one burst of energy that fades mid-drag.

fx and fy pin a node

During a drag the node gets d.fx and d.fy — fixed positions that override the simulation entirely for that node. It follows the pointer exactly while every other bubble negotiates around it. Setting them back to null on release returns the node to the simulation's control, which is what makes it drift into a resting position rather than freezing where it was dropped.

Clamping inside the tick

The tick handler clamps each node's position to the frame before writing the transform:

d.x = Math.max(d.r, Math.min(width - d.r, d.x));

Doing this in the tick rather than adding a boundary force is simpler and absolute — no bubble can ever escape, even momentarily during a fast drag.

Selections and joins

svg.selectAll('g.dfb-node').data(nodes).join('g') uses the modern join() API rather than the older enter/exit dance. Each node is a <g> containing a circle and two text labels, so one translate on the group moves everything together — cheaper and simpler than positioning three elements individually every tick.

Labels are only rendered when the bubble is large enough to hold them (d.r > 24), and use paint-order: stroke with a dark stroke so text stays readable over any fill color. A <title> child gives every bubble a native tooltip with its exact value, which also makes the chart usable with a screen reader.

Reusing it

Replace DATA, GROUPS, and COLOR; everything else derives. For hierarchical data where bubbles nest inside parents, D3's pack() layout is a better fit than a force simulation. Compare with a bubble chart for the positioned variant, or a treemap when exact area comparison matters more than grouping.