Recipesemiotic/networksemiotic/recipesreact
transitDiagramLayout turns a network into a schematic map with octilinear tracks, parallel line bundles, interchange stations, and fitted labels. Supply complete coordinates for an authored diagram, or let the deterministic topology layout position a plain graph.
Interactive preview
The data below is one directed graph. Change its geometry and level of detail without rewriting nodes or edges.
Skip to data tableThree source-colored lines merge into a shared trunk. Primary and compact modes use typed station glyphs; minimap mode uses segmented line-membership circles.
OrdersCustomersRules
Authored and automatic geometry
When every node has finite x and y values, the recipe fits those coordinates into the plot. Set layoutMode: "automatic" to ignore them. Automatic layout uses stable node-id tie breaks for component order, layering, and crossing-reduction sweeps, so repeated server renders produce the same SVG bytes.
Source-rooted lines
With lineMode: "source-rooted", every in-degree-zero node defines a line. Its membership propagates forward through the DAG, so shared downstream edges become parallel bundles. sourceColorAccessor reads each line color from the source datum. Without this mode, use lineAccessor for explicit edge line ids or descriptors.
Detail modes
| Mode | Rendering |
|---|
primary | Full station and interchange radii, labels, and normal track weight. |
compact | Smaller stations and thinner tracks with labels suppressed. |
minimap | Minimal tracks and one segmented line-color circle per fitted stop. |
Custom station glyphs
renderStation replaces the primary and compact station circle in the SVG station layer. The callback receives the raw station datum, fittedxand y, resolved radius, ordered lineIds, interchange state, and active mode. Minimap markers stay recipe-owned so their segments always match derived line membership.
Under a perspective, custom station content is upright by default. UsechromePlacement: "ground" to print it on the projected surface. Declare larger custom glyphs with stationBounds(info), returning[left, right, top, bottom] around the fitted center. Without this callback, the fit reserves the station radius on each side. Bounds follow the chosen placement.
Automatic layout is deterministic for fixed data and configuration, including reordered node and edge arrays with unique IDs. Ties use code-point ID order, independent of the host locale. Repeated static rendering with the same precision is byte-stable; SVG formatting and geometry can change between library versions, so pin versions for goldens.
Core configuration
| Option | Purpose |
|---|
lineWidth, lineGap | Track and bundle spacing. |
stationRadius, interchangeRadius | Marker sizing within the selected detail mode. |
lineOrder | Stable preferred order for parallel tracks. |
pointsAccessor | Authored intermediate x/y waypoints on an edge. |
rootId, direction | Orient the automatic topology layout. |
showLabels, labelAccessor | Primary-mode label visibility and text. |
Source Code
Abbreviated for readability — data arrays and steps are truncated. See the full runnable source in docs/src/examples/recipes/.
JSX
| 1 | import { NetworkCustomChart } from "semiotic/network" |
| 2 | import { transitDiagramLayout } from "semiotic/recipes" |
| 3 | |
| 4 | const nodes = [ |
| 5 | { id: "orders", label: "Orders", lineColor: "#d1495b" }, |
| 6 | { id: "customers", label: "Customers", lineColor: "#277da1" }, |
| 7 | { id: "join", label: "Join" }, |
| 8 | { id: "warehouse", label: "Warehouse" } |
| 9 | ] |
| 10 | |
| 11 | const edges = [ |
| 12 | { source: "orders", target: "join" }, |
| 13 | { source: "customers", target: "join" }, |
| 14 | { source: "join", target: "warehouse" } |
| 15 | ] |
| 16 | |
| 17 | <NetworkCustomChart |
| 18 | nodes={nodes} |
| 19 | edges={edges} |
| 20 | layout={transitDiagramLayout} |
| 21 | layoutConfig={{ |
| 22 | mode: "primary", // "compact" | "minimap" |
| 23 | lineMode: "source-rooted", |
| 24 | sourceColorAccessor: "lineColor", |
| 25 | renderStation: ({ station, x, y, radius }) => ( |
| 26 | <StationGlyph station={station} x={x} y={y} radius={radius} /> |
| 27 | ) |
| 28 | }} |
| 29 | description="Three source-rooted lines merge into one shared trunk." |
| 30 | accessibleTable |
| 31 | /> |
| 32 | |