Reframe the reference list; cite far more widely

"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
This commit is contained in:
Claude
2026-08-05 17:10:04 +00:00
parent 37d8631903
commit cd18862115
15 changed files with 209 additions and 111 deletions
-51
View File
@@ -1,51 +0,0 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
import { REFERENCES, citeLabel, type RefKind } from '../lib/references';
const groups: { kind: RefKind; heading: string; blurb: string }[] = [
{ kind: 'book', heading: 'The books', blurb: 'The shelf every chart argument can lean on.' },
{ kind: 'paper', heading: 'The papers & essays', blurb: 'The primary sources — where the evidence actually lives.' },
{ kind: 'site', heading: 'The sites', blurb: 'Living references you can link straight into a thread.' },
];
const byKind = (kind: RefKind) => Object.values(REFERENCES).filter((r) => r.kind === kind);
---
<BaseLayout title="The Canon — Chart Sins" description="The books, papers, and sites Chart Sins stands on.">
<section class="wrap hero">
<p class="hero__eyebrow">// the shoulders we stand on</p>
<h1 class="expressive-display">The Canon</h1>
<p class="hero__lede">
Every sin here cites its sources. This is the whole shelf in one place —
the giants of data visualization who already made the case, so you can
link the receipt instead of relitigating it.
</p>
</section>
<div class="wrap canon">
{
groups.map((g) => (
<section class="canon__group">
<h2 class="canon__heading productive-heading-03">{g.heading}</h2>
<p class="helper">{g.blurb}</p>
<ul class="canon__list">
{byKind(g.kind).map((ref) => (
<li class="canon__item">
<div class="canon__cite">
{ref.url ? (
<a href={ref.url} rel="noopener" class="canon__work">{citeLabel(ref)}</a>
) : (
<span class="canon__work">{citeLabel(ref)}</span>
)}
{ref.work && <span class="canon__pub">{ref.work}</span>}
{ref.free && <span class="receipt__free">free online</span>}
</div>
<p class="canon__blurb">{ref.blurb}</p>
</li>
))}
</ul>
</section>
))
}
</div>
</BaseLayout>
+51
View File
@@ -0,0 +1,51 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
import { REFERENCES, citeLabel, type RefKind } from '../lib/references';
const groups: { kind: RefKind; heading: string; blurb: string }[] = [
{ kind: 'book', heading: 'Books', blurb: 'Book-length treatments, for when you need the whole argument.' },
{ kind: 'paper', heading: 'Papers & essays', blurb: 'Where the evidence actually lives — experiments, and practitioners marking their own homework.' },
{ kind: 'site', heading: 'Sites', blurb: 'Living references you can link straight into a thread.' },
];
const byKind = (kind: RefKind) => Object.values(REFERENCES).filter((r) => r.kind === kind);
---
<BaseLayout title="References — Chart Sins" description="The books, papers, and sites cited across Chart Sins.">
<section class="wrap hero">
<p class="hero__eyebrow">// everything we cite</p>
<h1 class="expressive-display">References</h1>
<p class="hero__lede">
Every sin here cites its sources, and this is all of them in one place.
None of these arguments are ours — they were made, tested and written up
by other people, so you can link the evidence instead of relitigating it.
</p>
</section>
<div class="wrap refs">
{
groups.map((g) => (
<section class="refs__group">
<h2 class="refs__heading productive-heading-03">{g.heading}</h2>
<p class="helper">{g.blurb}</p>
<ul class="refs__list">
{byKind(g.kind).map((ref) => (
<li class="refs__item">
<div class="refs__cite">
{ref.url ? (
<a href={ref.url} rel="noopener" class="refs__work">{citeLabel(ref)}</a>
) : (
<span class="refs__work">{citeLabel(ref)}</span>
)}
{ref.work && <span class="refs__pub">{ref.work}</span>}
{ref.free && <span class="receipt__free">free online</span>}
</div>
<p class="refs__blurb">{ref.blurb}</p>
</li>
))}
</ul>
</section>
))
}
</div>
</BaseLayout>
+2 -2
View File
@@ -69,8 +69,8 @@ const ogImage = new URL(href(`og/${sin.id}.png`), Astro.site).toString();
<ShareLink url={pageUrl} />
<p class="more-canon">
Building a case? See the <a href={href('canon/')}>full canon →</a>
<p class="more-refs">
Building a case? See <a href={href('references/')}>every source we cite →</a>
</p>
</article>
</BaseLayout>