Charts — Collision Swarm Chart — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/charts/collision-swarm-chart

CollisionSwarmChart

charts

import { CollisionSwarmChart } from "semiotic/physics"

Wraps: StreamPhysicsFrame

Example

DistributionPointsLanesVariable radiusStart settledProjection

Use CollisionSwarmChart when the base chart is a dot strip or swarm plot, but overlap is part of the story: bodies push each other apart while springs keep every point tethered to its quantitative position. The chart still reads from the x-axis and optional lanes at rest.

Use SwarmPlot when you only need a static distribution. Use PhysicsCustomChart when the scene needs custom barriers, sensors, or non-axis forces.

Props

Prop	Type	Required	Default	Description
`data`	array	Yes	—	Rows to render as one collision body each.
`xAccessor`	string \| function	—	`"x"`	Quantitative field that anchors each body along the x-axis.
`groupAccessor`	string \| function	—	—	Optional categorical field that creates separate swarm lanes.
`radiusAccessor`	string \| function	—	—	Optional numeric field used as per-body radius in pixels.
`pointRadius`	number	—	`5`	Fallback body radius.
`colorBy`	string \| function	—	—	Categorical field used to color bodies.
`xExtent`	array	—	`inferred from data`	[min, max] domain for the quantitative axis.
`collisionIterations`	number	—	`6`	Solver iterations per fixed physics step.
`settle`	boolean	—	`false`	Start bodies near their targets for a calmer first paint or reduced-motion demo.
`showProjection`	boolean	—	`true`	Draw the x-axis and lane guides behind moving bodies.
`seed`	number	—	`1`	Deterministic simulation seed.
`size`	array	—	`[700, 360]`	[width, height] in pixels.
`hoverRadius`	number	—	`16`	Pixel hit radius for body hover tooltips.
`paused`	boolean	—	`false`	Pause the simulation.
`tooltip`	boolean \| function \| object	—	`true`	Enable the default body tooltip, pass a custom tooltip renderer/config, or set false to disable hover tooltips.
`frameProps`	object	—	—	Advanced StreamPhysicsFrame props.