Files
chart-sins/src/charts/rebinned-scale-bad.json
T
Claude fd70ccfc13 Add two sins from wild specimens: category colours, rebinned scales
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
2026-08-05 20:56:26 +00:00

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"
}
}
}