Machine-readable page content
Canonical: https://semiotic3.nteract.io
Streaming-First Visualization for React
Push data at 60fps with decay, pulse, and staleness encoding. Or just pass an array — static data is the simple case. 40+ chart types, network graphs, coordinated dashboards, and AI tooling built in.
npm install semiotic
One Library, Three Levels
Start simple and add complexity only when you need it. Semiotic grows with your requirements.
ChartsSimple Props, Instant Results
20 ready-to-use chart components. Pass your data, set a few props, get a beautiful visualization.
import { LineChart } from "semiotic" <LineChart data={salesData} xAccessor="month" yAccessor="revenue" />
FramesFull Creative Control
Four powerful Frame components give you complete control over every aspect of your visualization.
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 one chart, highlight matching data in others. Brush a scatterplot, filter a bar chart. Union, intersect, and crossfilter resolution modes — no custom state management.
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.