Charts — Galton Board 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/galton-board-chart

GaltonBoardChart

charts

import { GaltonBoardChart } from "semiotic/physics"

Wraps: StreamPhysicsFrame

Example

Mode

Mechanical mode generates seeded Bernoulli paths without requiring data. Use it for a didactic Galton board, design sketch, or empty-state explanation; switch back to sample mode when real observations should determine the settled bins.

Props

Prop	Type	Required	Default	Description
`data`	array	—	—	Rows to drop through the board. Optional when mode is mechanical.
`valueAccessor`	string \| function	—	`"value"`	Numeric field used to assign rows to bins.
`valueExtent`	array	—	—	Stable numeric [min, max] domain for binning and reference-line placement.
`bins`	number	—	`21`	Number of landing bins.
`mode`	"sample" \| "mechanical"	—	`"sample"`	Use data values or a deterministic no-data demonstration.
`pegRows`	number	—	`bins - 1`	Number of branch rows used by mechanical mode.
`mechanicalCount`	number	—	`max(64, bins * 4)`	Number of generated bodies in mechanical mode.
`branchProbability`	number	—	`0.5`	Probability that a generated body branches right at each peg.
`ballRadius`	number	—	`4`	Radius for each simulated body.
`colorBy`	string \| function	—	—	Categorical field used to color bodies.
`referenceLines`	object \| array	—	—	One or more value markers drawn over the board: { value, label, color, strokeWidth, strokeDasharray, labelPosition }.
`seed`	number	—	`1`	Deterministic simulation seed.
`showProjection`	boolean	—	`true`	Draw the bin, floor, and settled-count scaffold over the moving bodies.
`size`	array	—	`[700, 420]`	[width, height] in pixels.
`width`	number	—	`700`	Width alias used when size is omitted.
`height`	number	—	`420`	Height alias used when size is omitted.
`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.