Charts — Gauntlet 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/gauntlet-chart

GauntletChart

charts

import { GauntletChart } from "semiotic/physics"

Wraps: StreamPhysicsFrame

GauntletChart is the process-oriented physics HOC for compound bodies. A row enters as a project core, carries positive and negative property particles, crosses authored gates, receives event effects, and ends as a built, diminished, blocked, or crashed state. It is the HOC behind the richerNot in MY Backyard andMerge Pressure examples.

Example

Gate regime

Civic Housing

waiting

viability 92 / negatives 1

Main Street

waiting

viability 74 / negatives 2

Fragile Infill

waiting

viability 48 / negatives 3

Pattern

<GauntletChart data={projects} idAccessor="id" positiveAccessor="positives" negativeAccessor="negatives" positiveProperties={positiveProperties} negativeProperties={negativeProperties} gates={gates} events={(project, layout) => buildEvents(project, layout)} viability={(project, context) => scoreProject(project, context)} outcome={(project) => project.viability > 30 ? "built" : "blocked"} frameProps={{ regionEffects, renderBody, beforePaint }} />

Use GauntletChart when the important unit is a compound entity moving through a staged process. UseProcessFlowChart for many independent work items with capacitated stages and all-members feature completion. UsePhysicalFlowChartfor repeated packets on fixed routes, and PhysicsCustomChartwhen the process needs a fully custom layout function.

Props

Prop	Type	Required	Default	Description
`data`	array	—	`[]`	Project rows. Each row becomes a compound physics body: one core plus property particles.
`idAccessor`	string \| function	—	`"id"`	Stable id for each project.
`positiveAccessor`	string \| function	—	`all positive property ids`	Returns positive property ids initially attached to a project.
`negativeAccessor`	string \| function	—	`[]`	Returns negative property ids initially attached to a project.
`startTimeAccessor`	string \| function	—	`0`	Returns the simulation second when each project's local event timeline begins.
`positiveProperties`	array	—	`[]`	Optional definitions for lift, value, color, radius, spring, and custom target behavior. Omit or pass an empty array for negative-only compound bodies.
`negativeProperties`	array	Yes	—	Definitions for load, pull, color, radius, spring, and optional custom target behavior.
`gates`	array	—	`[]`	Named regions along the route. Gates can contribute a regionEffect and optional shared FIFO capacity.
`events`	array \| function	—	`[]`	Timed project events that add negatives, add positives, pop positives, pop negatives, change stage, mutate metrics, or set final outcome.
`bodyGroups`	array \| function	—	`[]`	Optional semantic groups for higher-level aggregates such as features or cohorts.
`coreBody`	function	—	—	Overrides generated core spawn fields for non-default glyphs, mass, radius, velocity, or spawn timing.
`projectPlacement`	function	—	—	Overrides start, route, socket, and graveyard coordinates per project.
`coreForceMode`	"route" \| "net"	—	`"route"`	Use the default authored route force or a net lift/drag vertical force for physical crash-line examples.
`crashDetection`	boolean	—	`true`	When false, draw the crash line without turning contact with it into a live project crash.
`terminalBehavior`	"outcome" \| "hold-last"	—	`"outcome"`	Send terminal projects to socket/graveyard or hold them at their final authored stage.
`initialSpawnPacing`	object	—	—	Passed to StreamPhysicsFrame for staged project arrivals.
`showChrome`	boolean	—	`true`	Draw the default route, gates, crash line, socket, and graveyard chrome.
`showTethers`	boolean	—	`true`	Draw default canvas tethers between project cores and property particles.
`viability`	function	—	`built-in score`	Computes project viability from project state and property definitions.
`outcome`	function	—	`built if viability > 20`	Computes final outcome when a final event does not set one directly.
`onStateChange`	function	—	—	Receives live GauntletProjectState rows after effects, crashes, and outcomes change.
`onCapacityChange`	function	—	—	Receives live queue snapshots for gates that declare capacity.
`tooltip`	boolean \| function \| object	—	`true`	Enable the default project/property tooltip, pass a custom tooltip renderer/config, or set false to disable hover tooltips.
`frameProps`	object	—	—	Advanced StreamPhysicsFrame props for custom rendering, region effects, config, accessibility, and hooks.