Machine-readable page content
Canonical: https://semiotic.nteract.io/recipes/benchmark-dashboard
Benchmark Dashboard
RecipeGroupedBarChartLineChartBarChartHeatmapStackedBarChartDonutChart
A dark-mode analytics dashboard comparing four dataviz libraries across 30 AI benchmark scenarios. Uses CSS custom properties (--semiotic-text,--semiotic-border, --semiotic-grid) to theme Semiotic charts for dark backgrounds.
Mode: dark. Use the site toggle to switch.
AI Dataviz Library Benchmark
Semiotic4 libraries x 30 AI scenarios + runtime perf. All charts below use Semiotic HOC components with CSS custom properties for theming.
Semiotic v3NivoRechartsObs. Plot
Semiotic
92%
AI + constant-time perf
Nivo
87%
AI good, perf unusable at scale
Recharts
77%
Basics only, degrades at 10K+
Plot
73%
Fast but missing chart types
AI Score by Difficulty Tier
Scatter Re-render Scaling (log)
The chart type that breaks libraries. Nivo hits 8.4s at 10K points.
Source Code
Abbreviated for readability — data arrays and steps are truncated. See the full runnable source in docs/src/examples/recipes/.
JSX
| 1 | import { |
| 2 | GroupedBarChart, LineChart, BarChart, |
| 3 | Heatmap, StackedBarChart, DonutChart, |
| 4 | } from "semiotic" |
| 5 | |
| 6 | // Set CSS custom properties on a parent element for dark mode: |
| 7 | // --semiotic-text: #e2e8f0 |
| 8 | // --semiotic-text-secondary: #94a3b8 |
| 9 | // --semiotic-border: #334155 |
| 10 | // --semiotic-grid: #334155 |
| 11 | |
| 12 | <GroupedBarChart |
| 13 | data={tierData} |
| 14 | categoryAccessor="tier" |
| 15 | valueAccessor="score" |
| 16 | groupBy="library" |
| 17 | colorBy="library" |
| 18 | showGrid |
| 19 | /> |
| 20 | |
| 21 | <LineChart |
| 22 | data={perfLines} |
| 23 | xAccessor="size" yAccessor="ms" |
| 24 | lineBy="library" colorBy="library" |
| 25 | showGrid curve="monotoneX" showPoints |
| 26 | /> |
| 27 | |
| 28 | <Heatmap |
| 29 | data={heatmapData} |
| 30 | xAccessor="scenario" yAccessor="library" |
| 31 | valueAccessor="score" colorScheme="viridis" |
| 32 | showValues |
| 33 | /> |