Charts — Physical Flow 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/physical-flow-chart

PhysicalFlowChart

charts

import { PhysicalFlowChart } from "semiotic/physics"

Wraps: StreamPhysicsFrame

Example

ScenarioPacket densityBody budgetPauseReduced motionStatic flowSensors

Service mesh physical flow

Sensor counts

Edge: 0Auth: 0API: 0Queue: 0DB: 0

Recent proximity enters

No sensor entries yet

Use PhysicalFlowChart when route geometry is already authored and throughput is easier to understand as movement through a system. Keep the static flow layer on for the measured quantities; packets add texture, congestion, and observation events as they travel each route.

Keyboard focus moves across the route flows themselves rather than the individual packets, preserving the semantic level of the chart while the particle layer remains visual texture.

Use SankeyDiagram for plain source-target-value tables. Use FlowMap when the routes are geographic. Use PhysicsCustomChart when the scene needs custom forces, collision barriers, or non-route interaction logic.

Props

Prop	Type	Required	Default	Description
`nodes`	array	—	`[]`	Route nodes with explicit x/y geometry.
`links`	array	—	`[]`	Flow links with source, target, throughput, and optional path geometry.
`edges`	array	—	—	Alias for links.
`nodeIdAccessor`	string \| function	—	`"id"`	Node id field.
`nodeXAccessor`	string \| function	—	`"x"`	Node x-coordinate.
`nodeYAccessor`	string \| function	—	`"y"`	Node y-coordinate.
`sourceAccessor`	string \| function	—	`"source"`	Link source node id.
`targetAccessor`	string \| function	—	`"target"`	Link target node id.
`throughputAccessor`	string \| function	—	`"value"`	Numeric field used for pipe width and packet count.
`pathAccessor`	string \| function	—	`"path"`	Optional route path as [{x,y}, ...] or [[x,y], ...].
`coordinateMode`	string	—	`"auto"`	auto, normalized, or pixels.
`particleRate`	number	—	`0.16`	Packets per throughput unit before downsampling.
`maxParticles`	number	—	`180`	Maximum generated packet bodies.
`particleRadius`	number	—	`4`	Packet radius in pixels.
`flowSpeed`	number	—	`90`	Initial packet speed along each route.
`pathConstraint`	string	—	`"path"`	path or none.
`reducedMotion`	boolean	—	`false`	Start packets on routes and pause simulation.
`showStaticFlow`	boolean	—	`true`	Draw route pipes and throughput labels.
`showNodeLabels`	boolean	—	`true`	Draw node labels.
`showSensors`	boolean	—	`false`	Draw proximity sensors around nodes.
`paused`	boolean	—	`false`	Pause the simulation.
`accessibleTable`	boolean	—	`true`	Expose route-level semantic items through the skip link and data-summary table.
`description`	string	—	—	Accessible label for the physics chart frame.
`summary`	string	—	—	Screen-reader-only summary text for the chart.
`seed`	number	—	`1`	Deterministic seed.
`hoverRadius`	number	—	`16`	Pixel hit radius for packet hover tooltips.
`tooltip`	boolean \| function \| object	—	`true`	Enable the default packet tooltip, pass a custom tooltip renderer/config, or set false to disable hover tooltips.
`frameProps`	object	—	—	Advanced StreamPhysicsFrame props.