Embed
The script finds its own origin, so nothing else is needed; the widget runs in a sandboxed frame and cannot touch your page. Set the controls and the two lines update; the preview beneath shows what your readers get.
<script src="https://learn.mimmsy.com/learn-widget.js"></script>
<learn-widget name="kl-divergence"></learn-widget> It is CC-BY-4.0: keep the credit line the frame shows.
Preview
Fork
A fork is a copy whose manifest names its parent and the parent's version; lineage is kept forever, and the copy is yours to change. The library is its own repository: clone it, copy kl-divergence/ to a new name (one DNS label), set forkedFrom to { "name": "kl-divergence", "version": 1 }, change what you want, run npm run check, and open a pull request. Passing the check is the whole gate. Without a checkout, submit the same files to POST /api/widgets and it is served instantly as an unreviewed draft.
Source
The whole widget is these files; the repository has their history.
widget.json
{
"name": "kl-divergence",
"title": "KL divergence",
"version": 1,
"claim": "Coding outcomes from a real distribution P with a code sized for a model Q costs −Σ p log₂ q bits per symbol, which exceeds the entropy H(P) by D(P‖Q) ≥ 0, with equality only when Q matches P exactly, and D(P‖Q) ≠ D(Q‖P) in general.",
"summary": "Drag the model Q's bars against a fixed reality P and watch the average code length and the overpay D(P‖Q) respond; set Q = P to hit zero, and swap the roles to see the divergence is not symmetric.",
"topics": [
"information/divergence",
"information/coding"
],
"aliases": [
"Kullback–Leibler divergence",
"relative entropy",
"KL",
"wrong model",
"Gibbs' inequality"
],
"params": {
"outcomes": {
"type": "integer",
"default": 8,
"min": 2,
"max": 12,
"label": "number of outcomes"
}
},
"check": [
{
"q": "D(P‖Q) equals zero exactly when…",
"options": [
"Q is uniform",
"P is uniform",
"Never, because divergences are always positive",
"Q matches P exactly"
],
"answer": 3,
"why": "Coding with any mismatched model costs extra bits, so the overpay is zero only when Q equals P."
},
{
"q": "Which is true of the KL divergence D(P‖Q)?",
"options": [
"It is symmetric: D(P‖Q) = D(Q‖P)",
"It is ≥ 0, and 0 only when Q = P",
"It can be negative when Q is simpler than P",
"It always equals H(P)"
],
"answer": 1,
"why": "D(P‖Q) is the extra code length from coding with Q in place of P (Gibbs' inequality), and it is not symmetric, which is why it is called a divergence rather than a distance."
},
{
"q": "Reality is lopsided, P = (0.9, 0.1), and the model is uniform, Q = (0.5, 0.5); with the roles swapped, reality uniform and the model lopsided, the divergence is…",
"options": [
"the same, because divergence is a distance between the two distributions",
"zero, because a uniform reality has maximum entropy",
"negative, because the model is more informative than reality",
"larger (≈ 0.74 vs 0.53 bits), because a confident error is weighted by reality's own rates"
],
"answer": 3,
"why": "D(Q‖P) ≈ 0.74 exceeds D(P‖Q) ≈ 0.53 because reality does the weighting, and a term where p is large and q is small dominates the sum."
}
],
"capabilities": [],
"height": 500,
"requires": [
"huffman-coder"
],
"forkedFrom": null,
"authors": []
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>KL divergence</title>
<style>
:root {
color-scheme: light dark;
--bg: #f7f3ea; --bg-card: #efe9da; --border: #d8cfba; --text: #211d14; --text-dim: #6e6553;
--accent: #31597f; --accent2: #b04e1b; --hot: #a82433; --ok: #3d6b4f;
--ink-rgb: 33, 29, 20; --paper-rgb: 247, 243, 234; --accent-rgb: 49, 89, 127;
--accent2-rgb: 176, 78, 27; --hot-rgb: 168, 36, 51; --ok-rgb: 61, 107, 79;
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #161410; --bg-card: #1e1b15; --border: #383225; --text: #e9e3d3; --text-dim: #9c917c;
--accent: #8fb8e0; --accent2: #dd9355; --hot: #df7a88; --ok: #82bd97;
--ink-rgb: 233, 227, 211; --paper-rgb: 22, 20, 16; --accent-rgb: 143, 184, 224;
--accent2-rgb: 221, 147, 85; --hot-rgb: 223, 122, 136; --ok-rgb: 130, 189, 151;
}
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: transparent; color: var(--text); font-family: var(--serif); font-size: 17px; line-height: 1.5; }
.widget { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 22px; }
.legend { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-bottom: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); }
.legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.legend .sw.p { background: var(--accent); }
.legend .sw.q { background: var(--accent2); }
.plot { display: block; width: 100%; height: 280px; cursor: ns-resize; touch-action: none; }
.control-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.control-row .sep { width: 10px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.btn { font-family: var(--mono); font-size: 12.5px; color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 3px; padding: 6px 13px; cursor: pointer; transition: border-color .15s, color .15s; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { border-color: var(--accent); color: var(--accent); }
.readout-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end; margin: 14px 0 0; }
.readout .big { display: block; font-size: 34px; font-weight: 600; color: var(--accent); line-height: 1.1; min-width: 5ch; }
.readout.accent .big { color: var(--accent2); }
.readout.dim .big { color: var(--text-dim); font-size: 26px; }
.readout small { color: var(--text-dim); font-size: 12.5px; }
@media (max-width: 560px) { .readout .big { font-size: 27px; } }
</style>
</head>
<body>
<div class="widget">
<div class="legend">
<span><span class="sw p"></span>reality P</span>
<span><span class="sw q"></span>your model Q · drag to edit</span>
</div>
<canvas id="bars" class="plot" title="drag to shape Q"></canvas>
<div class="control-row">
<button class="btn" id="p-skew">english‑ish P</button>
<button class="btn" id="p-uniform">uniform P</button>
<button class="btn" id="p-random">random P</button>
<span class="sep"></span>
<button class="btn primary" id="q-copy">set Q = P</button>
<button class="btn" id="q-uniform">uniform Q</button>
<button class="btn" id="swap">swap P ↔ Q</button>
</div>
<div class="readout-row">
<div class="readout">
<span class="big mono" id="hp">0.00</span>
<small>H(P) · the floor</small>
</div>
<div class="readout">
<span class="big mono" id="ce">0.00</span>
<small>what you pay · avg bits/symbol</small>
</div>
<div class="readout accent">
<span class="big mono" id="d">0.00</span>
<small>D(P∥Q) · the overpay</small>
</div>
<div class="readout dim">
<span class="big mono" id="drev">0.00</span>
<small>D(Q∥P) · roles swapped</small>
</div>
</div>
</div>
<script src="/w/_sdk/host.js?v=1"></script>
<script src="/w/_lib/info.js?v=1"></script>
<script src="widget.js?v=1"></script>
</body>
</html>
widget.js
/* KL divergence: code reality P with a model Q and read the overpay D(P‖Q) = Σ p log₂(p/q). */
(() => {
'use strict';
const $ = (id) => document.getElementById(id);
const { clamp, entropy, normProbs, crossEntropy, readTheme, drawPairedBars, attachColumnDrag, onResize } = window.Info;
const EPS = 0.005;
const LABELS = 'ABCDEFGHIJKL'.split('');
let n = 8;
let pw = skew(n);
let qw = new Array(n).fill(1);
let host = null;
function skew(k) {
const out = [30, 22, 15, 11, 8, 6, 5, 3];
while (out.length < k) out.push(out[out.length - 1] * 0.72);
return out.slice(0, k);
}
function stats() {
const p = normProbs(pw, EPS);
const q = normProbs(qw, EPS);
const hp = entropy(p);
const ce = crossEntropy(p, q);
const drev = crossEntropy(q, p) - entropy(q);
return { p, q, hp, ce, d: Math.max(0, ce - hp), drev: Math.max(0, drev) };
}
function render() {
const { p, q, hp, ce, d, drev } = stats();
drawPairedBars($('bars'), LABELS.slice(0, n), p, q, false);
$('hp').textContent = hp.toFixed(2);
$('ce').textContent = ce.toFixed(2);
$('d').textContent = d.toFixed(2);
$('drev').textContent = drev.toFixed(2);
}
function setN(k) {
n = clamp(Math.round(k), 2, 12);
pw = skew(n);
qw = new Array(n).fill(1);
render();
}
const ping = (data) => { if (host && host.signal) host.signal('interaction', data); };
attachColumnDrag($('bars'), () => n, (i, frac) => { qw[i] = frac; render(); });
$('bars').addEventListener('pointerup', () => ping({ d: stats().d }));
$('p-skew').addEventListener('click', () => { pw = skew(n); render(); ping({ P: 'skew' }); });
$('p-uniform').addEventListener('click', () => { pw = new Array(n).fill(1); render(); ping({ P: 'uniform' }); });
$('p-random').addEventListener('click', () => { pw = pw.map(() => 0.04 + Math.random()); render(); ping({ P: 'random' }); });
$('q-copy').addEventListener('click', () => { qw = normProbs(pw); render(); ping({ Q: 'copy' }); });
$('q-uniform').addEventListener('click', () => { qw = new Array(n).fill(1); render(); ping({ Q: 'uniform' }); });
$('swap').addEventListener('click', () => {
const { p, q } = stats();
pw = q; qw = p;
render();
ping({ swap: true });
});
onResize(render);
readTheme();
render();
LearnWidget.connect().then((h) => {
host = h;
readTheme();
if (Number.isInteger(h.params.outcomes)) setN(h.params.outcomes);
else render();
h.on('theme.changed', () => { readTheme(); render(); });
h.on('params.changed', (np) => { if (Number.isInteger(np.outcomes)) setN(np.outcomes); });
});
})();