Add interactive study note on graph neural networks

[Alexdruso]

Adds docs/_posts/2026-08-09-graph-neural-networks.html, serving at /graph-neural-networks/, plus a thumbnail sketch in docs/posts.html. It's the natural follow-on from the two transformer notes: attention is message passing on a complete graph, and GATs are the bridge.

The gap it fills: GNNs usually get introduced either as an opaque H' = σ(ÂHW) or as a library call, leaving the two things that actually matter implicit — why the layer must be permutation-equivariant, and what the aggregator choice costs in expressive power.

Contents

Eight se-sections, six demos, all vanilla JS with zero dependencies and the documented MutationObserver token redraw:

§	Demo
🕸️ The data has no rows	Relabel the running citation graph — the adjacency permutes to PAPᵀ while the equivariant layer's per-node output stays put, and a dense readout on vec(A) moves
📨 One layer is one round of messages	Step message passing a layer at a time; edges flash, scalars update, the selected node's k-hop shell lights up
🧮 The GCN layer	Coefficient matrix under none / row / symmetric normalisation, with row sums so the hub visibly deflates
🧺 The aggregator	sum/mean/max over editable neighbourhood multisets, plus the two-triangles-vs-hexagon 1-WL blind spot
🌫️ Over-smoothing	Slider over Â^k X, graph coloured by a 1-D projection alongside the mean-pairwise-distance decay
🎓 Training a GCN	2-layer GCN trained live with Adam, weight decay and hand-written gradients on a seeded 50-node SBM, with an Â-vs-I toggle

Then a per-model table (GCN / GraphSAGE / GAT / GIN, with GAT linking to /self-attention/), node-vs-edge-vs-graph-level readouts, and takeaways.

Accuracy

Every random quantity comes from a seeded PRNG, so the numbers in the prose are reproducible rather than remembered. Formulas and claims were checked against the primary sources — Kipf & Welling (ICLR 2017), Gilmer et al. (ICML 2017), Xu et al. (ICLR 2019), Morris et al. (AAAI 2019), Li, Han & Wu (AAAI 2018), Oono & Suzuki (ICLR 2020), Hamilton et al. (NeurIPS 2017), Veličković et al. (ICLR 2018) — and cited in a closing note.

Three deliberate departures from the original plan, each forced by what the demos actually produced:

• Weight decay in §6. Without it the features-only model overfits 8 labelled nodes to 0.45 — below chance, which would read as a bug rather than an argument. With L2 decay (as in the reference setup) it lands at 0.62.
• Over-smoothing slider runs to k = 40, not 20. The distance is still 0.37 at k = 20 on this graph, so "decays to ~0" wasn't true at that range. Extended it and quoted the measured curve: 1.40 → 0.80 at k = 10 → 0.13 at k = 40.
• §5 colour scale pinned to the k = 2 spread. Normalising by the k = 0 spread washed the communities into near-identical tones, because most of that spread is precisely the noise propagation removes.

Verification

Rendered and inspected in a real browser via .claude/skills/add-study-note/driver.mjs, in both themes:

• All six demos render — no blank SVGs, no clipped canvases, no console errors.
• Dark mode is genuinely dark; zero literal colours in the file (audited), every colour from --sn-* tokens, and all five JS-drawn views registered for the theme redraw.
• Training convergence was checked by driving the loop headlessly, not read off a screenshot: 600 steps reaches 0.905 held-out accuracy with  and 0.619 with I, returning to 0.905 when toggled back — deterministic across runs and identical in both themes. Those are the numbers the prose quotes. A sweep over layers (1/2/3) × labels-per-class (1–12) backs the §6 claims about depth and label scarcity.
• The note appears first on /study-notes/ with its own thumbnail and excerpt, not the generic fallback.
• No horizontal overflow at 390px.

One caveat: the full-page screenshots show the training demo at step 0, because IntersectionObserver never fires during a headless full-page capture. It starts normally when a reader scrolls to it — hence the headless drive above.

🤖 Generated with Claude Code

https://claude.ai/code/session_017myVPR2NyjakpGjN7pLYcj

---

Generated by Claude Code