Semiotic SSR Gallery
Generated server-side — no JavaScript, no canvas, pure SVG.
Component SSR (HOC → ReactDOMServer.renderToStaticMarkup)
Same React components used on the client, rendered in a Node environment. Stream Frames detect typeof window === "undefined" and render SVG instead of canvas.
LineChart
Skip to data table View data summary (12 elements)
Monthly Revenue Monthly Revenue (XY data visualization) 2 4 6 8 10 12 40000 60000 80000 100000 120000 Monthly Revenue
LineChart (multi-line)
Skip to data table View data summary (24 elements)
XY Chart XY data visualization 2 4 6 8 10 12 20000 40000 60000 80000 100000 120000 North South
AreaChart
Skip to data table View data summary (12 elements)
XY Chart XY data visualization 2 4 6 8 10 12 40000 60000 80000 100000 120000
StackedAreaChart
Skip to data table View data summary (36 elements)
XY Chart XY data visualization 2 4 6 8 10 12 0 50000 100000 150000 200000 250000 North South East
Scatterplot
Skip to data table View data summary (12 elements)
XY Chart XY data visualization 25 30 35 40 45 50 40000 60000 80000 100000 Eng Design Sales
BarChart
Skip to data table View data summary (6 elements)
Ordinal Chart Ordinal data visualization Engineering Marketing Finance HR 0 20 40 60 80 100 120 140 Engineering Sales Marketing Operations Finance HR
BarChart (horizontal)
Skip to data table View data summary (6 elements)
Ordinal Chart Ordinal data visualization Engineering Sales Marketing Operations Finance HR 0 20 40 60 80 100 120 140 Engineering Sales Marketing Operations Finance HR
StackedBarChart
Skip to data table View data summary (12 elements)
Ordinal Chart Ordinal data visualization Q1 Q2 Q3 Q4 0 200 400 600 800 1000 1200 Eng Sales Mktg
PieChart
Skip to data table View data summary (4 elements)
Ordinal Chart Ordinal data visualization Desktop Mobile Tablet Other
DonutChart
Skip to data table View data summary (4 elements)
Ordinal Chart Ordinal data visualization Desktop Mobile Tablet Other
BoxPlot
Skip to data table View data summary (84 elements)
Ordinal Chart Ordinal data visualization D B A C 30 40 50 60 70 80
DotPlot
Skip to data table View data summary (6 elements)
Ordinal Chart Ordinal data visualization Engineering Sales Marketing Operations Finance HR 20 40 60 80 100 120 140
ForceDirectedGraph
Skip to data table View data summary (6 nodes, 7 edges)
Network Chart Network data visualization Alice Bob Carol Dave Eve Frank Eng Design PM
SankeyDiagram
Skip to data table View data summary (8 nodes, 10 edges)
Network Chart Network data visualization Revenue Product Services Licensing COGS Gross Profit OpEx Net Income
TreeDiagram
Skip to data table View data summary (16 nodes, 15 edges)
Network Chart Network data visualization CEO CTO CFO COO Eng Lead Data Lead Accounting FP&A HR Facilities Legal Frontend Backend Infra ML Analytics
Treemap
Skip to data table View data summary (12 nodes, 0 edges)
Network Chart Network data visualization Salaries Cloud Tools Ads Events Content Office Travel
Standalone SSR (renderToStaticSVG)
Direct pipeline computation → SVG generation via semiotic/server. No React component tree — just data in, SVG string out.
Line (standalone)
2 4 6 8 10 12 Month 40000 60000 80000 100000 120000 Revenue
Scatter (standalone)
25 30 35 40 45 50 40000 60000 80000 100000
Bar (standalone)
Engineering Sales Marketing Operations Finance HR 0 20 40 60 80 100 120 140
Sankey (standalone)
Revenue Product Services Licensing COGS Gross Profit OpEx Net Income
Force (standalone)
Alice Bob Carol Dave Eve Frank
Rendering stats:
17 component charts + 6 standalone charts = 23 total SVGs rendered server-side.