Round or boxy — choosing a spiral

Round or boxy: choosing a spiral

Every word after the first is placed by walking outward from the canvas center and taking the first spot that doesn't collide with anything already placed. The spiral option decides what "outward" means — and that single choice is what makes a cloud look like a disk or like a filled box.

Not a mode. mode picks the packing strategy (pretty / balanced / fast); spiral picks the search path. Ordering, collision testing and cost are identical either way, so you can change the silhouette without giving up placement quality.

`spiral`	Path	Resulting look
`"archimedean"` default	The classic curve `r = b·θ` — radius grows smoothly with angle.	A round, organic cloud. The canvas corners stay empty because the search reaches them last, if at all.
`"rectangular"`	Growing axis-aligned square rings, each one step further out than the last.	A box-filled cloud: words reach the corners, and edges read as straight lines. This is d3-cloud's other spiral.

Using it

Step 1

Pass `spiral` alongside `mode`

One extra option. Everything else — the items, the placements you get back, the way you render them — is unchanged, so you can flip between the two at runtime and re-draw.

          
          layout.js
        

import { layout } from "./js/index.js";

const placements = await layout(items, {
  mode:   "pretty",       // packing strategy — unchanged
  spiral: "rectangular",  // search path: fill a box, not a disk
  width: 960, height: 600,
});

Omit spiral and you get "archimedean" — the same clouds this library has always produced. Anything else throws a RangeError.

Step 2

Know what each path costs you

The heaviest word doesn't move. Both paths emit the exact canvas center as their first candidate, so your biggest term is dead-center either way.
Speed is the same. Both advance by a step scaled to the word being placed, so they generate candidates at the same density and the search costs the same per word.
Square rings grow equally on both axes. On a wide canvas the search stays square, so a 16:9 layout can leave empty bands at the left and right rather than stretching to fill them.
fast ignores it. Shelf packing never searches outward, so there is no path to choose.

Rectangular is not "denser". It redistributes words toward the corners rather than fitting more of them. If a cloud is dropping words, reach for padding, the font-size range, or a bigger canvas first.

See the difference

The same words, the same mode, the same seed — laid out with each path so you can compare the round cloud against the boxy one.

spiral: "archimedean" — default

Press Esc or click Exit fullscreen to return to the demo card.

spiral: "rectangular"

Press Esc or click Exit fullscreen to return to the demo card.

Watch the corners. The round cloud tapers away from them; the boxy one runs words straight into them. On the wide canvas above you can also see the square path's trade-off — it grows by equal steps on both axes, so it runs out of vertical room before it reaches the far left and right edges. Fullscreen lays out against the viewport so you can inspect either path alone.