Playground — Streaming Sankey — 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/playground/streaming-sankey

Streaming Sankey Playground

Streaming Sankey diagrams grow their topology over time via a push API. Edges accumulate, nodes appear automatically, and the layout re-runs when internal tension crosses a threshold. Animated particles flow along edges proportional to throughput. Try the "Data Pipeline" topology to see circular edges (retries and reprocessing loops).

Topology:Colors:

Push Rate:

Edges pushed: 0Tension: 0.00Web/Mobile/API sources route through services to destinations

Layout

Orientation

Node Alignment

Node Width

Node Padding

Show Labels

Particles

Show Particles

Particle Radius

Particle Opacity

Speed Multiplier

Spawn Rate

Max Per Edge

Proportional Speed

Color By

Edges

Edge Opacity

Edge Color By

Tension

Relayout Threshold

Transition (ms)

Interaction

Enable Hover

Generated Code

JSX

import { StreamNetworkFrame } from "semiotic" import { useRef } from "react" const chartRef = useRef() // Push edges at any frequency chartRef.current.push({ source: "A", target: "B", value: 10 }) <StreamNetworkFrame ref={chartRef} chartType="sankey" size={[800, 500]} showParticles />