mirror of
https://github.com/olehomelchenko/chart-sins.git
synced 2026-08-08 02:22:43 +00:00
Claude
a3ab9f8a79
Adopt Carbon at the design-token level (the component libraries ship JS and target app UIs; this is a static content site): - IBM Plex Sans/Mono, self-hosted via @fontsource (no external requests) - Carbon color tokens + layered White / Gray 100 themes - 8px spacing scale, productive/expressive type, motion tokens, square geometry, 2px focus ring - UI-shell header, tile grid, Carbon tags, geometric severity meter, breadcrumb, colophon crediting Carbon - Charts themed with IBM Plex + Carbon's data-visualization palette (validated colorblind-safe/contrast) on a fixed light canvas so the build-time SVG stays legible in both themes Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XPEvmMbac2fCvKXpQcovj8
36 lines
1.3 KiB
JSON
36 lines
1.3 KiB
JSON
{
|
|
"title": "Two Series, Shown Separately",
|
|
"data": {
|
|
"values": [
|
|
{ "month": "Jan", "icecream": 20, "sharks": 1 },
|
|
{ "month": "Feb", "icecream": 24, "sharks": 1 },
|
|
{ "month": "Mar", "icecream": 38, "sharks": 2 },
|
|
{ "month": "Apr", "icecream": 55, "sharks": 3 },
|
|
{ "month": "May", "icecream": 78, "sharks": 5 },
|
|
{ "month": "Jun", "icecream": 95, "sharks": 6 },
|
|
{ "month": "Jul", "icecream": 100, "sharks": 7 },
|
|
{ "month": "Aug", "icecream": 96, "sharks": 6 }
|
|
]
|
|
},
|
|
"vconcat": [
|
|
{
|
|
"width": 360,
|
|
"height": 110,
|
|
"mark": { "type": "line", "color": "#fa4d56", "point": true },
|
|
"encoding": {
|
|
"x": { "field": "month", "type": "ordinal", "sort": null, "axis": { "title": null, "labels": false } },
|
|
"y": { "field": "icecream", "type": "quantitative", "scale": { "zero": true }, "title": "Ice cream" }
|
|
}
|
|
},
|
|
{
|
|
"width": 360,
|
|
"height": 110,
|
|
"mark": { "type": "line", "color": "#1192e8", "point": true },
|
|
"encoding": {
|
|
"x": { "field": "month", "type": "ordinal", "sort": null, "axis": { "title": null, "labelAngle": 0 } },
|
|
"y": { "field": "sharks", "type": "quantitative", "scale": { "zero": true }, "title": "Shark attacks" }
|
|
}
|
|
}
|
|
]
|
|
}
|