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 · Full AI Reference · schema.json · API Reference · Examples

View on GitHub · npx -p semiotic 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

Chart contract♿ Passes a11y · 3 advisories Mobile: Mobile-ready

This is a distribution chart; read it for the spread and shape of y.

A collision swarm chart that separates overlapping points while preserving their quantitative axis position. The source projection contains 12 points across 2 group lanes; 2 group lanes are non-empty. The largest group lane is Control with 6 points. The source projection is most concentrated in Control, which holds 6 points (50%); Variant follows with 6 points.

Asks of the reader:CollisionSwarmChart makes overlap and settling visible; use SwarmPlot when a static distribution is enough; X stays exact. Crowded lanes disclose overlap; reduce radius or increase height to separate points

Generated live via describeChart, auditAccessibility, and auditMobileVisualization.Not sure this is the right chart? Choose a Chart.

Example

Try Test equal values: all 50 points have x=50, so they form one vertical column. The overlap notice means the circles need more space. Reduce Point radius to 2 or increase Chart height to 900 to fit them. Their x values stay fixed through every change.

DistributionPointsPoint radiusChart heightLanesVariable radiusStart at targetsProjection

Skip to data table

Use CollisionSwarmChart when the base chart is a dot strip or swarm plot, but overlap is part of the story. Each point keeps its exact x position while springs and collisions arrange it vertically within its lane. Vertical position is spacing, not a second value. If the packing cannot fit at the chosen radius and height, every point retains its value and radius and the chart reports overlapping points.

These controls update the existing chart. New data, group lanes, radius, and axis extent do not require a changing React key. For imperative updates, omit data and push source records through a ref; lanes, counts, and inferred domains update together. Set xExtent to keep the same domain as new values arrive.

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.