[opensourcedex]

semiotic is a free, open source business intelligence & reporting project written in TypeScript and released under Apache-2.0. It has 2,707 GitHub stars, 139 forks and 41 open issues, and was last pushed 6 hours ago. On this registry it ranks #42 of 77 tracked projects in Business Intelligence & Reporting, with 5 head-to-head comparisons available.

What is semiotic?

Semiotic is an Apache-2.0 TypeScript data visualization library for React, maintained by the nteract project, that pairs broad chart coverage — network graphs, streaming data, statistical distributions, and coordinated views — with schemas, diagnostics, and rendering evidence intended for AI-assisted development.

What it is

Semiotic lives in the React and d3 ecosystem as a component library for building charts. A developer starts with a small chart component and adds network graphs, streaming data, or coordinated views when the task calls for them. Coverage spans XY, ordinal, network, realtime, geo, and value chart families, each shipping with schemas, examples, and diagnostics that describe how a configuration should be built and checked. Version 3.10.1 added Network Atlas recipes — Motif Braid, Dependency X-Ray, and Flow Circuit — alongside interactive examples and an acceptance lab.

The concrete problem is that coding assistants and developers often produce chart configs that pass a schema check but are still wrong: miscoded encodings, inaccessible markup, or misleading design. Semiotic answers that with machine-readable prop schemas, an anti-pattern detector, and a numeric preflight step. It replaces the ad-hoc cycle of writing a chart config, rendering it, and guessing from visual inspection whether the result is correct — the library supplies structured validation and rendering evidence instead.

Key capabilities

  • Network graph support with reusable custom layouts: charts skip duplicate worker solves when inputs are unchanged, and palette or font changes become paint-only updates where possible.
  • Streaming and live chart support, covering the maintain-a-live-chart task workflow.
  • Coordinated views across multiple linked charts.
  • semiotic/ai — one import exposing a schema-backed chart capability catalog for LLM code generation, with the generated inventory in ai/surface-manifest.json.
  • ai/schema.json — machine-readable prop schemas for every component.
  • npx semiotic-mcp — an MCP server for tool-based chart rendering in any MCP client.
  • npx semiotic-ai --doctor — CLI validation of component and props JSON with typo suggestions and anti-pattern detection.
  • diagnoseConfig(component, props) for programmatic anti-pattern detection across validation, encoding, accessibility, and misleading-design checks, and auditData(component, props, data?) for chart-aware numeric preflight on inputs that pass schema validation.

Who uses it and how

  • React teams building dashboards that need network graphs and streaming updates in the same codebase, rather than stitching separate libraries together.
  • AI coding-assistant workflows: a model generates a chart config, diagnoseConfig or npx semiotic-ai --doctor checks it, and the assistant repairs it from the reported diagnostics.
  • MCP client users who want chart rendering exposed as a tool through npx semiotic-mcp.
  • Developers working through documented tasks such as comparing category totals, maintaining a live chart, and correcting a published chart.
  • Teams evaluating AI-assisted chart generation against a published baseline: the July 27, 2026 evaluation report gives model- and task-specific results.

Getting started

Install the npm package semiotic, or add the tooling surfaces with npx semiotic-mcp and npx semiotic-ai --doctor. Task packets under ai/task-packets/index.json identify their build and evidence scope, and the hosted documentation at semiotic.nteract.io walks through complete tasks.

How it compares

The relevant neighbours are d3, which Semiotic builds on, and whatever charting library a project already depends on, which the README advises checking first — extending an existing charting library may be the smaller change for a small task. Semiotic's distinguishing claim is not chart breadth alone but the AI-facing surface: prop schemas, an MCP server, a CLI doctor, and programmatic diagnostics that other React chart libraries do not ship as documented entry points. No list of paid products it replaces is provided in the facts.

When to use it — and when not to

A self-hoster takes on no server infrastructure here — no database, storage, or SMTP — because Semiotic is a client-side library, though network charts do use worker-based layout solving. Two limitations are worth weighing. First, importing a single chart from semiotic/ai still ships most of the bundle because the published entry files are pre-bundled, so production code should use family subpaths such as semiotic/xy, semiotic/geo, or semiotic/value, at roughly half the single-chart cost. Second, the project's own evaluation reports model- and task-specific results and explicitly does not guarantee first-try correctness, so teams expecting AI generation to be right without a check-and-repair step should not adopt it on that basis.

project readme (upstream, from github) — read inline

MCP Toplist

Semiotic

CI npm version TypeScript MseeP.ai Security Assessment Badge

MCP Queen operational grade

A React data visualization library designed for AI-assisted development.

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.10.1

3.10.1 adds Network Atlas recipes and reduces repeated layout work when charts mount or resize.

  • Network Atlas includes Motif Braid, Dependency X-Ray, and Flow Circuit recipes, with interactive examples and an acceptance lab.
  • Network charts reuse custom layouts when inputs are unchanged, avoid duplicate worker solves, and treat palette and font changes as paint-only updates where possible.
  • Atlas readers integrate with themes and observers; network keyboard activation and live hover announcements are corrected.
  • Documentation preview checks and API snapshot parameter extraction are more reliable.

See the changelog for details.

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. Note: the published entry files are pre-bundled, so importing one chart from semiotic/ai still ships most of the bundle — treat it as a codegen/tooling surface and use family subpaths (semiotic/xy, semiotic/geo, semiotic/value, …) in production code, at roughly half the single-chart cost.
  • ai/schema.json — machine-readable prop schemas for every component
  • npx semiotic-mcp — an MCP server for tool-based chart rendering in any MCP client
  • npx 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, aria-live tooltips, 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.

Streaming data. Realtime charts render on canvas at 60fps with a ref-based push API. Rapid network edge pushes coalesce into one layout per animation frame, while read/mutation methods preserve synchronous read-after-write semantics. Built-in decay, pulse, and staleness encoding for monitoring dashboards.

Coordinated views. LinkedCharts provides hover cross-highlighting, brush cross-filtering, coordinate-based linked crosshairs, and selection synchronization across any combination of chart types through shared selection state.

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.

First-class annotations. Annotations are data-bound objects, not post-hoc artwork. Labels, callouts, thresholds, enclosures, statistical overlays, and React widgets move with the chart and render through browser, SSR, and export paths. Opt into placement, hierarchy, density, progressive disclosure, audience-aware amount, provenance, and editorial lifecycle when the chart needs to communicate more than its encoding alone.

Choose the API layer

Layer For Example
Charts Common chart forms with chart-level props ``
Frames Full control over rendering, interaction, and layout ``

Chart HOCs register only the mark plugins they need. Direct StreamXYFrame loads the remaining built-ins on first client paint. Call registerBuiltInXYPlugins() from semiotic/xy or semiotic/realtime/core before the first render when SSR or the first frame must include marks.

Every Chart component accepts a frameProps prop to access the underlying Frame API without leaving the simpler interface.

Serialization and interop

Charts serialize to JSON and back: toConfig, fromConfig, toURL, copyConfig, configToJSX. Have Vega-Lite specs? fromVegaLite(spec) translates them to Semiotic configs — works with configToJSX() for full round-trip from notebooks and AI-generated specs.

Need an external pitfall review? The experimental `un

readme truncated — read the full docs on github

Frequently asked questions

Is semiotic free to use?

semiotic is open source under the Apache-2.0 licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does semiotic do?

React data visualization library for streaming, networks, and AI-assisted development

What is semiotic written in?

semiotic is primarily written in TypeScript. Its source is publicly available at https://github.com/nteract/semiotic, and it has 2,707 GitHub stars.