semiotic
A React data visualization library designed for AI-assisted development, supporting network graphs, streaming data, and coordinated dashboards.
What is semiotic?
Semiotic is a React data visualization library specifically designed for AI-assisted development. It provides a comprehensive set of chart components, including network graphs, streaming data visualizations, and coordinated dashboards, while offering machine-readable schemas and tooling to help AI coding assistants generate correct chart code without trial and error.
React developers building complex data visualization dashboards that require network graphs, real-time data, or coordinated views across multiple chart types, especially those leveraging AI coding assistants.
Developers choose Semiotic for its unique combination of broad chart coverage (including specialized types like Sankey diagrams and force-directed graphs) and built-in AI tooling that ensures LLMs can generate working visualization code, along with strong accessibility features and server-side rendering support.
Overview
React data visualization library for streaming, networks, and AI-assisted development
Use Cases
Best For
- Building dashboards with coordinated views across multiple chart types
- Visualizing network data like force-directed graphs and Sankey diagrams
- Displaying real-time, streaming data with decay and staleness indicators
- Creating geographic visualizations like choropleth maps and flow maps
- Developing AI-assisted applications where LLMs need to generate chart code
- Projects requiring server-side rendering of complex visualizations
Not Ideal For
- Projects requiring only basic bar/line charts with minimal customization and a larger community for support
- Applications needing GPU-accelerated rendering for datasets with millions of data points
- Teams not using AI coding assistants where the AI tooling adds unnecessary overhead
- Performance-critical projects where even optimized imports over 100 KB gzip are too heavy
Pros & Cons
Pros
Includes machine-readable schemas, an MCP server, and validation tools that enable AI coding assistants to generate correct chart code without trial and error, as highlighted in the dedicated AI tooling section.
Supports 38 chart types including network graphs, geographic maps, and streaming visualizations, providing solutions for complex data scenarios beyond standard libraries like Recharts.
The LinkedCharts component offers hover cross-highlighting and brush cross-filtering across different chart types with zero wiring, simplifying dashboard creation for coordinated views.
Features canvas aria-label, keyboard-navigable legends, and aria-live tooltips, ensuring that AI-generated code is accessible out of the box, as emphasized in the accessibility section.
Charts automatically render SVG on the server and canvas on the client, with dedicated utilities for image generation via the 'semiotic/server' entry point, making it suitable for frameworks like Next.js.
Cons
Even sub-path imports are large (e.g., 143 KB gzip for XY charts), which can significantly impact application load times and performance, especially for simple charting needs.
The dual Chart and Frame API, along with numerous configuration options, creates a steep learning curve that requires time to master, as noted in the 'Start simple, go deep' section.
The heavy focus on AI tooling, such as MCP server setup and schemas, adds complexity and setup overhead that may not benefit teams not using AI assistants.
Compared to popular libraries like Recharts, Semiotic has a smaller community, resulting in fewer examples, plugins, and third-party resources, as admitted in the 'When to use something else' note.
Frequently Asked Questions
Related Projects
rechartsRedefined chart library built with React and D3
vx🐯 visx | visualization components
plotly.jsOpen-source JavaScript charting library behind Plotly and Dash
nivonivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.