Machine-readable page content
Canonical: https://semiotic.nteract.io
Streaming-First Visualization for React
Push data at 60fps with decay, pulse, and staleness encoding, or pass an array for a static chart. Semiotic covers more than 40 chart types, network graphs, coordinated dashboards, and AI-assisted authoring.
npm install semiotic
Choose Your Level of Control
Start with a chart component. Reach for a Frame or the lower-level utilities when the design calls for them.
ChartsStart With the Chart
Ready-to-use components handle common chart forms. Pass data, name the accessors, and adjust the props that matter.
import { LineChart } from "semiotic" <LineChart data={salesData} xAccessor="month" yAccessor="revenue" />
FramesShape the Frame
Frames expose marks, layout, interaction, annotation, and rendering when a chart component is too prescriptive.
import { StreamXYFrame } from "semiotic" <StreamXYFrame data={data} chartType="line" xAccessor="date" yAccessor="value" lineStyle={d => ({ stroke: colorScale(d.key) })} enableHover={true} showAxes={true} />
UtilitiesBuild Your Own
Use individual components like Axis, Legend, Brush, and DividedLine to build completely custom visualizations.
import { Axis, Legend, DividedLine } from "semiotic" <svg width={500} height={300}> <DividedLine data={lineData} parameters={d => ({ stroke: theme(d.type) })} /> <Axis orient="left" scale={yScale} /> <Legend categories={categories} /> </svg>
What Sets Semiotic Apart
The visualization types, developer workflows, and AI integration that other charting libraries leave you to build from scratch.
Streaming Engine
Canvas-rendered push API at 60fps with a two-canvas architecture, ring buffer windowing, and microtask-batched ingestion. Decay, pulse, staleness, and identity-based transitions are built into the rendering pipeline — not bolted on.
Coordinated Views
Hover a chart and matching data lights up elsewhere. Brush a scatterplot and the bar chart filters with it. Union, intersect, and crossfilter modes share the same selection state.
Network Visualization
Force-directed graphs, Sankey diagrams, chord diagrams, treemaps, circle packing, and tree layouts — as React components with the same API as LineChart.
Statistical Overlays
Forecast with confidence envelopes, anomaly detection, LOESS smoothing, and trend lines. Auto-computed or pre-computed from your ML model.
AI-Ready
MCP server, machine-readable schemas, and instruction files for every major AI coding assistant. LLMs generate correct Semiotic code without examples.
TypeScript
Built with strict mode. Full type definitions for every component and prop. Generics for type-safe data accessors.
Static or Streaming in Minutes
Pass an array for static charts. Push via refs for live data. Same components, same API.
2
Static data — just pass an array
<LineChart data={salesData} xAccessor="month" yAccessor="revenue" />
3
Streaming data — push via refs
const ref = useRef() // Push from effects, handlers, or WebSocket callbacks ref.current?.push({ time: Date.now(), value: 42 }) <RealtimeLineChart ref={ref} timeAccessor="time" valueAccessor="value" decay={{ type: "exponential", halfLife: 100 }} />
Ready to Build?
Explore the guides, browse examples, or dive straight into the API reference.