nteract / semiotic

A React data visualization library designed for AI-assisted development. Simple charts in 5 lines. Network graphs, streaming data, and coordinated dashboards when you need them. Structured schemas and an MCP server so AI coding assistants generate correct chart code on the first try. Why Semiotic Semiotic is a data visualization library for React that combines broad chart coverage with first-class AI tooling. It handles the chart types that most libraries skip — network graphs, streaming data, statistical distributions, coordinated views — and ships with machine-readable schemas so LLMs can generate correct code without examples. Built for AI-assisted development Semiotic ships with everything an AI coding assistant needs to generate correct visualizations without trial and error: • ** ** — a single import with all 37 chart components, optimized for LLM code generation • ** ** — machine-readable prop schemas for every component • ** ** — an MCP server for tool-based chart rendering in any MCP client • ** ** — validate component + props JSON from the command line with typo suggestions and anti-pattern detection • ** ** — programmatic anti-pattern detector with 12 checks and actionable fixes • ** ** — instruction files auto-synced for Claude, Cursor, Copilot, Windsurf, and Cline • ** ** — machine-readable documentation following the emerging standard Every chart includes a built-in error boundary, dev-mode validation warnings with typo suggestions, and accessibility features (canvas , keyboard-navigable legends, tooltips, SVG / ) so AI-generated code fails gracefully with actionable diagnostics instead of a blank screen. Beyond standard charts **Network visualization.** Force-directed graphs, Sankey diagrams, chord diagrams, tree layouts, treemaps, circle packing, and orbit diagrams — all as React components with the same prop API as LineChart. **Streaming data.** Realtime charts render on canvas at 60fps with a ref-based push API. Built-in decay, pulse, and staleness encoding for monitoring dashboards. **Coordinated views.** provides hover cross-highlighting, brush cross-filtering, and selection synchronization across any combination of chart types — zero wiring. **Geographic visualization.** Choropleth maps, proportional symbol maps, flow maps with animated particles, and distance cartograms — all canvas-rendered with d3-geo projections, zoom/pan, tile basemaps, and drag-rotate globe spinning. **Statistical summaries.** Box plots, violin plots, swarm plots, histograms, LOESS smoothing, forecast with confidence envelopes, and anomaly detection. Marginal distribution graphics on scatterplot axes with a single prop. Start simple, go deep | Layer | For | Example | |---|---|---| | **Charts** | Common visualizations with sensible defaults | | | **Frames** | Full control over rendering, interaction, and layout | | Every Chart component accepts a prop to access the underlying Frame API without leaving the simpler interface. Serialization and interop Charts serialize to JSON and back: , , , , . Have Vega-Lite specs? translates them to Semiotic configs — works with for full round-trip from notebooks and AI-generated specs. When to use something else Need a standard bar or line chart for a dashboard you'll never need to customize beyond colors and labels? Recharts has a larger ecosystem and more community examples. Need GPU-accelerated rendering for millions of data points? Apache ECharts handles that scale. Semiotic is for projects that outgrow those libraries — when you need network graphs alongside time series, streaming data alongside static snapshots, or coordinated views across chart types. Install Requires React 18.1+ or React 19. Quick Examples Coordinated Dashboard Hover one chart, highlight the same data in another — zero wiring: Streaming Metrics with Decay Live data fades old points, flashes new ones, flags stale feeds: Network Graphs Force-directed graphs and Sankey diagrams — same API as LineChart: Geographic Visualization Choropleth maps, flow maps, and distance cartograms with canvas rendering, zoom/pan, tile basemaps, and animated particles: Streaming System Monitor Live service topology with threshold alerting and click-to-inspect: Standard Charts Line, bar, scatter, area — all the basics, with sensible defaults: All Chart Components | Category | Components | |---|---| | **XY** | | | **Categorical** | | | **Network** | | | **Geo** | | | **Realtime** | | | **Coordination** | | | **Layout** | | | **Frames** | | Vega-Lite Translation Paste a Vega-Lite spec, get a Semiotic chart: Supports bar, line, area, point, rect, arc, tick marks with encoding translation for color, size, aggregation, and binning. Smaller Bundles Import only what you need: Granular entry points export only v3 Stream Frames and HOC charts — no legacy utilities or backwards-compatibility shims. TypeScript Built with . Full type definitions ship with the package. Generics for type-safe accessors: Server-Side Rendering All chart components render SVG automatically in server environments — no special imports or configuration needed: For standalone SVG generation (email, OG images, PDF), use the server entry point: MCP Server Semiotic ships with an MCP server that lets AI coding assistants render charts, diagnose configuration problems, discover schemas, and get chart recommendations via tool calls. Setup Add to your MCP client config (e.g. for Claude Desktop): No API keys or authentication required. The server runs locally via stdio. Tools | Tool | Description | |------|-------------| | ** ** | Render a Semiotic chart to static SVG. Supports the components returned by that are marked . Pass . Returns SVG string or validation errors with fix suggestions. | | ** ** | Return the prop schema for a specific component. Pass to get its props, or omit to list all 30 chart types. Use before to look up valid props. | | ** ** | Recommend chart types for a data sample. Pass…