NetworkFrame — 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/frames/network-frame

StreamNetworkFrame

frames

import { StreamNetworkFrame } from "semiotic"

StreamNetworkFrame is the foundational frame for all network and hierarchical data visualization. It renders force-directed graphs, sankey diagrams, chord diagrams, trees, treemaps, and circle packs on canvas for high performance. Use it directly when you need full control over layout and styling.

Quick Start

Provide chartType, nodes, andedges. The frame handles layout computation automatically.

import { StreamNetworkFrame } from "semiotic" const frameProps = { /* --- Data --- */ nodes: [ { id: "Alice", group: "team1" }, { id: "Bob", group: "team1" }, // ...more nodes ], edges: [ { source: "Alice", target: "Bob" }, { source: "Alice", target: "Carol" }, // ...more edges ], chartType: "force", /* --- Size --- */ size: [500,400], /* --- Process --- */ nodeIDAccessor: "id", /* --- Customize --- */ colorBy: "group", colorScheme: ["#6366f1","#f59e0b", ... ], showLabels: true, nodeLabel: "id", /* --- Interact --- */ enableHover: true } export default () => { return <StreamNetworkFrame {...frameProps} /> }

Examples

Sankey Diagram

Use chartType="sankey" with weighted edges. The frame computes the flow layout automatically.

import { StreamNetworkFrame } from "semiotic" const frameProps = { /* --- Data --- */ edges: [ { source: "Salary", target: "Budget", value: 5000 }, { source: "Freelance", target: "Budget", value: 2000 }, { source: "Budget", target: "Rent", value: 2500 }, // ...more flows ], chartType: "sankey", /* --- Size --- */ size: [500,350], /* --- Process --- */ valueAccessor: "value", sourceAccessor: "source", targetAccessor: "target", /* --- Customize --- */ showLabels: true, nodeLabel: "id", /* --- Interact --- */ enableHover: true } export default () => { return <StreamNetworkFrame {...frameProps} /> }

Tree Diagram

Use chartType="tree" with a hierarchy root object passed as edges. The frame lays out the tree automatically.

import { StreamNetworkFrame } from "semiotic" const frameProps = { /* --- Data --- */ edges: { name: "root", children: [ { name: "Engineering", children: [...] }, { name: "Product", children: [...] }, { name: "Operations", children: [...] }, ] }, chartType: "tree", /* --- Size --- */ size: [500,450], margin: { top: 20, right: 20, bottom: 60, left: 20 }, /* --- Process --- */ nodeIDAccessor: "name", /* --- Customize --- */ colorByDepth: true, colorScheme: ["#6366f1","#f59e0b", ... ], showLabels: true, nodeLabel: "name", /* --- Interact --- */ enableHover: true } export default () => { return <StreamNetworkFrame {...frameProps} /> }

Props

Prop	Type	Required	Default	Description
`chartType`	string	Yes	—	"force", "sankey", "chord", "tree", "cluster", "circlepack", "treemap", "partition".
`nodes`	array	—	—	Array of node objects.
`edges`	array \| object	—	—	Array of edge objects, or single hierarchy root for tree types.
`size`	[number, number]	—	`[600, 600]`	Chart dimensions as [width, height].
`nodeIDAccessor`	string \| function	—	`"id"`	How to get a unique ID from each node.
`sourceAccessor`	string \| function	—	`"source"`	Edge field for source node ID.
`targetAccessor`	string \| function	—	`"target"`	Edge field for target node ID.
`valueAccessor`	string \| function	—	`"value"`	Edge weight for sankey/chord.
`colorBy`	string \| function	—	—	Node field for color encoding.
`colorScheme`	string \| string[]	—	—	Color scheme for nodes.
`nodeLabel`	string \| function	—	—	Label displayed on each node.
`showLabels`	boolean	—	`false`	Whether to display node labels.
`enableHover`	boolean	—	`true`	Enable hover tooltips.
`margin`	object	—	—	Chart margins.

ForceDirectedGraph -- simplified Chart for force layouts
SankeyDiagram -- simplified Chart for sankey flows
TreeDiagram -- simplified Chart for tree layouts
StreamXYFrame -- for continuous x/y data
StreamOrdinalFrame -- for categorical data