mirror of
https://github.com/olehomelchenko/chart-sins.git
synced 2026-08-08 02:22:43 +00:00
2e17f8fa59
Set up the static-site tech stack: Astro 5 with Markdown content collections, Vega-Lite specs rendered to static SVG at build time (zero client JS), plain scoped CSS, and a GitHub Pages deploy workflow. Includes three sample sins (truncated y-axis, dual-axis deception, pie chart overload), each with a bad and fixed chart spec, plus a gallery index and per-sin detail pages. 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": "#c0392b", "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": "#2980b9", "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" }
|
|
}
|
|
}
|
|
]
|
|
}
|