mirror of
https://github.com/olehomelchenko/chart-sins.git
synced 2026-08-08 02:22:43 +00:00
fd70ccfc13
Both arrived as real charts before the sins existed, which is the better order — the specimen makes the failure mode obvious. "Bar Colours That Contradict Their Labels" (severity 2): categories that already own a colour, drawn in a default palette, so Black is a green bar. Nothing false, which is exactly why it's a 2 under our rubric — but colour is pre-attentive, so the reader pays the cost on every glance. "A Colour Scale That Changed Between Two Charts" (severity 4): the Tagesschau incidence maps, rebinned from 25/50/100/250/500 to 20/35/50/100/200 three weeks apart while being presented as a before-and-after. A colour key is an axis, and moving it mid-comparison is the axis crime we don't police because a legend reads as formatting. The bad chart there needed an explicit independent colour resolve — Vega-Lite merges scales across a concat by default, which silently unified the two legends and destroyed the entire demonstration. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ULE5RRxdQE1ebwefEd2eCM
238 lines
4.7 KiB
JSON
238 lines
4.7 KiB
JSON
{
|
|
"title": "7-Day Incidence by District",
|
|
"data": {
|
|
"values": [
|
|
{
|
|
"district": "A",
|
|
"row": "7-day incidence",
|
|
"when": "17 March",
|
|
"value": 22
|
|
},
|
|
{
|
|
"district": "B",
|
|
"row": "7-day incidence",
|
|
"when": "17 March",
|
|
"value": 38
|
|
},
|
|
{
|
|
"district": "C",
|
|
"row": "7-day incidence",
|
|
"when": "17 March",
|
|
"value": 45
|
|
},
|
|
{
|
|
"district": "D",
|
|
"row": "7-day incidence",
|
|
"when": "17 March",
|
|
"value": 60
|
|
},
|
|
{
|
|
"district": "E",
|
|
"row": "7-day incidence",
|
|
"when": "17 March",
|
|
"value": 85
|
|
},
|
|
{
|
|
"district": "F",
|
|
"row": "7-day incidence",
|
|
"when": "17 March",
|
|
"value": 110
|
|
},
|
|
{
|
|
"district": "G",
|
|
"row": "7-day incidence",
|
|
"when": "17 March",
|
|
"value": 140
|
|
},
|
|
{
|
|
"district": "H",
|
|
"row": "7-day incidence",
|
|
"when": "17 March",
|
|
"value": 190
|
|
},
|
|
{
|
|
"district": "A",
|
|
"row": "7-day incidence",
|
|
"when": "9 April",
|
|
"value": 45
|
|
},
|
|
{
|
|
"district": "B",
|
|
"row": "7-day incidence",
|
|
"when": "9 April",
|
|
"value": 70
|
|
},
|
|
{
|
|
"district": "C",
|
|
"row": "7-day incidence",
|
|
"when": "9 April",
|
|
"value": 88
|
|
},
|
|
{
|
|
"district": "D",
|
|
"row": "7-day incidence",
|
|
"when": "9 April",
|
|
"value": 120
|
|
},
|
|
{
|
|
"district": "E",
|
|
"row": "7-day incidence",
|
|
"when": "9 April",
|
|
"value": 150
|
|
},
|
|
{
|
|
"district": "F",
|
|
"row": "7-day incidence",
|
|
"when": "9 April",
|
|
"value": 175
|
|
},
|
|
{
|
|
"district": "G",
|
|
"row": "7-day incidence",
|
|
"when": "9 April",
|
|
"value": 210
|
|
},
|
|
{
|
|
"district": "H",
|
|
"row": "7-day incidence",
|
|
"when": "9 April",
|
|
"value": 260
|
|
}
|
|
]
|
|
},
|
|
"hconcat": [
|
|
{
|
|
"title": "17 March",
|
|
"width": 190,
|
|
"height": 46,
|
|
"transform": [
|
|
{
|
|
"filter": "datum.when === '17 March'"
|
|
}
|
|
],
|
|
"mark": {
|
|
"type": "rect",
|
|
"stroke": "#e0e0e0",
|
|
"strokeWidth": 0.5
|
|
},
|
|
"encoding": {
|
|
"x": {
|
|
"field": "district",
|
|
"type": "nominal",
|
|
"sort": null,
|
|
"axis": {
|
|
"labelAngle": 0,
|
|
"title": null
|
|
}
|
|
},
|
|
"y": {
|
|
"field": "row",
|
|
"type": "nominal",
|
|
"axis": {
|
|
"title": null,
|
|
"labels": false,
|
|
"ticks": false,
|
|
"domain": false
|
|
}
|
|
},
|
|
"color": {
|
|
"field": "value",
|
|
"type": "quantitative",
|
|
"scale": {
|
|
"type": "threshold",
|
|
"domain": [
|
|
25,
|
|
50,
|
|
100,
|
|
250
|
|
],
|
|
"range": [
|
|
"#fff1f1",
|
|
"#ffb3b8",
|
|
"#fa4d56",
|
|
"#da1e28",
|
|
"#750e13"
|
|
]
|
|
},
|
|
"legend": {
|
|
"title": "cases / 100k",
|
|
"orient": "bottom",
|
|
"direction": "horizontal"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"title": "9 April",
|
|
"width": 190,
|
|
"height": 46,
|
|
"transform": [
|
|
{
|
|
"filter": "datum.when === '9 April'"
|
|
}
|
|
],
|
|
"mark": {
|
|
"type": "rect",
|
|
"stroke": "#e0e0e0",
|
|
"strokeWidth": 0.5
|
|
},
|
|
"encoding": {
|
|
"x": {
|
|
"field": "district",
|
|
"type": "nominal",
|
|
"sort": null,
|
|
"axis": {
|
|
"labelAngle": 0,
|
|
"title": null
|
|
}
|
|
},
|
|
"y": {
|
|
"field": "row",
|
|
"type": "nominal",
|
|
"axis": {
|
|
"title": null,
|
|
"labels": false,
|
|
"ticks": false,
|
|
"domain": false
|
|
}
|
|
},
|
|
"color": {
|
|
"field": "value",
|
|
"type": "quantitative",
|
|
"scale": {
|
|
"type": "threshold",
|
|
"domain": [
|
|
20,
|
|
35,
|
|
50,
|
|
100,
|
|
200
|
|
],
|
|
"range": [
|
|
"#fff1f1",
|
|
"#ffd7d9",
|
|
"#ffb3b8",
|
|
"#fa4d56",
|
|
"#da1e28",
|
|
"#750e13"
|
|
]
|
|
},
|
|
"legend": {
|
|
"title": "cases / 100k",
|
|
"orient": "bottom",
|
|
"direction": "horizontal"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
],
|
|
"resolve": {
|
|
"scale": {
|
|
"color": "independent"
|
|
},
|
|
"legend": {
|
|
"color": "independent"
|
|
}
|
|
}
|
|
}
|