nteract/semiotic

Start with a small chart component. Add network graphs, streaming data and
coordinated views when the task needs them. Structured schemas, diagnostics
and rendering evidence help coding assistants implement, check and repair
chart configurations.
Work through a complete task: check category totals,
maintain a live chart, or
correct a published chart.
The source task packets identify their build and
evidence scope; source availability does not establish installed or deployed parity.
What's New in 3.12.1
3.12.1 extends network perspectives to the Atlas readers and improves projected
layout sizing, annotation anchors, and static SVG precision. Placement components
retain their identity across package entries, and semioticVite() removes unused
worker assets from Vite 7 builds while preserving workers that are used.
See the changelog for the full list and SVG
compatibility notes.
Why Semiotic
Semiotic is a data visualization library for React that combines broad chart
coverage with AI tooling. It supports network graphs, streaming data,
statistical distributions and coordinated views, with schemas, examples and
diagnostics for implementing and checking each task. Check the project's
existing dependencies first: extending its current charting library may be
the best fit for a small change.
Built for AI-assisted development
Semiotic provides a workflow for generating, checking and repairing chart
configurations. The July 27, 2026 evaluation
reports model- and task-specific results; it does not guarantee first-try correctness.
- **semiotic/ai** — a single import with the schema-backed chart capability catalog (XY, ordinal, network, realtime, geo, value, and portable recipes), optimized for LLM code generation. See ai/surface-manifest.json for the generated current inventory. Named imports now tree-shake across published chunks. Prefer family subpaths (semiotic/xy, semiotic/geo, semiotic/value, …) in production code to keep the intended chart family explicit; the cold-consumer table below reports initial-load and on-demand costs.
- **ai/schema.json** — machine-readable prop schemas for every component
- **npx -y -p semiotic semiotic-mcp** — an MCP server for tool-based chart rendering in any MCP client
- **npx -p semiotic semiotic-ai --doctor** — validate component + props JSON from the command line with typo suggestions and anti-pattern detection
- **diagnoseConfig(component, props)** — programmatic anti-pattern detector with actionable fixes, spanning validation, encoding, accessibility, and misleading-design (deception) checks
- **auditData(component, props, data?)** — chart-aware numeric preflight for inputs that pass schema validation but break the math: non-finite values, zero-span domains, invalid log inputs, negative size geometry, unsafe normalized totals, and scale-dominating outliers. Returns bounded row evidence and flows into diagnoseConfig, Chart Clinic, CLI doctor, and opt-in ChartContainer notifications
- **AGENTS.md** — concise repository workflow shared by modern coding agents;
CLAUDE.md imports it and Copilot receives a short compatibility bridge
- **ai/reference.md** — complete on-demand product reference, kept out of
always-loaded coding-agent context
- **llms.txt** — 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
aria-label, keyboard-navigable legends, keyboard live-region announcements, SVG
/ ) so AI-generated code fails gracefully with
actionable diagnostics instead of a blank screen.
Accessibility is a release surface
The European Accessibility Act
has applied to covered products and services since 28 June 2025. A chart
library cannot certify an application's legal compliance: scope, content,
surrounding controls, testing, and national enforcement remain the
application owner's responsibility. Semiotic supplies testable infrastructure
for that work: keyboard interaction, accessible data tables, layered
descriptions, structured navigation, reduced-motion and forced-colors paths,
and WCAG-derived contrast tests for shipped theme presets. See the
Accessibility docs and
run the application's own assistive-technology and user testing.
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.