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
Monthly Revenue Monthly Revenue — XY data visualization 2 4 6 8 10 12 40000 60000 80000 100000 120000 Monthly Revenue
LineChart (multi-line)
XY Chart XY data visualization 2 4 6 8 10 12 20000 40000 60000 80000 100000 120000 North South
AreaChart
XY Chart XY data visualization 2 4 6 8 10 12 40000 60000 80000 100000 120000
StackedAreaChart
XY Chart XY data visualization 2 4 6 8 10 12 0 50000 100000 150000 200000 250000 North South East
Scatterplot
XY Chart XY data visualization 25 30 35 40 45 50 40000 60000 80000 100000 Eng Design Sales
Heatmap
XY Chart XY data visualization 0 1 2 3 4 5 0 1 2 3 4
BarChart
Ordinal Chart Ordinal data visualization Engineering Marketing Finance 0 20 40 60 80 100 120 140 Engineering Sales Marketing Operations Finance HR
BarChart (horizontal)
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
Ordinal Chart Ordinal data visualization Q1 Q2 Q3 Q4 0 200 400 600 800 1000 1200 Eng Sales Mktg
PieChart
Ordinal Chart Ordinal data visualization Desktop Mobile Tablet Other
DonutChart
Ordinal Chart Ordinal data visualization Desktop Mobile Tablet Other
BoxPlot
Ordinal Chart Ordinal data visualization D B A C 30 40 50 60 70 80
DotPlot
Ordinal Chart Ordinal data visualization Engineering Sales Marketing Operations Finance HR 20 40 60 80 100 120 140
ForceDirectedGraph
Alice Bob Carol Dave Eve Frank Network Chart Network data visualization Alice Bob Carol Dave Eve Frank Eng Design PM
SankeyDiagram
Revenue Product Services Licensing COGS Gross Profit OpEx Net Income Network Chart Network data visualization Revenue Product Services Licensing COGS Gross Profit OpEx Net Income
TreeDiagram
CEO CTO CFO COO Eng Lead Data Lead Accounting FP&A HR Facilities Legal Frontend Backend Infra ML Analytics 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
Salaries Cloud Tools Ads Events Content Office Travel 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.