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="distribution-entropy"></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 distribution-entropy/ to a new name (one DNS label), set forkedFrom to { "name": "distribution-entropy", "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": "distribution-entropy",
"title": "Shape a distribution",
"version": 1,
"claim": "Among all distributions over n outcomes the uniform one has the highest entropy, log₂ n bits; piling probability onto one outcome drives it to 0, and a 50/50 split on two outcomes is exactly 1 bit however many empty outcomes sit alongside.",
"summary": "Drag eight bars into any shape and read the entropy and a meter showing it as a fraction of the maximum. Presets give the uniform, a single spike and a fair coin on two outcomes.",
"topics": [
"information/entropy",
"math/probability"
],
"aliases": [
"maximum entropy",
"uniform distribution",
"probability distribution",
"entropy of a distribution"
],
"params": {
"outcomes": {
"type": "integer",
"default": 8,
"min": 2,
"max": 16,
"label": "number of outcomes"
}
},
"check": [
{
"q": "Across all distributions over 8 outcomes, the maximum possible entropy is…",
"options": [
"8 bits, from the uniform distribution",
"1 bit, from a 50/50 split on two outcomes",
"unbounded, since it depends on how the outcomes are labeled",
"3 bits, from the uniform distribution"
],
"answer": 3,
"why": "The maximum is log₂ 8 = 3 bits, reached only when all 8 outcomes are equally likely; any departure from uniform lowers it."
},
{
"q": "A fair 64-sided die is rolled. The entropy of the outcome is…",
"options": [
"64 bits",
"6 bits",
"8 bits",
"1 bit"
],
"answer": 1,
"why": "The distribution is uniform over 64 outcomes, so the entropy is log₂ 64 = 6 bits."
},
{
"q": "A source emits A, B, C, D with probabilities ½, ¼, ⅛, ⅛. Its entropy is…",
"options": [
"2.0 bits",
"1.5 bits",
"4 bits",
"1.75 bits"
],
"answer": 3,
"why": "Each outcome contributes its probability times its information: ½·1 + ¼·2 + ⅛·3 + ⅛·3 = 1.75 bits, below the 2 bits of an even four-way split."
}
],
"capabilities": [],
"height": 460,
"requires": [
"coin-entropy"
],
"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>Shape a distribution</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; }
.hint { font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin: 0 0 4px; }
.control-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.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); }
.readout.inline { margin-left: auto; text-align: right; }
.readout .big { display: block; font-size: 34px; font-weight: 600; color: var(--accent); line-height: 1.1; min-width: 5ch; }
.readout small { color: var(--text-dim); font-size: 12.5px; }
.plot { display: block; width: 100%; height: 280px; cursor: ns-resize; touch-action: none; }
.meter { height: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 99px; overflow: hidden; margin-top: 14px; }
.meter-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 99px; transition: width .2s ease; }
@media (max-width: 560px) { .readout .big { font-size: 27px; } }
</style>
</head>
<body>
<div class="widget">
<p class="hint">drag the bars to reshape the distribution</p>
<canvas id="bars" class="plot" title="drag the bars"></canvas>
<div class="control-row">
<button class="btn" id="uniform">uniform</button>
<button class="btn" id="spike">spike</button>
<button class="btn" id="coin">fair coin on two</button>
<button class="btn" id="random">randomize</button>
<div class="readout inline">
<span class="big mono" id="h">3.00</span>
<small id="h-label">bits (max 3.00)</small>
</div>
</div>
<div class="meter"><div class="meter-fill" id="meter"></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
/* Shape a distribution: drag bars over n outcomes and watch entropy move between 0 and log₂ n. */
(() => {
'use strict';
const $ = (id) => document.getElementById(id);
const { clamp, entropy, normProbs, T, readTheme, setupCanvas, attachColumnDrag, onResize, MONO } = window.Info;
const M = { l: 14, r: 14, t: 26, b: 28 };
const LABELS = 'ABCDEFGHIJKLMNOP'.split('');
let n = 8;
let weights = new Array(n).fill(1);
let host = null;
function render() {
const canvas = $('bars');
const { ctx, w, h } = setupCanvas(canvas);
const pw = w - M.l - M.r;
const ph = h - M.t - M.b;
const slot = pw / n;
const barW = slot * 0.62;
const probs = normProbs(weights);
const maxP = Math.max(...probs, 0.0001);
ctx.clearRect(0, 0, w, h);
ctx.font = (n > 12 ? '11px ' : '12px ') + MONO;
ctx.textAlign = 'center';
for (let i = 0; i < n; i++) {
const cx = M.l + slot * i + slot / 2;
const bh = (probs[i] / maxP) * ph;
const grad = ctx.createLinearGradient(0, M.t + ph - bh, 0, M.t + ph);
grad.addColorStop(0, T.ACCENT);
grad.addColorStop(1, T.ACCENT2);
ctx.fillStyle = grad;
ctx.beginPath();
ctx.roundRect(cx - barW / 2, M.t + ph - Math.max(bh, 2), barW, Math.max(bh, 2), 5);
ctx.fill();
ctx.fillStyle = T.DIM;
ctx.textBaseline = 'top';
ctx.fillText(LABELS[i], cx, M.t + ph + 8);
ctx.fillStyle = T.INK;
ctx.textBaseline = 'bottom';
ctx.fillText((probs[i] * 100).toFixed(0) + '%', cx, M.t + ph - bh - 5);
}
ctx.textBaseline = 'alphabetic';
const H = entropy(probs);
const max = Math.log2(n);
$('h').textContent = H.toFixed(2);
$('h-label').textContent = 'bits (max ' + max.toFixed(2) + ' = log₂ ' + n + ')';
$('meter').style.width = (H / max) * 100 + '%';
}
function setN(k) {
n = clamp(Math.round(k), 2, 16);
weights = new Array(n).fill(1);
render();
}
const ping = (data) => { if (host && host.signal) host.signal('interaction', data); };
attachColumnDrag($('bars'), () => n, (i, frac) => { weights[i] = frac; render(); }, M);
$('bars').addEventListener('pointerup', () => ping({ H: entropy(normProbs(weights)) }));
$('uniform').addEventListener('click', () => { weights = new Array(n).fill(1); render(); ping({ preset: 'uniform' }); });
$('spike').addEventListener('click', () => {
weights = new Array(n).fill(0);
weights[Math.min(3, n - 1)] = 1;
render();
ping({ preset: 'spike' });
});
$('coin').addEventListener('click', () => {
weights = new Array(n).fill(0);
weights[0] = 1; weights[1] = 1;
render();
ping({ preset: 'coin' });
});
$('random').addEventListener('click', () => { weights = weights.map(() => Math.random()); render(); ping({ preset: 'random' }); });
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); });
});
})();