Playground — Sankey Diagram — 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/sankey-diagram

Sankey Diagram Playground

Experiment with SankeyDiagram props in real time. Sankey diagrams visualize flow and magnitude — perfect for income statements, energy budgets, and user funnels. Adjust the controls and copy the generated code.

Dataset:

Layout

Orientation

Node Alignment

Nodes

Node Width

Node Padding

Show Labels

Edges

Edge Opacity

Interaction

Enable Hover

Generated Code

The link restores this exact configuration; the config is a portable ChartConfig artifact.

JSX

import { SankeyDiagram } from "semiotic" const edges = // nodes [ { id: "Revenue", category: "income" }, { id: "Cost of Goods Sold", category: "expense" }, { id: "Gross Profit", category: "income" }, // ...12 nodes ] // edges [ { source: "Revenue", target: "Cost of Goods Sold", value: 42 }, { source: "Revenue", target: "Gross Profit", value: 58 }, // ...11 edges ] <SankeyDiagram nodes={nodes} edges={edges} />