[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_107":108},"routes/registry-package",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20},"pkg",{"_26":27,"_28":29,"_30":31,"_32":33,"_34":35,"_22":23,"_36":37,"_38":39,"_40":41,"_42":43,"_24":25,"_44":45},"comments",[],"versions",[21],"selectedFile","requirements.txt","canonical","https://agentlefs.com/registry/tufte-charts/requirements.txt","historical",false,{"_22":23,"_24":25},"version",1,"publishedAt","2026-10-12T22:41:24.841Z","slug","tufte-charts","kind","skill","title","Tufte-style charts","summary","Clean, directly labelled charts from a JSON spec that read in light and dark mode: stacks, lines, slopegraphs, small multiples.","publisher","agentleFS","body","# Tufte-style charts\n\nQuiet, directly labelled charts from a JSON spec, as SVG/HTML that follows light and dark mode, and as PNG or WebP.\n\n![Preview](assets/preview.svg)\n\nA style rulebook and four chart scripts: a stacked-area or stream chart, a multi-line chart, a\nslopegraph and small multiples. Each script reads one JSON spec (the wording, plus the data inline\nor in a file beside the spec) and writes an HTML page with an inline SVG. Every word on the chart\ncomes from the spec, with numbers filled from the data. `render.mjs` turns the page into PNGs, and\n`to_webp.py` turns a PNG into a WebP.\n\nUse it when:\n- you want a chart that reads like a printed page, not a dashboard\n- the chart must work on a light page and a dark one\n- you have `themes.json` or `share.json` from `text-rule-trends`, or any series over periods\n\n## Requirements\n\n- Python 3.8+, no packages for the SVG/HTML. Pillow (`pip install pillow`) for WebP only.\n- Node 18+ and Playwright with Chromium for PNGs. In the folder you run from:\n `npm i playwright && npx playwright install chromium`. `render.mjs` looks for Playwright in\n the working directory, then in `NODE_PATH`, then beside the script. `PLAYWRIGHT_MODULE` chooses\n a package folder.\n- Each Playwright version wants its own Chromium build, and a plain `npm i playwright` installs the\n newest. If that build is missing, run `npx playwright install chromium` with the same version,\n pin a version that matches your browsers (e.g. `npm i playwright@1.56.1` for Chromium\n build 1194), or set `CHROMIUM_PATH` to any installed Chromium\n or Chrome. Without `CHROMIUM_PATH`, `render.mjs` also tries any Chromium Playwright downloaded\n earlier (`PLAYWRIGHT_BROWSERS_PATH`, `~/.cache/ms-playwright`) and says which it used.\n- The page loads the ET Book font from `cdn.jsdelivr.net` (tufte-css 1.8.0). Offline, it falls\n back to Palatino or Georgia.\n\n## The rules\n\nApply these to any chart, drawn with these scripts or not.\n\n1. **Paper and ink.** Ink on whatever page the chart sits on: a transparent background, text\n from near-black to mid grey (near-white to light grey in dark mode). The classic look is\n `#fffff8` paper with text `#111` to `#777`. A serif face (ET Book, then Palatino or Georgia).\n No boxes, panels or shadows.\n2. **No chart junk.** No gridlines, no legend box, no background bands, no 3D, no ticks beyond\n what is read. A range frame for the y axis: a thin line from the lowest to the highest tick.\n Bin edges as short ticks on the x axis, the label at the bin centre.\n3. **Label directly.** Name each series at its end, with a thin leader to it when labels must be\n spread apart. Put the colour key inside a sentence (\"red grew, blue shrank\").\n4. **Colour only what changed.** Red `#a33a2c` for what grew, blue `#4f7392` for what shrank, two\n light greys (`#ddd8cd`, `#e7e3da`, alternating) for what stayed within the threshold (±15% by\n default). Decide the threshold before you look. Vary opacity a little (0.38 to 0.56) so\n neighbouring bands of one colour stay apart. Separate bands with a 1 px paper-coloured stroke.\n In dark mode the same roles get lighter values (below), never new hues.\n5. **Do not invent data between bins.** Points sit at bin centres. Between them, a monotone cubic\n (Fritsch–Carlson), which never overshoots a measured value. Hold the curve flat to the outer\n bin edges. A bin with no data is skipped, not drawn as zero. A plain polyline with each value\n printed is also fine; it breaks where a value is missing.\n6. **One annotation.** A single curved arrow for the main claim, with its numbers.\n7. **Context stays faint.** Dated events are dotted hairlines at about 28% opacity, with small grey\n labels in up to three rows. One event that matters to the argument may be a solid red line.\n8. **Show n.** Print the count behind each bin under the axis in small grey.\n9. **Same scale when comparing.** Series that will be compared share one y range. A stacked chart\n starts at zero; a stream chart has no zero, so it drops the y axis. Undrawn parts of a total\n (`rest`) are marked by a dashed line where the bands begin.\n10. **Methods in the footnote.** Small grey italic (12 px): where the data comes from, how many\n items, how bins are made, how values between bins are drawn, and what the chart cannot show.\n11. **Words carry the claim.** The title says what happened; the subtitle gives two or three\n numbers. Every number in the text comes from the data through a placeholder, so prose and\n chart cannot drift apart. Negative numbers use the true minus sign (−).\n\n## Steps\n\nRun the scripts by their path and write outputs to a folder of your own. `SKILL` is this skill's folder.\n\n```bash\npython3 $SKILL/scripts/draw_stack.py --spec stack.spec.json --out stack.html [--svg stack.svg] [--paper]\npython3 $SKILL/scripts/draw_lines.py --spec lines.spec.json --out lines.html\npython3 $SKILL/scripts/draw_slope.py --spec slope.spec.json --out slope.html\npython3 $SKILL/scripts/draw_multiples.py --spec multiples.spec.json --out multiples.html\nnode $SKILL/scripts/render.mjs stack.html stack.png # stack.light.png and stack.dark.png, 2x\npython3 $SKILL/scripts/to_webp.py stack.light.png stack.light.webp --width 1600\npython3 $SKILL/scripts/to_webp.py stack.dark.png stack.dark.webp --width 1600\n```\n\n`render.mjs` options: `--selector \"#fig\"`, `--width 1240` (viewport), `--scale 2`,\n`--theme auto|light|dark` (below). `to_webp.py` keeps the transparency of the light and dark PNGs.\n\n## Light and dark mode\n\n- **The default background is transparent.** The SVG (inline in the HTML, or the `--svg` file)\n carries both palettes as CSS custom properties (`--tc-ink`, `--tc-red`, ...) in a `\" + svg[i:]\n\n\ndef page(svg_parts, width, bg=\"paper\"):\n if bg == \"paper\":\n body = f\"body{{margin:0;background:{PAPER}}}\"\n svg = \"\".join(svg_parts)\n else: # the page follows the reader's scheme; the chart itself stays transparent\n body = \"body{margin:0;background:#fffff8}@media (prefers-color-scheme:dark){body{background:#111}}\"\n svg = themed(\"\".join(svg_parts))\n return (\"\" + svg + \"\")\n\n\ndef write(out, svg_out, parts, width, svg_font=True, bg=\"paper\"):\n open(out, \"w\").write(page(parts, width, bg))\n if svg_out:\n s = \"\".join(parts)\n if bg != \"paper\":\n s = themed(s)\n if svg_font:\n s = s.replace(' needs the size to lay it out\n w, h = re.search(r'viewBox=\"0 0 ([\\d.]+) ([\\d.]+)\"', head).groups()\n s = s.replace(\"