"Canon" was leaking onto the public site — a nav item, a footer block, a
page title, a set of CSS class names. It was also driving content
decisions it had no business driving: the backlog was ordered around
which references were still unused, which is curation dressed up as
planning.
The page is now /references/, the list is documented as a bibliography
to grow rather than a canon to curate, and the backlog says plainly that
a sin earns a slot by being worth a page — sources are found to support
it, never the reverse.
Adds six sources (Cairo's Truthful Art, Few's Show Me the Numbers, the
Economist's audit of its own charts, Kosara's eagereyes, WTF
Visualizations, Datawrapper's dual-axis piece) and roughly doubles the
citations on the five published sins, to 5-7 each. Two of the new notes
point at sources that complicate our own position rather than back it.
The Economist essay ships without a URL rather than a guessed one.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ULE5RRxdQE1ebwefEd2eCM
Writes two sins off the backlog. The inverted y-axis is the egregious
one: the fill hangs from the top and the line descends while the values
climb, with every element individually defensible. Aspect ratio is the
quiet one: same twelve numbers, same y-range, only the shape of the box
changes.
Adds Cleveland, McGill & McGill 1988 to the canon — banking to 45 comes
from the shape-parameter paper, not the 1984 ranking already cited, so
citing the latter for it would have misattributed the claim.
Also renames sin slugs to match their retitled pages, and rewrites the
summaries that had started echoing those titles.
Gives line-chart points their mark color explicitly; "point": true was
falling back to Vega's default blue on a red or green line.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ULE5RRxdQE1ebwefEd2eCM
Titles are scanned in the gallery and recognized in a link, so they
should say what the sin is rather than pun about it. Retitles the three
published sins and the backlog's working titles, and records the rule in
CLAUDE.md: the title names the problem, the poke carries the voice.
Filenames are untouched, so existing URLs still resolve.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ULE5RRxdQE1ebwefEd2eCM
Its chart-type "what to consider" posts and four-part color-scale series
cover ground nothing else in the canon does. Adds a backlog entry it is
the leading authority on (stacked columns, where only the bottom series
shares a baseline), and closes the citation gap on the rainbow-color-scale
sin — that one now waits only on our own sequential-ramp validation.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ULE5RRxdQE1ebwefEd2eCM
Ranks the next six sins by working backwards from the references we
already vouch for: six of fifteen canon entries were uncited, and each
idle one points at a sin worth writing. Also records the candidates our
build-time Vega-Lite pipeline can't prove honestly yet, so we stop
rediscovering them.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ULE5RRxdQE1ebwefEd2eCM
Capture the tacit decisions from this session so they survive: the
product thesis, voice/poke rules, the same-data proof rule, how to add a
sin, design/rendering conventions, OG-card satori gotchas, and the
deploy default-branch gotcha.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XPEvmMbac2fCvKXpQcovj8
- Rewrite pokes to name the sin itself, not our sample's exact numbers
(a visitor didn't "start at 90" — they mis-set the baseline)
- Remove the "cited:" line from the OG card; citations stay on the page
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XPEvmMbac2fCvKXpQcovj8
Link previews are the funnel for a "send the link" site, so give every sin
a share-optimized card.
- og/twitter meta tags on every page (poke as description, canonical URL,
summary_large_image)
- Per-sin 1200x630 card generated at build: the poke, the before/after
charts (uniform height so tall vconcat charts fit), severity meter,
category, and short citations — composed with satori, rasterized with
@resvg/resvg-js, no browser needed
- Default brand card for the homepage and canon
- Shared chart pipeline extracted to lib/renderChart.ts (used by both the
on-page component and the card generator)
- Bundle three IBM Plex TTF weights for the rasterizer
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XPEvmMbac2fCvKXpQcovj8
The public site (and DOM) shouldn't advertise our tooling choices:
- Drop the design-system credit and typeface note from the footer; replace
with visitor-useful copy ("Built to be sent" / "The canon")
- Remove the external-inspiration reference from the homepage lede
- Neutralize the meta description
- Rename the `cds-` CSS class prefix to `site-`
- Scrub internal names from source comments and the chart theme variable
Functional font-family references are kept; only the advertising is removed.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XPEvmMbac2fCvKXpQcovj8
Make each sin a self-contained page you send instead of re-explaining:
- Per-sin "poke" one-liner (the shareable callout)
- Citations system: a canonical bibliography (src/lib/references.ts) of the
field's giants — Munzner, Knaflic, Tufte, Cairo, Few, Cleveland & McGill,
Wilke, Healy, Calling Bullshit, data-to-viz, Junk Charts, Spurious
Correlations, FT Visual Vocabulary — cited per sin with a relevance note
- "Don't take our word for it" receipts block on each sin
- /canon page: the full annotated bibliography
- Share control: copy-link "send them the receipt" (progressive enhancement)
- Restructured sin page: poke -> proof -> why -> receipts -> share
- Header nav (Sins / Canon); homepage reframed to the "send the link" mission
Also fix the truncated-axis bad chart: clamp the [90,100] domain so the bar
baseline doesn't overflow thousands of pixels off-canvas.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XPEvmMbac2fCvKXpQcovj8
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
The Actions integration token cannot create the Pages site
("Resource not accessible by integration"), so enablement must be done
once in repo settings. Deploy works normally after that.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XPEvmMbac2fCvKXpQcovj8
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
Claude