-
Notifications
You must be signed in to change notification settings - Fork 132
Expand file tree
/
Copy pathssr-gallery.html
More file actions
155 lines (129 loc) · 105 KB
/
ssr-gallery.html
File metadata and controls
155 lines (129 loc) · 105 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Semiotic SSR Gallery</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f5f5; color: #333; padding: 24px; }
h1 { font-size: 28px; margin-bottom: 8px; }
h2 { font-size: 20px; margin: 32px 0 16px; color: #555; border-bottom: 1px solid #ddd; padding-bottom: 8px; }
.subtitle { color: #777; margin-bottom: 24px; font-size: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); gap: 20px; }
.card { background: white; border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.card h3 { font-size: 14px; color: #666; margin-bottom: 12px; font-weight: 500; }
.chart { display: flex; justify-content: center; }
.chart svg { max-width: 100%; height: auto; }
.stats { margin-top: 32px; padding: 16px; background: white; border-radius: 8px; font-size: 13px; color: #555; }
.stats code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; }
</style>
</head>
<body>
<h1>Semiotic SSR Gallery</h1>
<p class="subtitle">Generated server-side — no JavaScript, no canvas, pure SVG. 2026-03-12T14:46:16.612Z</p>
<h2>Component SSR (HOC → ReactDOMServer.renderToStaticMarkup)</h2>
<p class="subtitle">Same React components used on the client, rendered in a Node environment. Stream Frames detect <code>typeof window === "undefined"</code> and render SVG instead of canvas.</p>
<div class="grid">
<div class="card">
<h3>LineChart</h3>
<div class="chart"><div class="stream-xy-frame" role="img" aria-label="Monthly Revenue" style="position:relative;width:500px;height:320px"><svg xmlns="http://www.w3.org/2000/svg" width="500" height="320" style="position:absolute;left:0;top:0"><g transform="translate(70,50)"><path d="M0,192.5L35.45454545454545,155.6578947368421L70.9090909090909,169.47368421052633L106.36363636363636,125.7236842105263L141.8181818181818,132.6315789473684L177.27272727272728,95.78947368421052L212.72727272727272,107.30263157894737L248.1818181818182,79.67105263157895L283.6363636363636,88.88157894736842L319.0909090909091,70.46052631578947L354.54545454545456,54.3421052631579L390,17.500000000000007" fill="none" stroke="#007bff" stroke-width="2"></path></g></svg><svg width="500" height="320" style="position:absolute;top:0;left:0;pointer-events:none"><g transform="translate(70,50)"><g class="stream-axes"><line x1="0" y1="210" x2="390" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(35.45454545454545,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">2</text></g><g transform="translate(106.36363636363636,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">4</text></g><g transform="translate(177.27272727272728,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">6</text></g><g transform="translate(248.1818181818182,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">8</text></g><g transform="translate(319.0909090909091,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">10</text></g><g transform="translate(390,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">12</text></g><line x1="0" y1="0" x2="0" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(0,197.10526315789474)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">40000</text></g><g transform="translate(0,151.05263157894737)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">60000</text></g><g transform="translate(0,105)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">80000</text></g><g transform="translate(0,58.94736842105263)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">100000</text></g><g transform="translate(0,12.894736842105257)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">120000</text></g></g></g><text x="250" y="20" text-anchor="middle" font-size="14" font-weight="bold" fill="var(--semiotic-text, #333)" style="user-select:none">Monthly Revenue</text></svg></div></div>
</div>
<div class="card">
<h3>LineChart (multi-line)</h3>
<div class="chart"><div class="stream-xy-frame" role="img" aria-label="XY chart" style="position:relative;width:500px;height:320px"><svg xmlns="http://www.w3.org/2000/svg" width="500" height="320" style="position:absolute;left:0;top:0"><g transform="translate(70,50)"><path d="M0,165.27777777777777L28.181818181818183,134.16666666666666L56.36363636363637,145.83333333333331L84.54545454545453,108.8888888888889L112.72727272727273,114.72222222222221L140.9090909090909,83.61111111111111L169.09090909090907,93.33333333333333L197.27272727272728,70.00000000000001L225.45454545454547,77.77777777777777L253.63636363636365,62.22222222222222L281.8181818181818,48.611111111111114L310,17.500000000000007" fill="none" stroke="#1f77b4" stroke-width="2"></path><path d="M0,192.5L28.181818181818183,178.88888888888889L56.36363636363637,167.22222222222223L84.54545454545453,153.6111111111111L112.72727272727273,145.83333333333331L140.9090909090909,128.33333333333334L169.09090909090907,134.16666666666666L197.27272727272728,116.66666666666667L225.45454545454547,106.94444444444446L253.63636363636365,95.27777777777779L281.8181818181818,81.66666666666666L310,70.00000000000001" fill="none" stroke="#ff7f0e" stroke-width="2"></path></g></svg><svg width="500" height="320" style="position:absolute;top:0;left:0;pointer-events:none"><g transform="translate(70,50)"><g class="stream-axes"><line x1="0" y1="210" x2="310" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(28.181818181818183,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">2</text></g><g transform="translate(84.54545454545453,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">4</text></g><g transform="translate(140.9090909090909,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">6</text></g><g transform="translate(197.27272727272728,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">8</text></g><g transform="translate(253.63636363636365,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">10</text></g><g transform="translate(310,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">12</text></g><line x1="0" y1="0" x2="0" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(0,208.05555555555554)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">20000</text></g><g transform="translate(0,169.16666666666669)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">40000</text></g><g transform="translate(0,130.27777777777777)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">60000</text></g><g transform="translate(0,91.3888888888889)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">80000</text></g><g transform="translate(0,52.5)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">100000</text></g><g transform="translate(0,13.611111111111102)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">120000</text></g></g></g><g transform="translate(390, 50)"><g><text class="legend-title" y="20" x="50" text-anchor="middle"></text><line stroke="gray" x1="0" y1="35" x2="100" y2="35"></line><g class="legend-item" transform="translate(0,45)"><g transform="translate(0,0)" style="cursor:default"><rect style="fill:#1f77b4;stroke:#1f77b4" width="20" height="20"></rect><text y="15" x="30">North</text></g><g transform="translate(0,25)" style="cursor:default"><rect style="fill:#ff7f0e;stroke:#ff7f0e" width="20" height="20"></rect><text y="15" x="30">South</text></g></g></g></g></svg></div></div>
</div>
<div class="card">
<h3>AreaChart</h3>
<div class="chart"><div class="stream-xy-frame" role="img" aria-label="XY chart" style="position:relative;width:500px;height:320px"><svg xmlns="http://www.w3.org/2000/svg" width="500" height="320" style="position:absolute;left:0;top:0"><g transform="translate(70,50)"><path d="M0,192.5L35.45454545454545,155.6578947368421L70.9090909090909,169.47368421052633L106.36363636363636,125.7236842105263L141.8181818181818,132.6315789473684L177.27272727272728,95.78947368421052L212.72727272727272,107.30263157894737L248.1818181818182,79.67105263157895L283.6363636363636,88.88157894736842L319.0909090909091,70.46052631578947L354.54545454545456,54.3421052631579L390,17.500000000000007L390,210L354.54545454545456,210L319.0909090909091,210L283.6363636363636,210L248.1818181818182,210L212.72727272727272,210L177.27272727272728,210L141.8181818181818,210L106.36363636363636,210L70.9090909090909,210L35.45454545454545,210L0,210Z" fill="#007bff" fill-opacity="0.7" stroke="#007bff" stroke-width="2"></path></g></svg><svg width="500" height="320" style="position:absolute;top:0;left:0;pointer-events:none"><g transform="translate(70,50)"><g class="stream-axes"><line x1="0" y1="210" x2="390" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(35.45454545454545,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">2</text></g><g transform="translate(106.36363636363636,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">4</text></g><g transform="translate(177.27272727272728,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">6</text></g><g transform="translate(248.1818181818182,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">8</text></g><g transform="translate(319.0909090909091,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">10</text></g><g transform="translate(390,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">12</text></g><line x1="0" y1="0" x2="0" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(0,197.10526315789474)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">40000</text></g><g transform="translate(0,151.05263157894737)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">60000</text></g><g transform="translate(0,105)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">80000</text></g><g transform="translate(0,58.94736842105263)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">100000</text></g><g transform="translate(0,12.894736842105257)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">120000</text></g></g></g></svg></div></div>
</div>
<div class="card">
<h3>StackedAreaChart</h3>
<div class="chart"><div class="stream-xy-frame" role="img" aria-label="XY chart" style="position:relative;width:500px;height:320px"><svg xmlns="http://www.w3.org/2000/svg" width="500" height="320" style="position:absolute;left:0;top:0"><g transform="translate(70,50)"><path d="M0,199.27477017364657L28.181818181818183,196.414708886619L56.36363636363637,194.26966292134833L84.54545454545453,189.97957099080696L112.72727272727273,187.83452502553624L140.9090909090909,184.97446373850866L169.09090909090907,182.82941777323802L197.27272727272728,179.96935648621042L225.45454545454547,182.11440245148108L253.63636363636365,177.82431052093972L281.8181818181818,173.53421859039835L310,168.5291113381001L310,210L281.8181818181818,210L253.63636363636365,210L225.45454545454547,210L197.27272727272728,210L169.09090909090907,210L140.9090909090909,210L112.72727272727273,210L84.54545454545453,210L56.36363636363637,210L28.181818181818183,210L0,210Z" fill="#2ca02c" fill-opacity="0.7" stroke="#2ca02c" stroke-width="2"></path><path d="M0,169.244126659857L28.181818181818183,154.9438202247191L56.36363636363637,157.0888661899898L84.54545454545453,139.21348314606743L112.72727272727273,139.21348314606743L140.9090909090909,124.91317671092952L169.09090909090907,126.34320735444331L197.27272727272728,114.902962206333L225.45454545454547,119.90806945863126L253.63636363636365,109.89785495403474L281.8181818181818,100.6026557711951L310,84.15730337078651L310,168.5291113381001L281.8181818181818,173.53421859039835L253.63636363636365,177.82431052093972L225.45454545454547,182.11440245148108L197.27272727272728,179.96935648621042L169.09090909090907,182.82941777323802L140.9090909090909,184.97446373850866L112.72727272727273,187.83452502553624L84.54545454545453,189.97957099080696L56.36363636363637,194.26966292134833L28.181818181818183,196.414708886619L0,199.27477017364657Z" fill="#1f77b4" fill-opacity="0.7" stroke="#1f77b4" stroke-width="2"></path><path d="M0,149.22369765066395L28.181818181818183,129.91828396322776L56.36363636363637,127.7732379979571L84.54545454545453,104.89274770173647L112.72727272727273,102.03268641470889L140.9090909090909,81.29724208375893L169.09090909090907,84.8723186925434L197.27272727272728,66.99693564862105L225.45454545454547,68.42696629213484L253.63636363636365,54.126659856996945L281.8181818181818,39.82635342185903L310,19.090909090909097L310,84.15730337078651L281.8181818181818,100.6026557711951L253.63636363636365,109.89785495403474L225.45454545454547,119.90806945863126L197.27272727272728,114.902962206333L169.09090909090907,126.34320735444331L140.9090909090909,124.91317671092952L112.72727272727273,139.21348314606743L84.54545454545453,139.21348314606743L56.36363636363637,157.0888661899898L28.181818181818183,154.9438202247191L0,169.244126659857Z" fill="#ff7f0e" fill-opacity="0.7" stroke="#ff7f0e" stroke-width="2"></path></g></svg><svg width="500" height="320" style="position:absolute;top:0;left:0;pointer-events:none"><g transform="translate(70,50)"><g class="stream-axes"><line x1="0" y1="210" x2="310" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(28.181818181818183,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">2</text></g><g transform="translate(84.54545454545453,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">4</text></g><g transform="translate(140.9090909090909,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">6</text></g><g transform="translate(197.27272727272728,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">8</text></g><g transform="translate(253.63636363636365,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">10</text></g><g transform="translate(310,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">12</text></g><line x1="0" y1="0" x2="0" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(0,210)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">0</text></g><g transform="translate(0,174.24923391215526)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">50000</text></g><g transform="translate(0,138.49846782431052)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">100000</text></g><g transform="translate(0,102.74770173646579)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">150000</text></g><g transform="translate(0,66.99693564862105)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">200000</text></g><g transform="translate(0,31.246169560776302)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">250000</text></g></g></g><g transform="translate(390, 50)"><g><text class="legend-title" y="20" x="50" text-anchor="middle"></text><line stroke="gray" x1="0" y1="35" x2="100" y2="35"></line><g class="legend-item" transform="translate(0,45)"><g transform="translate(0,0)" style="cursor:default"><rect style="fill:#1f77b4;stroke:#1f77b4" width="20" height="20"></rect><text y="15" x="30">North</text></g><g transform="translate(0,25)" style="cursor:default"><rect style="fill:#ff7f0e;stroke:#ff7f0e" width="20" height="20"></rect><text y="15" x="30">South</text></g><g transform="translate(0,50)" style="cursor:default"><rect style="fill:#2ca02c;stroke:#2ca02c" width="20" height="20"></rect><text y="15" x="30">East</text></g></g></g></g></svg></div></div>
</div>
<div class="card">
<h3>Scatterplot</h3>
<div class="chart"><div class="stream-xy-frame" role="img" aria-label="XY chart" style="position:relative;width:500px;height:320px"><svg xmlns="http://www.w3.org/2000/svg" width="500" height="320" style="position:absolute;left:0;top:0"><g transform="translate(70,50)"><circle cx="0" cy="192.5" r="5" fill="#1f77b4" opacity="0.8"></circle><circle cx="80.37037037037037" cy="106.16666666666666" r="5" fill="#1f77b4" opacity="0.8"></circle><circle cx="34.44444444444444" cy="162.16666666666669" r="5" fill="#ff7f0e" opacity="0.8"></circle><circle cx="229.62962962962962" cy="52.5" r="5" fill="#1f77b4" opacity="0.8"></circle><circle cx="149.25925925925924" cy="115.50000000000001" r="5" fill="#ff7f0e" opacity="0.8"></circle><circle cx="45.925925925925924" cy="145.83333333333331" r="5" fill="#2ca02c" opacity="0.8"></circle><circle cx="310" cy="17.500000000000007" r="5" fill="#1f77b4" opacity="0.8"></circle><circle cx="114.81481481481481" cy="129.5" r="5" fill="#2ca02c" opacity="0.8"></circle><circle cx="183.7037037037037" cy="75.83333333333334" r="5" fill="#ff7f0e" opacity="0.8"></circle><circle cx="22.962962962962962" cy="176.16666666666666" r="5" fill="#2ca02c" opacity="0.8"></circle><circle cx="91.85185185185185" cy="92.16666666666667" r="5" fill="#1f77b4" opacity="0.8"></circle><circle cx="264.0740740740741" cy="45.5" r="5" fill="#ff7f0e" opacity="0.8"></circle></g></svg><svg width="500" height="320" style="position:absolute;top:0;left:0;pointer-events:none"><g transform="translate(70,50)"><g class="stream-axes"><line x1="0" y1="210" x2="310" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(0,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">25</text></g><g transform="translate(57.407407407407405,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">30</text></g><g transform="translate(114.81481481481481,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">35</text></g><g transform="translate(172.22222222222223,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">40</text></g><g transform="translate(229.62962962962962,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">45</text></g><g transform="translate(287.03703703703707,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">50</text></g><line x1="0" y1="0" x2="0" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(0,180.83333333333334)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">40000</text></g><g transform="translate(0,134.16666666666666)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">60000</text></g><g transform="translate(0,87.49999999999999)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">80000</text></g><g transform="translate(0,40.83333333333333)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">100000</text></g></g></g><g transform="translate(390, 50)"><g><text class="legend-title" y="20" x="50" text-anchor="middle"></text><line stroke="gray" x1="0" y1="35" x2="100" y2="35"></line><g class="legend-item" transform="translate(0,45)"><g transform="translate(0,0)" style="cursor:default"><rect style="fill:#1f77b4;stroke:#1f77b4" width="20" height="20"></rect><text y="15" x="30">Eng</text></g><g transform="translate(0,25)" style="cursor:default"><rect style="fill:#ff7f0e;stroke:#ff7f0e" width="20" height="20"></rect><text y="15" x="30">Design</text></g><g transform="translate(0,50)" style="cursor:default"><rect style="fill:#2ca02c;stroke:#2ca02c" width="20" height="20"></rect><text y="15" x="30">Sales</text></g></g></g></g></svg></div></div>
</div>
<div class="card">
<h3>Heatmap</h3>
<div class="chart"><div class="stream-xy-frame" role="img" aria-label="XY chart" style="position:relative;width:500px;height:320px"><svg xmlns="http://www.w3.org/2000/svg" width="500" height="320" style="position:absolute;left:0;top:0"><g transform="translate(70,50)"><rect x="0" y="168" width="65" height="42" fill="rgb(192,204,247)"></rect><rect x="0" y="126" width="65" height="42" fill="rgb(125,167,229)"></rect><rect x="0" y="84" width="65" height="42" fill="rgb(113,161,225)"></rect><rect x="0" y="42" width="65" height="42" fill="rgb(161,187,239)"></rect><rect x="0" y="0" width="65" height="42" fill="rgb(218,219,254)"></rect><rect x="65" y="168" width="65" height="42" fill="rgb(121,165,227)"></rect><rect x="65" y="126" width="65" height="42" fill="rgb(109,158,224)"></rect><rect x="65" y="84" width="65" height="42" fill="rgb(156,184,237)"></rect><rect x="65" y="42" width="65" height="42" fill="rgb(213,216,253)"></rect><rect x="65" y="0" width="65" height="42" fill="rgb(220,220,255)"></rect><rect x="130" y="168" width="65" height="42" fill="rgb(104,156,223)"></rect><rect x="130" y="126" width="65" height="42" fill="rgb(151,182,236)"></rect><rect x="130" y="84" width="65" height="42" fill="rgb(208,213,252)"></rect><rect x="130" y="42" width="65" height="42" fill="rgb(215,217,254)"></rect><rect x="130" y="0" width="65" height="42" fill="rgb(158,186,238)"></rect><rect x="195" y="168" width="65" height="42" fill="rgb(147,179,235)"></rect><rect x="195" y="126" width="65" height="42" fill="rgb(203,211,250)"></rect><rect x="195" y="84" width="65" height="42" fill="rgb(211,215,252)"></rect><rect x="195" y="42" width="65" height="42" fill="rgb(154,183,237)"></rect><rect x="195" y="0" width="65" height="42" fill="rgb(80,142,216)"></rect><rect x="260" y="168" width="65" height="42" fill="rgb(199,208,249)"></rect><rect x="260" y="126" width="65" height="42" fill="rgb(206,212,251)"></rect><rect x="260" y="84" width="65" height="42" fill="rgb(149,181,235)"></rect><rect x="260" y="42" width="65" height="42" fill="rgb(76,140,215)"></rect><rect x="260" y="0" width="65" height="42" fill="rgb(45,123,206)"></rect><rect x="325" y="168" width="65" height="42" fill="rgb(201,209,250)"></rect><rect x="325" y="126" width="65" height="42" fill="rgb(144,178,234)"></rect><rect x="325" y="84" width="65" height="42" fill="rgb(71,137,214)"></rect><rect x="325" y="42" width="65" height="42" fill="rgb(40,120,205)"></rect><rect x="325" y="0" width="65" height="42" fill="rgb(76,140,215)"></rect></g></svg><svg width="500" height="320" style="position:absolute;top:0;left:0;pointer-events:none"><g transform="translate(70,50)"><g class="stream-axes"><line x1="0" y1="210" x2="390" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(0,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">0</text></g><g transform="translate(78,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">1</text></g><g transform="translate(156,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">2</text></g><g transform="translate(234,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">3</text></g><g transform="translate(312,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">4</text></g><g transform="translate(390,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">5</text></g><line x1="0" y1="0" x2="0" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(0,192.5)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">0</text></g><g transform="translate(0,148.75)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">1</text></g><g transform="translate(0,105.00000000000003)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">2</text></g><g transform="translate(0,61.250000000000014)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">3</text></g><g transform="translate(0,17.500000000000007)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">4</text></g></g></g></svg></div></div>
</div>
<div class="card">
<h3>BarChart</h3>
<div class="chart"><div class="stream-ordinal-frame" role="img" aria-label="Ordinal chart" style="position:relative;width:500px;height:320px"><svg xmlns="http://www.w3.org/2000/svg" width="500" height="320" style="position:absolute;left:0;top:0"><g transform="translate(70,50)"><rect x="0.8310991957104648" y="9.545454545454536" width="50.6970509383378" height="190.90909090909093" fill="#1f77b4"></rect><rect x="52.359249329758725" y="80.80025608194622" width="50.6970509383378" height="119.65428937259925" fill="#ff7f0e"></rect><rect x="103.88739946380699" y="114.41101152368758" width="50.6970509383378" height="86.04353393085789" fill="#2ca02c"></rect><rect x="155.41554959785526" y="131.88860435339308" width="50.6970509383378" height="68.56594110115239" fill="#d62728"></rect><rect x="206.9436997319035" y="149.3661971830986" width="50.6970509383378" height="51.088348271446876" fill="#9467bd"></rect><rect x="258.47184986595175" y="166.84379001280408" width="50.6970509383378" height="33.61075544174139" fill="#8c564b"></rect></g></svg><svg width="500" height="320" style="position:absolute;top:0;left:0;pointer-events:none"><g transform="translate(70,50)"><g class="ordinal-axes"><line x1="0" y1="210" x2="310" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(26.179624664879366,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Engineering</text></g><g transform="translate(77.70777479892763,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Sales</text></g><g transform="translate(129.23592493297588,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Marketing</text></g><g transform="translate(180.76407506702415,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Operations</text></g><g transform="translate(232.2922252010724,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Finance</text></g><g transform="translate(283.8203753351207,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">HR</text></g><line x1="0" y1="0" x2="0" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(0,200.45454545454547)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">0</text></g><g transform="translate(0,173.56594110115236)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">20</text></g><g transform="translate(0,146.67733674775928)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">40</text></g><g transform="translate(0,119.7887323943662)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">60</text></g><g transform="translate(0,92.90012804097312)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">80</text></g><g transform="translate(0,66.01152368758002)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">100</text></g><g transform="translate(0,39.12291933418694)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">120</text></g><g transform="translate(0,12.234314980793858)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">140</text></g></g></g><g transform="translate(390, 50)"><g><text class="legend-title" y="20" x="50" text-anchor="middle"></text><line stroke="gray" x1="0" y1="35" x2="100" y2="35"></line><g class="legend-item" transform="translate(0,45)"><g transform="translate(0,0)" style="cursor:default"><rect style="fill:#1f77b4;stroke:#1f77b4" width="20" height="20"></rect><text y="15" x="30">Engineering</text></g><g transform="translate(0,25)" style="cursor:default"><rect style="fill:#ff7f0e;stroke:#ff7f0e" width="20" height="20"></rect><text y="15" x="30">Sales</text></g><g transform="translate(0,50)" style="cursor:default"><rect style="fill:#2ca02c;stroke:#2ca02c" width="20" height="20"></rect><text y="15" x="30">Marketing</text></g><g transform="translate(0,75)" style="cursor:default"><rect style="fill:#d62728;stroke:#d62728" width="20" height="20"></rect><text y="15" x="30">Operations</text></g><g transform="translate(0,100)" style="cursor:default"><rect style="fill:#9467bd;stroke:#9467bd" width="20" height="20"></rect><text y="15" x="30">Finance</text></g><g transform="translate(0,125)" style="cursor:default"><rect style="fill:#8c564b;stroke:#8c564b" width="20" height="20"></rect><text y="15" x="30">HR</text></g></g></g></g></svg></div></div>
</div>
<div class="card">
<h3>BarChart (horizontal)</h3>
<div class="chart"><div class="stream-ordinal-frame" role="img" aria-label="Ordinal chart" style="position:relative;width:500px;height:320px"><svg xmlns="http://www.w3.org/2000/svg" width="500" height="320" style="position:absolute;left:0;top:0"><g transform="translate(70,50)"><rect x="14.090909090909093" y="0.8300395256917028" width="281.81818181818187" height="34.03162055335968" fill="#1f77b4"></rect><rect x="14.090909090909093" y="35.691699604743086" width="176.63252240717028" height="34.03162055335968" fill="#ff7f0e"></rect><rect x="14.090909090909093" y="70.55335968379447" width="127.01664532650449" height="34.03162055335968" fill="#2ca02c"></rect><rect x="14.090909090909093" y="105.41501976284586" width="101.21638924455827" height="34.03162055335968" fill="#d62728"></rect><rect x="14.090909090909093" y="140.27667984189725" width="75.41613316261204" height="34.03162055335968" fill="#9467bd"></rect><rect x="14.090909090909093" y="175.13833992094862" width="49.61587708066582" height="34.03162055335968" fill="#8c564b"></rect></g></svg><svg width="500" height="320" style="position:absolute;top:0;left:0;pointer-events:none"><g transform="translate(70,50)"><g class="ordinal-axes"><line x1="0" y1="0" x2="0" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(0,17.845849802371543)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Engineering</text></g><g transform="translate(0,52.70750988142292)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Sales</text></g><g transform="translate(0,87.56916996047431)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Marketing</text></g><g transform="translate(0,122.4308300395257)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Operations</text></g><g transform="translate(0,157.2924901185771)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Finance</text></g><g transform="translate(0,192.15415019762847)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">HR</text></g><line x1="0" y1="210" x2="310" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(14.090909090909093,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">0</text></g><g transform="translate(53.78361075544174,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">20</text></g><g transform="translate(93.47631241997439,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">40</text></g><g transform="translate(133.16901408450704,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">60</text></g><g transform="translate(172.8617157490397,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">80</text></g><g transform="translate(212.55441741357237,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">100</text></g><g transform="translate(252.247119078105,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">120</text></g><g transform="translate(291.93982074263766,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">140</text></g></g></g><g transform="translate(390, 50)"><g><text class="legend-title" y="20" x="50" text-anchor="middle"></text><line stroke="gray" x1="0" y1="35" x2="100" y2="35"></line><g class="legend-item" transform="translate(0,45)"><g transform="translate(0,0)" style="cursor:default"><rect style="fill:#1f77b4;stroke:#1f77b4" width="20" height="20"></rect><text y="15" x="30">Engineering</text></g><g transform="translate(0,25)" style="cursor:default"><rect style="fill:#ff7f0e;stroke:#ff7f0e" width="20" height="20"></rect><text y="15" x="30">Sales</text></g><g transform="translate(0,50)" style="cursor:default"><rect style="fill:#2ca02c;stroke:#2ca02c" width="20" height="20"></rect><text y="15" x="30">Marketing</text></g><g transform="translate(0,75)" style="cursor:default"><rect style="fill:#d62728;stroke:#d62728" width="20" height="20"></rect><text y="15" x="30">Operations</text></g><g transform="translate(0,100)" style="cursor:default"><rect style="fill:#9467bd;stroke:#9467bd" width="20" height="20"></rect><text y="15" x="30">Finance</text></g><g transform="translate(0,125)" style="cursor:default"><rect style="fill:#8c564b;stroke:#8c564b" width="20" height="20"></rect><text y="15" x="30">HR</text></g></g></g></g></svg></div></div>
</div>
<div class="card">
<h3>StackedBarChart</h3>
<div class="chart"><div class="stream-ordinal-frame" role="img" aria-label="Ordinal chart" style="position:relative;width:500px;height:320px"><svg xmlns="http://www.w3.org/2000/svg" width="500" height="320" style="position:absolute;left:0;top:0"><g transform="translate(70,50)"><rect x="1.244979919678741" y="118.8445523941707" width="75.9437751004016" height="81.60999306037476" fill="#1f77b4"></rect><rect x="1.244979919678741" y="59.09437890353921" width="75.9437751004016" height="59.7501734906315" fill="#ff7f0e"></rect><rect x="1.244979919678741" y="9.545454545454536" width="75.9437751004016" height="49.548924358084676" fill="#2ca02c"></rect><rect x="78.43373493975905" y="126.13115891741847" width="75.9437751004016" height="74.32338653712699" fill="#1f77b4"></rect><rect x="78.43373493975905" y="75.12491325468426" width="75.9437751004016" height="51.006245662734216" fill="#ff7f0e"></rect><rect x="78.43373493975905" y="29.947952810548227" width="75.9437751004016" height="45.17696044413603" fill="#2ca02c"></rect><rect x="155.62248995983936" y="130.5031228313671" width="75.9437751004016" height="69.95142262317836" fill="#1f77b4"></rect><rect x="155.62248995983936" y="75.12491325468426" width="75.9437751004016" height="55.37820957668285" fill="#ff7f0e"></rect><rect x="155.62248995983936" y="32.862595419847324" width="75.9437751004016" height="42.262317834836935" fill="#2ca02c"></rect><rect x="232.81124497991968" y="134.87508674531574" width="75.9437751004016" height="65.57945870922973" fill="#1f77b4"></rect><rect x="232.81124497991968" y="88.2408049965302" width="75.9437751004016" height="46.63428174878554" fill="#ff7f0e"></rect><rect x="232.81124497991968" y="47.43580846634282" width="75.9437751004016" height="40.80499653018738" fill="#2ca02c"></rect></g></svg><svg width="500" height="320" style="position:absolute;top:0;left:0;pointer-events:none"><g transform="translate(70,50)"><g class="ordinal-axes"><line x1="0" y1="210" x2="310" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(39.21686746987954,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Q4</text></g><g transform="translate(116.40562248995985,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Q2</text></g><g transform="translate(193.59437751004015,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Q3</text></g><g transform="translate(270.7831325301205,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Q1</text></g><line x1="0" y1="0" x2="0" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(0,200.45454545454547)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">0</text></g><g transform="translate(0,171.30811936155447)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">200</text></g><g transform="translate(0,142.16169326856348)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">400</text></g><g transform="translate(0,113.0152671755725)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">600</text></g><g transform="translate(0,83.86884108258155)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">800</text></g><g transform="translate(0,54.72241498959056)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">1000</text></g><g transform="translate(0,25.57598889659958)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">1200</text></g></g></g><g transform="translate(390, 50)"><g><text class="legend-title" y="20" x="50" text-anchor="middle"></text><line stroke="gray" x1="0" y1="35" x2="100" y2="35"></line><g class="legend-item" transform="translate(0,45)"><g transform="translate(0,0)" style="cursor:default"><rect style="fill:#1f77b4;stroke:#1f77b4" width="20" height="20"></rect><text y="15" x="30">Eng</text></g><g transform="translate(0,25)" style="cursor:default"><rect style="fill:#ff7f0e;stroke:#ff7f0e" width="20" height="20"></rect><text y="15" x="30">Sales</text></g><g transform="translate(0,50)" style="cursor:default"><rect style="fill:#2ca02c;stroke:#2ca02c" width="20" height="20"></rect><text y="15" x="30">Mktg</text></g></g></g></g></svg></div></div>
</div>
<div class="card">
<h3>PieChart</h3>
<div class="chart"><div class="stream-ordinal-frame" role="img" aria-label="Ordinal chart" style="position:relative;width:360px;height:360px"><svg xmlns="http://www.w3.org/2000/svg" width="360" height="360" style="position:absolute;left:0;top:0"><g transform="translate(155,175)"><path d="M-81,0A81,81,0,1,1,70.981,39.022L0,0Z" transform="translate(0,0)" fill="#1f77b4"></path><path d="M70.981,39.022A81,81,0,0,1,-51.631,62.412L0,0Z" transform="translate(0,0)" fill="#ff7f0e"></path><path d="M-51.631,62.412A81,81,0,0,1,-78.455,20.144L0,0Z" transform="translate(0,0)" fill="#2ca02c"></path><path d="M-78.455,20.144A81,81,0,0,1,-81,0L0,0Z" transform="translate(0,0)" fill="#d62728"></path></g></svg><svg width="360" height="360" style="position:absolute;top:0;left:0;pointer-events:none"><g transform="translate(70,50)"></g><g transform="translate(250, 50)"><g><text class="legend-title" y="20" x="50" text-anchor="middle"></text><line stroke="gray" x1="0" y1="35" x2="100" y2="35"></line><g class="legend-item" transform="translate(0,45)"><g transform="translate(0,0)" style="cursor:default"><rect style="fill:#1f77b4;stroke:#1f77b4" width="20" height="20"></rect><text y="15" x="30">Desktop</text></g><g transform="translate(0,25)" style="cursor:default"><rect style="fill:#ff7f0e;stroke:#ff7f0e" width="20" height="20"></rect><text y="15" x="30">Mobile</text></g><g transform="translate(0,50)" style="cursor:default"><rect style="fill:#2ca02c;stroke:#2ca02c" width="20" height="20"></rect><text y="15" x="30">Tablet</text></g><g transform="translate(0,75)" style="cursor:default"><rect style="fill:#d62728;stroke:#d62728" width="20" height="20"></rect><text y="15" x="30">Other</text></g></g></g></g></svg></div></div>
</div>
<div class="card">
<h3>DonutChart</h3>
<div class="chart"><div class="stream-ordinal-frame" role="img" aria-label="Ordinal chart" style="position:relative;width:360px;height:360px"><svg xmlns="http://www.w3.org/2000/svg" width="360" height="360" style="position:absolute;left:0;top:0"><g transform="translate(155,175)"><path d="M-81,0A81,81,0,1,1,70.981,39.022L52.578,28.905A60,60,0,1,0,-60,0Z" transform="translate(0,0)" fill="#1f77b4"></path><path d="M70.981,39.022A81,81,0,0,1,-51.631,62.412L-38.245,46.231A60,60,0,0,0,52.578,28.905Z" transform="translate(0,0)" fill="#ff7f0e"></path><path d="M-51.631,62.412A81,81,0,0,1,-78.455,20.144L-58.115,14.921A60,60,0,0,0,-38.245,46.231Z" transform="translate(0,0)" fill="#2ca02c"></path><path d="M-78.455,20.144A81,81,0,0,1,-81,0L-60,0A60,60,0,0,0,-58.115,14.921Z" transform="translate(0,0)" fill="#d62728"></path></g></svg><svg width="360" height="360" style="position:absolute;top:0;left:0;pointer-events:none"><g transform="translate(70,50)"></g><g transform="translate(250, 50)"><g><text class="legend-title" y="20" x="50" text-anchor="middle"></text><line stroke="gray" x1="0" y1="35" x2="100" y2="35"></line><g class="legend-item" transform="translate(0,45)"><g transform="translate(0,0)" style="cursor:default"><rect style="fill:#1f77b4;stroke:#1f77b4" width="20" height="20"></rect><text y="15" x="30">Desktop</text></g><g transform="translate(0,25)" style="cursor:default"><rect style="fill:#ff7f0e;stroke:#ff7f0e" width="20" height="20"></rect><text y="15" x="30">Mobile</text></g><g transform="translate(0,50)" style="cursor:default"><rect style="fill:#2ca02c;stroke:#2ca02c" width="20" height="20"></rect><text y="15" x="30">Tablet</text></g><g transform="translate(0,75)" style="cursor:default"><rect style="fill:#d62728;stroke:#d62728" width="20" height="20"></rect><text y="15" x="30">Other</text></g></g></g></g></svg></div></div>
</div>
<div class="card">
<h3>BoxPlot</h3>
<div class="chart"><div class="stream-ordinal-frame" role="img" aria-label="Ordinal chart" style="position:relative;width:500px;height:320px"><svg xmlns="http://www.w3.org/2000/svg" width="500" height="320" style="position:absolute;left:0;top:0"><g transform="translate(70,50)"><g><line x1="50.60126582278481" y1="124.3137776673105" x2="50.60126582278481" y2="9.545454545454536" stroke="#007bff" stroke-width="1"></line><rect x="23.20253164556962" y="43.311189712650766" width="54.79746835443038" height="51.74075339166722" fill="#007bff" fill-opacity="0.8" stroke="#007bff" stroke-width="1"></rect><line x1="23.20253164556962" y1="65.69282637088655" x2="78" y2="65.69282637088655" stroke="#007bff" stroke-width="2"></line><line x1="36.901898734177216" y1="124.3137776673105" x2="64.3006329113924" y2="124.3137776673105" stroke="#007bff" stroke-width="1"></line><line x1="36.901898734177216" y1="9.545454545454536" x2="64.3006329113924" y2="9.545454545454536" stroke="#007bff" stroke-width="1"></line></g><g><line x1="146.86708860759495" y1="138.96558116561107" x2="146.86708860759495" y2="22.98078304704981" stroke="#007bff" stroke-width="1"></line><rect x="119.46835443037976" y="38.49597853699482" width="54.79746835443038" height="60.948505085909" fill="#007bff" fill-opacity="0.8" stroke="#007bff" stroke-width="1"></rect><line x1="119.46835443037976" y1="64.31990942361489" x2="174.26582278481015" y2="64.31990942361489" stroke="#007bff" stroke-width="2"></line><line x1="133.16772151898735" y1="138.96558116561107" x2="160.56645569620255" y2="138.96558116561107" stroke="#007bff" stroke-width="1"></line><line x1="133.16772151898735" y1="22.98078304704981" x2="160.56645569620255" y2="22.98078304704981" stroke="#007bff" stroke-width="1"></line></g><g><line x1="243.13291139240505" y1="184.32133569911622" x2="243.13291139240505" y2="107.54050831289094" stroke="#007bff" stroke-width="1"></line><rect x="215.73417721518985" y="128.39522716863914" width="54.79746835443038" height="23.18097833667656" fill="#007bff" fill-opacity="0.8" stroke="#007bff" stroke-width="1"></rect><line x1="215.73417721518985" y1="140.04216159420506" x2="270.53164556962025" y2="140.04216159420506" stroke="#007bff" stroke-width="2"></line><line x1="229.43354430379745" y1="184.32133569911622" x2="256.8322784810126" y2="184.32133569911622" stroke="#007bff" stroke-width="1"></line><line x1="229.43354430379745" y1="107.54050831289094" x2="256.8322784810126" y2="107.54050831289094" stroke="#007bff" stroke-width="1"></line></g><circle cx="243.13291139240505" cy="86.34948245059992" r="3" fill="#007bff" opacity="0.6"></circle><circle cx="243.13291139240505" cy="70.06863640676225" r="3" fill="#007bff" opacity="0.6"></circle><g><line x1="339.3987341772152" y1="200.45454545454547" x2="339.3987341772152" y2="80.19158904170651" stroke="#007bff" stroke-width="1"></line><rect x="312" y="114.42012831276213" width="54.79746835443038" height="61.35926704573299" fill="#007bff" fill-opacity="0.8" stroke="#007bff" stroke-width="1"></rect><line x1="312" y1="147.93818348824954" x2="366.7974683544304" y2="147.93818348824954" stroke="#007bff" stroke-width="2"></line><line x1="325.69936708860763" y1="200.45454545454547" x2="353.0981012658228" y2="200.45454545454547" stroke="#007bff" stroke-width="1"></line><line x1="325.69936708860763" y1="80.19158904170651" x2="353.0981012658228" y2="80.19158904170651" stroke="#007bff" stroke-width="1"></line></g></g></svg><svg width="500" height="320" style="position:absolute;top:0;left:0;pointer-events:none"><g transform="translate(70,50)"><g class="ordinal-axes"><line x1="0" y1="210" x2="390" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(50.60126582278481,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">D</text></g><g transform="translate(146.86708860759495,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">B</text></g><g transform="translate(243.13291139240505,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">A</text></g><g transform="translate(339.3987341772152,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">C</text></g><line x1="0" y1="0" x2="0" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(0,185.63869142346022)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">30</text></g><g transform="translate(0,155.08638877747993)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">40</text></g><g transform="translate(0,124.53408613149963)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">50</text></g><g transform="translate(0,93.98178348551933)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">60</text></g><g transform="translate(0,63.42948083953903)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">70</text></g><g transform="translate(0,32.877178193558734)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">80</text></g><g transform="translate(0,2.3248755475784555)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">90</text></g></g></g></svg></div></div>
</div>
<div class="card">
<h3>DotPlot</h3>
<div class="chart"><div class="stream-ordinal-frame" role="img" aria-label="Ordinal chart" style="position:relative;width:500px;height:320px"><svg xmlns="http://www.w3.org/2000/svg" width="500" height="320" style="position:absolute;left:0;top:0"><g transform="translate(70,50)"><circle cx="372.2727272727273" cy="18.188976377952763" r="5" fill="#007bff" opacity="0.8"></circle><circle cx="211.66666666666666" cy="52.91338582677166" r="5" fill="#007bff" opacity="0.8"></circle><circle cx="135.9090909090909" cy="87.63779527559055" r="5" fill="#007bff" opacity="0.8"></circle><circle cx="96.51515151515153" cy="122.36220472440945" r="5" fill="#007bff" opacity="0.8"></circle><circle cx="57.12121212121213" cy="157.08661417322833" r="5" fill="#007bff" opacity="0.8"></circle><circle cx="17.727272727272734" cy="191.81102362204723" r="5" fill="#007bff" opacity="0.8"></circle></g></svg><svg width="500" height="320" style="position:absolute;top:0;left:0;pointer-events:none"><g transform="translate(70,50)"><g class="ordinal-grid"><line x1="2.57575757575758" y1="0" x2="2.57575757575758" y2="210" stroke="var(--semiotic-grid, #e0e0e0)" stroke-width="1"></line><line x1="63.181818181818194" y1="0" x2="63.181818181818194" y2="210" stroke="var(--semiotic-grid, #e0e0e0)" stroke-width="1"></line><line x1="123.78787878787881" y1="0" x2="123.78787878787881" y2="210" stroke="var(--semiotic-grid, #e0e0e0)" stroke-width="1"></line><line x1="184.3939393939394" y1="0" x2="184.3939393939394" y2="210" stroke="var(--semiotic-grid, #e0e0e0)" stroke-width="1"></line><line x1="245" y1="0" x2="245" y2="210" stroke="var(--semiotic-grid, #e0e0e0)" stroke-width="1"></line><line x1="305.6060606060606" y1="0" x2="305.6060606060606" y2="210" stroke="var(--semiotic-grid, #e0e0e0)" stroke-width="1"></line><line x1="366.21212121212125" y1="0" x2="366.21212121212125" y2="210" stroke="var(--semiotic-grid, #e0e0e0)" stroke-width="1"></line></g><g class="ordinal-axes"><line x1="0" y1="0" x2="0" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(0,18.188976377952763)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Engineering</text></g><g transform="translate(0,52.91338582677166)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Sales</text></g><g transform="translate(0,87.63779527559055)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Marketing</text></g><g transform="translate(0,122.36220472440945)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Operations</text></g><g transform="translate(0,157.08661417322833)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">Finance</text></g><g transform="translate(0,191.81102362204723)"><line x2="-5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">HR</text></g><line x1="0" y1="210" x2="390" y2="210" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><g transform="translate(2.57575757575758,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">20</text></g><g transform="translate(63.181818181818194,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">40</text></g><g transform="translate(123.78787878787881,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">60</text></g><g transform="translate(184.3939393939394,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">80</text></g><g transform="translate(245,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">100</text></g><g transform="translate(305.6060606060606,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">120</text></g><g transform="translate(366.21212121212125,210)"><line y2="5" stroke="var(--semiotic-border, #ccc)" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="var(--semiotic-text-secondary, #666)" style="user-select:none">140</text></g></g></g></svg></div></div>
</div>
<div class="card">
<h3>ForceDirectedGraph</h3>
<div class="chart"><div class="stream-network-frame" role="img" aria-label="Network chart" style="position:relative;width:500px;height:320px"><svg xmlns="http://www.w3.org/2000/svg" width="500" height="320" style="position:absolute;left:0;top:0"><g transform="translate(70,50)"><line x1="111.91796247721038" y1="120.93380024048948" x2="174.57139184050598" y2="150.038802315279" stroke="#999" stroke-width="1" opacity="0.6"></line><line x1="111.91796247721038" y1="120.93380024048948" x2="112.44848190181017" y2="48.857399672198184" stroke="#999" stroke-width="1" opacity="0.6"></line><line x1="174.57139184050598" y1="150.038802315279" x2="241.6001474770049" y2="149.37974720124504" stroke="#999" stroke-width="1" opacity="0.6"></line><line x1="112.44848190181017" y1="48.857399672198184" x2="53.997650116320415" y2="90.61854356935352" stroke="#999" stroke-width="1" opacity="0.6"></line><line x1="241.6001474770049" y1="149.37974720124504" x2="228.21784447951643" y2="87.38635718473716" stroke="#999" stroke-width="1" opacity="0.6"></line><line x1="53.997650116320415" y1="90.61854356935352" x2="111.91796247721038" y2="120.93380024048948" stroke="#999" stroke-width="1" opacity="0.6"></line><line x1="228.21784447951643" y1="87.38635718473716" x2="174.57139184050598" y2="150.038802315279" stroke="#999" stroke-width="1" opacity="0.6"></line><circle cx="111.91796247721038" cy="120.93380024048948" r="10" fill="#1f77b4" stroke="#fff" stroke-width="2"></circle><circle cx="174.57139184050598" cy="150.038802315279" r="10" fill="#1f77b4" stroke="#fff" stroke-width="2"></circle><circle cx="112.44848190181017" cy="48.857399672198184" r="10" fill="#ff7f0e" stroke="#fff" stroke-width="2"></circle><circle cx="241.6001474770049" cy="149.37974720124504" r="10" fill="#ff7f0e" stroke="#fff" stroke-width="2"></circle><circle cx="53.997650116320415" cy="90.61854356935352" r="10" fill="#2ca02c" stroke="#fff" stroke-width="2"></circle><circle cx="228.21784447951643" cy="87.38635718473716" r="10" fill="#2ca02c" stroke="#fff" stroke-width="2"></circle><text x="111.91796247721038" y="106.93380024048948" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="#333">Alice</text><text x="174.57139184050598" y="136.038802315279" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="#333">Bob</text><text x="112.44848190181017" y="34.857399672198184" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="#333">Carol</text><text x="241.6001474770049" y="135.37974720124504" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="#333">Dave</text><text x="53.997650116320415" y="76.61854356935352" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="#333">Eve</text><text x="228.21784447951643" y="73.38635718473716" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="#333">Frank</text></g></svg><svg width="500" height="320" style="position:absolute;top:0;left:0;pointer-events:none"><g transform="translate(70,50)"><text x="111.91796247721038" y="106.93380024048948" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="currentColor" style="pointer-events:none">Alice</text><text x="174.57139184050598" y="136.038802315279" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="currentColor" style="pointer-events:none">Bob</text><text x="112.44848190181017" y="34.857399672198184" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="currentColor" style="pointer-events:none">Carol</text><text x="241.6001474770049" y="135.37974720124504" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="currentColor" style="pointer-events:none">Dave</text><text x="53.997650116320415" y="76.61854356935352" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="currentColor" style="pointer-events:none">Eve</text><text x="228.21784447951643" y="73.38635718473716" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="currentColor" style="pointer-events:none">Frank</text></g><g transform="translate(390,50)"><g><g transform="translate(0,0)"><rect x="0" y="0" width="12" height="12" fill="#1f77b4" rx="2"></rect><text x="18" y="10" font-size="11" fill="currentColor">Eng</text></g><g transform="translate(0,20)"><rect x="0" y="0" width="12" height="12" fill="#ff7f0e" rx="2"></rect><text x="18" y="10" font-size="11" fill="currentColor">Design</text></g><g transform="translate(0,40)"><rect x="0" y="0" width="12" height="12" fill="#2ca02c" rx="2"></rect><text x="18" y="10" font-size="11" fill="currentColor">PM</text></g></g></g></svg></div></div>
</div>
<div class="card">
<h3>SankeyDiagram</h3>
<div class="chart"><div class="stream-network-frame" role="img" aria-label="Network chart" style="position:relative;width:500px;height:320px"><svg xmlns="http://www.w3.org/2000/svg" width="500" height="320" style="position:absolute;left:0;top:0"><g transform="translate(70,50)"><path d="M15,28.023455293154683C70,28.023455293154683 70,0 125,0L125,63.9591818291818C70,63.9591818291818 70,91.98263712233648 15,91.98263712233648Z" fill="#4d430c" fill-opacity="0.5" stroke="none" stroke-width="0"></path><path d="M265,72.06721116289324C320,72.06721116289324 320,97.72581846739814 375,97.72581846739814L375,151.23790923369916C320,151.23790923369916 320,125.57930192919426 265,125.57930192919426Z" fill="#4d430c" fill-opacity="0.5" stroke="none" stroke-width="0"></path><path d="M265,125.57930192919426C320,125.57930192919426 320,156.48790923369899 375,156.48790923369899L375,210C320,210 320,179.09139269549527 265,179.09139269549527Z" fill="#4d430c" fill-opacity="0.5" stroke="none" stroke-width="0"></path><path d="M15,91.98263712233648C70,91.98263712233648 70,95.24390758450845 125,95.24390758450845L125,144.78647679680307C70,144.78647679680307 70,141.52520633463112 15,141.52520633463112Z" fill="#4d430c" fill-opacity="0.5" stroke="none" stroke-width="0"></path><path d="M140,40.45133837221378C195,40.45133837221378 195,72.06721116289324 250,72.06721116289324L250,121.60978037518788C195,121.60978037518788 195,89.99390758450842 140,89.99390758450842Z" fill="#4d430c" fill-opacity="0.5" stroke="none" stroke-width="0"></path><path d="M15,141.52520633463112C70,141.52520633463112 70,169.54866162778615 125,169.54866162778615L125,209.99999999999994C70,209.99999999999994 70,181.97654470684492 15,181.97654470684492Z" fill="#4d430c" fill-opacity="0.5" stroke="none" stroke-width="0"></path><path d="M140,0C257.5,0 257.5,23.421064424120498 375,23.421064424120498L375,63.872402796334285C257.5,63.872402796334285 257.5,40.45133837221379 140,40.45133837221379Z" fill="#4d430c" fill-opacity="0.5" stroke="none" stroke-width="0"></path><path d="M140,123.84732325557243C195,123.84732325557243 195,121.60978037518785 250,121.60978037518785L250,162.06111874740165C195,162.06111874740165 195,164.29866162778623 140,164.29866162778623Z" fill="#4d430c" fill-opacity="0.5" stroke="none" stroke-width="0"></path><path d="M140,169.54866162778615C195,169.54866162778615 195,162.06111874740165 250,162.06111874740165L250,202.51245711961545C195,202.51245711961545 195,209.99999999999994 140,209.99999999999994Z" fill="#4d430c" fill-opacity="0.5" stroke="none" stroke-width="0"></path><path d="M140,95.24390758450845C257.5,95.24390758450845 257.5,63.8724027963343 375,63.8724027963343L375,92.47581846739827C257.5,92.47581846739827 257.5,123.84732325557242 140,123.84732325557242Z" fill="#4d430c" fill-opacity="0.5" stroke="none" stroke-width="0"></path><rect x="0" y="28.02345529315468" width="15" height="153.95308941369024" fill="#4d430c" stroke="black" stroke-width="1"></rect><rect x="125" y="0" width="15" height="89.99390758450835" fill="#4d430c" stroke="black" stroke-width="1"></rect><rect x="125" y="95.24390758450845" width="15" height="69.05475404327764" fill="#4d430c" stroke="black" stroke-width="1"></rect><rect x="125" y="169.54866162778615" width="15" height="40.4513383722138" fill="#4d430c" stroke="black" stroke-width="1"></rect><rect x="375" y="23.4210644241205" width="15" height="69.05475404327757" fill="#4d430c" stroke="black" stroke-width="1"></rect><rect x="250" y="72.06721116289324" width="15" height="130.4452459567221" fill="#4d430c" stroke="black" stroke-width="1"></rect><rect x="375" y="97.72581846739814" width="15" height="53.51209076630079" fill="#4d430c" stroke="black" stroke-width="1"></rect><rect x="375" y="156.48790923369899" width="15" height="53.51209076630096" fill="#4d430c" stroke="black" stroke-width="1"></rect><text x="-6" y="104.9999999999998" text-anchor="end" dominant-baseline="middle" font-size="11" fill="#333">Revenue</text><text x="119" y="44.996953792254175" text-anchor="end" dominant-baseline="middle" font-size="11" fill="#333">Product</text><text x="119" y="129.77128460614728" text-anchor="end" dominant-baseline="middle" font-size="11" fill="#333">Services</text><text x="119" y="189.77433081389304" text-anchor="end" dominant-baseline="middle" font-size="11" fill="#333">Licensing</text><text x="396" y="57.948441445759286" text-anchor="start" dominant-baseline="middle" font-size="11" fill="#333">COGS</text><text x="271" y="137.2898341412543" text-anchor="start" dominant-baseline="middle" font-size="11" fill="#333">Gross Profit</text><text x="396" y="124.48186385054854" text-anchor="start" dominant-baseline="middle" font-size="11" fill="#333">OpEx</text><text x="396" y="183.24395461684946" text-anchor="start" dominant-baseline="middle" font-size="11" fill="#333">Net Income</text></g></svg><svg width="500" height="320" style="position:absolute;top:0;left:0;pointer-events:none"><g transform="translate(70,50)"><text x="-6" y="104.9999999999998" text-anchor="end" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Revenue</text><text x="119" y="44.996953792254175" text-anchor="end" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Product</text><text x="119" y="129.77128460614728" text-anchor="end" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Services</text><text x="119" y="189.77433081389304" text-anchor="end" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Licensing</text><text x="396" y="57.948441445759286" text-anchor="start" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">COGS</text><text x="271" y="137.2898341412543" text-anchor="start" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Gross Profit</text><text x="396" y="124.48186385054854" text-anchor="start" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">OpEx</text><text x="396" y="183.24395461684946" text-anchor="start" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Net Income</text></g></svg></div></div>
</div>
<div class="card">
<h3>TreeDiagram</h3>
<div class="chart"><div class="stream-network-frame" role="img" aria-label="Network chart" style="position:relative;width:500px;height:320px"><svg xmlns="http://www.w3.org/2000/svg" width="500" height="320" style="position:absolute;left:0;top:0"><g transform="translate(70,50)"><path d="M 220.27777777777777,0 C 220.27777777777777,35 108.33333333333333,35 108.33333333333333,70" fill="none" stroke="#999" stroke-width="1" opacity="0.5"></path><path d="M 220.27777777777777,0 C 220.27777777777777,35 231.11111111111111,35 231.11111111111111,70" fill="none" stroke="#999" stroke-width="1" opacity="0.5"></path><path d="M 220.27777777777777,0 C 220.27777777777777,35 332.22222222222223,35 332.22222222222223,70" fill="none" stroke="#999" stroke-width="1" opacity="0.5"></path><path d="M 108.33333333333333,70 C 108.33333333333333,105 57.77777777777778,105 57.77777777777778,140" fill="none" stroke="#999" stroke-width="1" opacity="0.5"></path><path d="M 108.33333333333333,70 C 108.33333333333333,105 158.88888888888889,105 158.88888888888889,140" fill="none" stroke="#999" stroke-width="1" opacity="0.5"></path><path d="M 231.11111111111111,70 C 231.11111111111111,105 216.66666666666666,105 216.66666666666666,140" fill="none" stroke="#999" stroke-width="1" opacity="0.5"></path><path d="M 231.11111111111111,70 C 231.11111111111111,105 245.55555555555557,105 245.55555555555557,140" fill="none" stroke="#999" stroke-width="1" opacity="0.5"></path><path d="M 332.22222222222223,70 C 332.22222222222223,105 303.3333333333333,105 303.3333333333333,140" fill="none" stroke="#999" stroke-width="1" opacity="0.5"></path><path d="M 332.22222222222223,70 C 332.22222222222223,105 332.22222222222223,105 332.22222222222223,140" fill="none" stroke="#999" stroke-width="1" opacity="0.5"></path><path d="M 332.22222222222223,70 C 332.22222222222223,105 361.11111111111114,105 361.11111111111114,140" fill="none" stroke="#999" stroke-width="1" opacity="0.5"></path><path d="M 57.77777777777778,140 C 57.77777777777778,175 28.888888888888886,175 28.888888888888886,210" fill="none" stroke="#999" stroke-width="1" opacity="0.5"></path><path d="M 57.77777777777778,140 C 57.77777777777778,175 57.77777777777778,175 57.77777777777778,210" fill="none" stroke="#999" stroke-width="1" opacity="0.5"></path><path d="M 57.77777777777778,140 C 57.77777777777778,175 86.66666666666667,175 86.66666666666667,210" fill="none" stroke="#999" stroke-width="1" opacity="0.5"></path><path d="M 158.88888888888889,140 C 158.88888888888889,175 144.44444444444446,175 144.44444444444446,210" fill="none" stroke="#999" stroke-width="1" opacity="0.5"></path><path d="M 158.88888888888889,140 C 158.88888888888889,175 173.33333333333334,175 173.33333333333334,210" fill="none" stroke="#999" stroke-width="1" opacity="0.5"></path><circle cx="220.27777777777777" cy="0" r="5" fill="#e8d5b7" stroke="black" stroke-width="1"></circle><circle cx="108.33333333333333" cy="70" r="5" fill="#b8d4e3" stroke="black" stroke-width="1"></circle><circle cx="231.11111111111111" cy="70" r="5" fill="#b8d4e3" stroke="black" stroke-width="1"></circle><circle cx="332.22222222222223" cy="70" r="5" fill="#b8d4e3" stroke="black" stroke-width="1"></circle><circle cx="57.77777777777778" cy="140" r="5" fill="#d4e3b8" stroke="black" stroke-width="1"></circle><circle cx="158.88888888888889" cy="140" r="5" fill="#d4e3b8" stroke="black" stroke-width="1"></circle><circle cx="216.66666666666666" cy="140" r="5" fill="#d4e3b8" stroke="black" stroke-width="1"></circle><circle cx="245.55555555555557" cy="140" r="5" fill="#d4e3b8" stroke="black" stroke-width="1"></circle><circle cx="303.3333333333333" cy="140" r="5" fill="#d4e3b8" stroke="black" stroke-width="1"></circle><circle cx="332.22222222222223" cy="140" r="5" fill="#d4e3b8" stroke="black" stroke-width="1"></circle><circle cx="361.11111111111114" cy="140" r="5" fill="#d4e3b8" stroke="black" stroke-width="1"></circle><circle cx="28.888888888888886" cy="210" r="5" fill="#e3c4d4" stroke="black" stroke-width="1"></circle><circle cx="57.77777777777778" cy="210" r="5" fill="#e3c4d4" stroke="black" stroke-width="1"></circle><circle cx="86.66666666666667" cy="210" r="5" fill="#e3c4d4" stroke="black" stroke-width="1"></circle><circle cx="144.44444444444446" cy="210" r="5" fill="#e3c4d4" stroke="black" stroke-width="1"></circle><circle cx="173.33333333333334" cy="210" r="5" fill="#e3c4d4" stroke="black" stroke-width="1"></circle><text x="220.27777777777777" y="19" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">CEO</text><text x="108.33333333333333" y="89" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">CTO</text><text x="231.11111111111111" y="89" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">CFO</text><text x="332.22222222222223" y="89" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">COO</text><text x="57.77777777777778" y="159" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">Eng Lead</text><text x="158.88888888888889" y="159" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">Data Lead</text><text x="216.66666666666666" y="159" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">Accounting</text><text x="245.55555555555557" y="159" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">FP&A</text><text x="303.3333333333333" y="159" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">HR</text><text x="332.22222222222223" y="159" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">Facilities</text><text x="361.11111111111114" y="159" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">Legal</text><text x="28.888888888888886" y="229" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">Frontend</text><text x="57.77777777777778" y="229" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">Backend</text><text x="86.66666666666667" y="229" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">Infra</text><text x="144.44444444444446" y="229" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">ML</text><text x="173.33333333333334" y="229" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">Analytics</text></g></svg><svg width="500" height="320" style="position:absolute;top:0;left:0;pointer-events:none"><g transform="translate(70,50)"><text x="220.27777777777777" y="19" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">CEO</text><text x="108.33333333333333" y="89" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">CTO</text><text x="231.11111111111111" y="89" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">CFO</text><text x="332.22222222222223" y="89" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">COO</text><text x="57.77777777777778" y="159" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Eng Lead</text><text x="158.88888888888889" y="159" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Data Lead</text><text x="216.66666666666666" y="159" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Accounting</text><text x="245.55555555555557" y="159" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">FP&A</text><text x="303.3333333333333" y="159" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">HR</text><text x="332.22222222222223" y="159" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Facilities</text><text x="361.11111111111114" y="159" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Legal</text><text x="28.888888888888886" y="229" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Frontend</text><text x="57.77777777777778" y="229" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Backend</text><text x="86.66666666666667" y="229" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Infra</text><text x="144.44444444444446" y="229" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">ML</text><text x="173.33333333333334" y="229" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Analytics</text></g></svg></div></div>
</div>
<div class="card">
<h3>Treemap</h3>
<div class="chart"><div class="stream-network-frame" role="img" aria-label="Network chart" style="position:relative;width:500px;height:320px"><svg xmlns="http://www.w3.org/2000/svg" width="500" height="320" style="position:absolute;left:0;top:0"><g transform="translate(70,50)"><rect x="0" y="0" width="390" height="210" fill="#e8d5b7" stroke="#fff" stroke-width="1"></rect><rect x="4" y="4" width="205.5859375" height="202" fill="#b8d4e3" stroke="#fff" stroke-width="1"></rect><rect x="213.5859375" y="4" width="172.4140625" height="133.13770180436848" fill="#b8d4e3" stroke="#fff" stroke-width="1"></rect><rect x="213.5859375" y="141.13770180436848" width="172.4140625" height="64.86229819563152" fill="#b8d4e3" stroke="#fff" stroke-width="1"></rect><rect x="8" y="8" width="124.91187050359713" height="194" fill="#d4e3b8" stroke="#fff" stroke-width="1"></rect><rect x="136.91187050359713" y="8" width="68.67406699640287" height="127.70731707317074" fill="#d4e3b8" stroke="#fff" stroke-width="1"></rect><rect x="136.91187050359713" y="139.70731707317074" width="68.67406699640287" height="62.29268292682926" fill="#d4e3b8" stroke="#fff" stroke-width="1"></rect><rect x="217.5859375" y="8" width="92.09932239657633" height="125.13770180436848" fill="#d4e3b8" stroke="#fff" stroke-width="1"></rect><rect x="313.6852598965763" y="8" width="68.31474010342367" height="81.80578192981294" fill="#d4e3b8" stroke="#fff" stroke-width="1"></rect><rect x="313.6852598965763" y="93.80578192981294" width="68.31474010342367" height="39.33191987455554" fill="#d4e3b8" stroke="#fff" stroke-width="1"></rect><rect x="217.5859375" y="145.13770180436848" width="115.95303596866097" height="56.862298195631524" fill="#d4e3b8" stroke="#fff" stroke-width="1"></rect><rect x="337.53897346866097" y="145.13770180436848" width="44.46102653133903" height="56.862298195631524" fill="#d4e3b8" stroke="#fff" stroke-width="1"></rect><text x="70.45593525179856" y="105" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">Salaries</text><text x="171.24890400179856" y="71.85365853658537" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">Cloud</text><text x="171.24890400179856" y="170.85365853658539" text-anchor="middle" dominant-baseline="middle" font-size="10.38211382113821" fill="#333">Tools</text><text x="263.63559869828816" y="70.56885090218424" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">Ads</text><text x="347.84262994828816" y="48.90289096490647" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="#333">Events</text><text x="347.84262994828816" y="113.47174186709071" text-anchor="middle" dominant-baseline="middle" font-size="8" fill="#333">Content</text><text x="275.5624554843305" y="173.56885090218424" text-anchor="middle" dominant-baseline="middle" font-size="9.477049699271921" fill="#333">Office</text><text x="359.7694867343305" y="173.56885090218424" text-anchor="middle" dominant-baseline="middle" font-size="8" fill="#333">Travel</text></g></svg><svg width="500" height="320" style="position:absolute;top:0;left:0;pointer-events:none"><g transform="translate(70,50)"><text x="70.45593525179856" y="105" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Salaries</text><text x="171.24890400179856" y="71.85365853658537" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Cloud</text><text x="171.24890400179856" y="170.85365853658539" text-anchor="middle" dominant-baseline="middle" font-size="10.38211382113821" fill="currentColor" style="pointer-events:none">Tools</text><text x="263.63559869828816" y="70.56885090218424" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Ads</text><text x="347.84262994828816" y="48.90289096490647" text-anchor="middle" dominant-baseline="middle" font-size="11" fill="currentColor" style="pointer-events:none">Events</text><text x="347.84262994828816" y="113.47174186709071" text-anchor="middle" dominant-baseline="middle" font-size="8" fill="currentColor" style="pointer-events:none">Content</text><text x="275.5624554843305" y="173.56885090218424" text-anchor="middle" dominant-baseline="middle" font-size="9.477049699271921" fill="currentColor" style="pointer-events:none">Office</text><text x="359.7694867343305" y="173.56885090218424" text-anchor="middle" dominant-baseline="middle" font-size="8" fill="currentColor" style="pointer-events:none">Travel</text></g></svg></div></div>
</div>
</div>
<h2>Standalone SSR (renderToStaticSVG)</h2>
<p class="subtitle">Direct pipeline computation → SVG generation via <code>semiotic/server</code>. No React component tree — just data in, SVG string out.</p>
<div class="grid">
<div class="card">
<h3>Line (standalone)</h3>
<div class="chart"><svg xmlns="http://www.w3.org/2000/svg" class="stream-xy-frame" width="500" height="320"><g transform="translate(40,20)"><path d="M0,247.5L40,200.1315789473684L80,217.8947368421053L119.99999999999999,161.64473684210523L160,170.52631578947367L200,123.1578947368421L239.99999999999997,137.96052631578948L280,102.4342105263158L320,114.2763157894737L360,90.59210526315789L400,69.86842105263159L440,22.50000000000001" fill="none" stroke="#007bff" stroke-width="2"></path><g class="stream-axes"><line x1="0" y1="270" x2="440" y2="270" stroke="#ccc" stroke-width="1"></line><g transform="translate(40,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">2</text></g><g transform="translate(119.99999999999999,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">4</text></g><g transform="translate(200,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">6</text></g><g transform="translate(280,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">8</text></g><g transform="translate(360,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">10</text></g><g transform="translate(440,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">12</text></g><text x="220" y="310" text-anchor="middle" font-size="12" fill="#333">Month</text><line x1="0" y1="0" x2="0" y2="270" stroke="#ccc" stroke-width="1"></line><g transform="translate(0,253.42105263157896)"><line x2="-5" stroke="#ccc" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="#666">40000</text></g><g transform="translate(0,194.21052631578948)"><line x2="-5" stroke="#ccc" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="#666">60000</text></g><g transform="translate(0,135)"><line x2="-5" stroke="#ccc" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="#666">80000</text></g><g transform="translate(0,75.78947368421052)"><line x2="-5" stroke="#ccc" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="#666">100000</text></g><g transform="translate(0,16.578947368421044)"><line x2="-5" stroke="#ccc" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="#666">120000</text></g><text x="-25" y="135" text-anchor="middle" font-size="12" fill="#333" transform="rotate(-90, -25, 135)">Revenue</text></g></g></svg></div>
</div>
<div class="card">
<h3>Scatter (standalone)</h3>
<div class="chart"><svg xmlns="http://www.w3.org/2000/svg" class="stream-xy-frame" width="500" height="320"><g transform="translate(40,20)"><circle cx="0" cy="247.5" r="5" fill="#4e79a7" opacity="0.8"></circle><circle cx="114.07407407407406" cy="136.5" r="5" fill="#4e79a7" opacity="0.8"></circle><circle cx="48.888888888888886" cy="208.5" r="5" fill="#4e79a7" opacity="0.8"></circle><circle cx="325.9259259259259" cy="67.5" r="5" fill="#4e79a7" opacity="0.8"></circle><circle cx="211.85185185185185" cy="148.5" r="5" fill="#4e79a7" opacity="0.8"></circle><circle cx="65.18518518518518" cy="187.5" r="5" fill="#4e79a7" opacity="0.8"></circle><circle cx="440" cy="22.50000000000001" r="5" fill="#4e79a7" opacity="0.8"></circle><circle cx="162.96296296296296" cy="166.5" r="5" fill="#4e79a7" opacity="0.8"></circle><circle cx="260.7407407407407" cy="97.50000000000001" r="5" fill="#4e79a7" opacity="0.8"></circle><circle cx="32.59259259259259" cy="226.5" r="5" fill="#4e79a7" opacity="0.8"></circle><circle cx="130.37037037037035" cy="118.5" r="5" fill="#4e79a7" opacity="0.8"></circle><circle cx="374.81481481481484" cy="58.5" r="5" fill="#4e79a7" opacity="0.8"></circle><g class="stream-axes"><line x1="0" y1="270" x2="440" y2="270" stroke="#ccc" stroke-width="1"></line><g transform="translate(0,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">25</text></g><g transform="translate(81.48148148148148,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">30</text></g><g transform="translate(162.96296296296296,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">35</text></g><g transform="translate(244.44444444444446,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">40</text></g><g transform="translate(325.9259259259259,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">45</text></g><g transform="translate(407.4074074074074,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">50</text></g><line x1="0" y1="0" x2="0" y2="270" stroke="#ccc" stroke-width="1"></line><g transform="translate(0,232.5)"><line x2="-5" stroke="#ccc" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="#666">40000</text></g><g transform="translate(0,172.5)"><line x2="-5" stroke="#ccc" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="#666">60000</text></g><g transform="translate(0,112.49999999999999)"><line x2="-5" stroke="#ccc" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="#666">80000</text></g><g transform="translate(0,52.49999999999999)"><line x2="-5" stroke="#ccc" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="#666">100000</text></g></g></g></svg></div>
</div>
<div class="card">
<h3>Bar (standalone)</h3>
<div class="chart"><svg xmlns="http://www.w3.org/2000/svg" class="stream-ordinal-frame" width="500" height="320"><g transform="translate(40,20)"><rect x="7.213114754098342" y="12.272727272727263" width="64.91803278688525" height="245.4545454545455" fill="#4e79a7"></rect><rect x="79.34426229508195" y="103.88604353393086" width="64.91803278688525" height="153.8412291933419" fill="#f28e2b"></rect><rect x="151.47540983606555" y="147.0998719590269" width="64.91803278688525" height="110.62740076824585" fill="#e15759"></rect><rect x="223.60655737704917" y="169.57106274007683" width="64.91803278688525" height="88.15620998719592" fill="#76b7b2"></rect><rect x="295.73770491803276" y="192.04225352112675" width="64.91803278688525" height="65.685019206146" fill="#59a14f"></rect><rect x="367.86885245901635" y="214.51344430217668" width="64.91803278688525" height="43.21382842509607" fill="#edc948"></rect><g class="ordinal-axes"><line x1="0" y1="270" x2="440" y2="270" stroke="#ccc" stroke-width="1"></line><g transform="translate(39.672131147540966,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">Engineering</text></g><g transform="translate(111.80327868852457,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">Sales</text></g><g transform="translate(183.93442622950818,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">Marketing</text></g><g transform="translate(256.0655737704918,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">Operations</text></g><g transform="translate(328.19672131147536,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">Finance</text></g><g transform="translate(400.327868852459,270)"><line y2="5" stroke="#ccc" stroke-width="1"></line><text y="18" text-anchor="middle" font-size="10" fill="#666">HR</text></g><line x1="0" y1="0" x2="0" y2="270" stroke="#ccc" stroke-width="1"></line><g transform="translate(0,257.72727272727275)"><line x2="-5" stroke="#ccc" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="#666">0</text></g><g transform="translate(0,223.1562099871959)"><line x2="-5" stroke="#ccc" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="#666">20</text></g><g transform="translate(0,188.58514724711907)"><line x2="-5" stroke="#ccc" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="#666">40</text></g><g transform="translate(0,154.01408450704227)"><line x2="-5" stroke="#ccc" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="#666">60</text></g><g transform="translate(0,119.44302176696544)"><line x2="-5" stroke="#ccc" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="#666">80</text></g><g transform="translate(0,84.87195902688859)"><line x2="-5" stroke="#ccc" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="#666">100</text></g><g transform="translate(0,50.30089628681178)"><line x2="-5" stroke="#ccc" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="#666">120</text></g><g transform="translate(0,15.729833546734962)"><line x2="-5" stroke="#ccc" stroke-width="1"></line><text x="-8" text-anchor="end" dominant-baseline="middle" font-size="10" fill="#666">140</text></g></g></g></svg></div>
</div>
<div class="card">
<h3>Pie (standalone)</h3>
<div class="chart"><svg xmlns="http://www.w3.org/2000/svg" class="stream-ordinal-frame" width="360" height="360"><g transform="translate(190,175)"><path d="M-146,0A146,146,0,1,1,127.941,70.336L0,0Z" transform="translate(0,0)" fill="#4e79a7"></path><path d="M127.941,70.336A146,146,0,0,1,-93.064,112.495L0,0Z" transform="translate(0,0)" fill="#f28e2b"></path><path d="M-93.064,112.495A146,146,0,0,1,-141.413,36.309L0,0Z" transform="translate(0,0)" fill="#e15759"></path><path d="M-141.413,36.309A146,146,0,0,1,-146,0L0,0Z" transform="translate(0,0)" fill="#76b7b2"></path></g></svg></div>
</div>
<div class="card">
<h3>Sankey (standalone)</h3>
<div class="chart"><svg xmlns="http://www.w3.org/2000/svg" class="stream-network-frame" width="500" height="320"><g transform="translate(20,20)"></g></svg></div>
</div>
<div class="card">
<h3>Force (standalone)</h3>
<div class="chart"><svg xmlns="http://www.w3.org/2000/svg" class="stream-network-frame" width="500" height="320"><g transform="translate(20,20)"><line x1="187.77052599557373" y1="158.51319945072228" x2="250.8580066848262" y2="173.30636563130474" stroke="#999" stroke-width="1" opacity="0.6"></line><line x1="187.77052599557373" y1="158.51319945072228" x2="185.06456239312772" y2="92.93240274858461" stroke="#999" stroke-width="1" opacity="0.6"></line><line x1="250.8580066848262" y1="173.30636563130474" x2="312.60344773769106" y2="177.32361353484967" stroke="#999" stroke-width="1" opacity="0.6"></line><line x1="185.06456239312772" y1="92.93240274858461" x2="132.34658233505192" y2="131.45209815342076" stroke="#999" stroke-width="1" opacity="0.6"></line><line x1="312.60344773769106" y1="177.32361353484967" x2="300.0402549129599" y2="120.19046615564072" stroke="#999" stroke-width="1" opacity="0.6"></line><line x1="132.34658233505192" y1="131.45209815342076" x2="187.77052599557373" y2="158.51319945072228" stroke="#999" stroke-width="1" opacity="0.6"></line><line x1="300.0402549129599" y1="120.19046615564072" x2="250.8580066848262" y2="173.30636563130474" stroke="#999" stroke-width="1" opacity="0.6"></line><circle cx="187.77052599557373" cy="158.51319945072228" r="8" fill="#1f77b4" stroke="#fff" stroke-width="2"></circle><circle cx="250.8580066848262" cy="173.30636563130474" r="8" fill="#ff7f0e" stroke="#fff" stroke-width="2"></circle><circle cx="185.06456239312772" cy="92.93240274858461" r="8" fill="#2ca02c" stroke="#fff" stroke-width="2"></circle><circle cx="312.60344773769106" cy="177.32361353484967" r="8" fill="#d62728" stroke="#fff" stroke-width="2"></circle><circle cx="132.34658233505192" cy="131.45209815342076" r="8" fill="#9467bd" stroke="#fff" stroke-width="2"></circle><circle cx="300.0402549129599" cy="120.19046615564072" r="8" fill="#8c564b" stroke="#fff" stroke-width="2"></circle><text x="187.77052599557373" y="146.51319945072228" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="#333">Alice</text><text x="250.8580066848262" y="161.30636563130474" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="#333">Bob</text><text x="185.06456239312772" y="80.93240274858461" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="#333">Carol</text><text x="312.60344773769106" y="165.32361353484967" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="#333">Dave</text><text x="132.34658233505192" y="119.45209815342076" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="#333">Eve</text><text x="300.0402549129599" y="108.19046615564072" text-anchor="middle" dominant-baseline="auto" font-size="11" fill="#333">Frank</text></g></svg></div>
</div>
</div>
<div class="stats">
<strong>Rendering stats:</strong>
17 component charts + 6 standalone charts = 23 total SVGs rendered server-side.
</div>
</body>
</html>