2a:null 2b:["$","title",null,{"children":"Forward and Reverse KL Divergences | Zihou Ng | Observable"}] 30:T634,chart = { const { height, margin, extent } = opts; const root = d3.select(DOM.svg(width, height)); root.append("g").classed("axis-x", true) .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(d3.scaleLinear(extent.mu, [margin.left, width - margin.right])).tickSize(-height+margin.top+margin.bottom)) .selectAll(".tick line").attr("stroke", "hsl(0,0%,90%)"); root.append("g").classed("axis-y", true) .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(d3.scaleLinear(extent.y, [height - margin.bottom, margin.top])).tickSize(-width+margin.left+margin.right-2)) .selectAll(".tick line").attr("stroke", "hsl(0,0%,90%)"); root.append("clipPath") .attr("id", "clip-graph") .append("rect") .attr("width", width - margin.right - margin.left) .attr("height", height - margin.top - margin.bottom); root.append("g") .attr("clip-path","url(#clip-graph)") .attr("transform", `translate(${margin.left+1},${margin.top})`) .call(g => { g.append("path").classed("dist-p", true); g.append("path").classed("dist-q", true); }); return html`

${tex`p=N(\mu_1,\sigma_1)`}

${tex`q=N(\mu_2,\sigma_2)`}

${root.node()}

`; }31:T1653,viewof params = { const { extent, domain } = opts; const lineHeight = 15, axisHeight = 20; const margin = { top: 10, bottom: lineHeight + axisHeight, left: axisHeight + lineHeight + 5, right: 10 }; const csize = domain.mu.length; const height = csize + margin.top + margin.bottom; const step = csize + margin.left + margin.right; const elm = d3.select(DOM.svg(width, height)); const styleLabel = t => t.attr("font-family", "Open Sans") .attr("font-size", "10px") .attr("alignment-baseline", "hanging") .attr("text-anchor", "middle"); const scales = { mu: d3.scaleLinear(extent.mu, [0, csize]), sigma: d3.scaleLinear(extent.sigma, [csize, 0]) }; const appendAxes = g => { g.append("g") .attr("transform", `translate(${0},${height - margin.bottom})`) .call(d3.axisBottom(d3.scaleLinear(extent.mu, [margin.left, csize + margin.left]))); g.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(d3.scaleLinear(extent.sigma, [height - margin.bottom, margin.top]))); }; const appendLables = g => { g.append("text") .attr("transform", `translate(${margin.left + csize / 2},${height-margin.bottom + axisHeight})`) .call(styleLabel) .text("mu"); g.append("text") .attr("transform", `translate(${0},${margin.top + csize / 2}) rotate(-90)`) .call(styleLabel) .text("sigma"); }; const params = { mu1: 0, mu2: -1, sigma1: 1, sigma2: 1 }; const setup = (g, name) => { g.call(appendAxes).call(appendLables) .append("clipPath") .attr("id", `clip-${name}`) .append("rect") .attr("width", csize) .attr("height", csize); const g0 = g.append("g") .attr("clip-path", `url(#clip-${name})`) .attr("transform", `translate(${margin.left},${margin.top})`); g0.append("rect") .classed("drag-area", true) .attr("fill", "transparent") .attr("width", csize) .attr("height", csize); g0.append("g").classed("p1", true) .attr("transform", `translate(${scales.mu(params.mu1)},${scales.sigma(params.sigma1)})`) .call(g => { g.append("circle") .attr("fill", d3.schemeCategory10[0]) .attr("stroke",'black') .attr("r", 3); g.append("circle") .attr("fill", "transparent") .attr("r", 20); }); g0.append("g").classed("p2", true) .attr("transform", `translate(${scales.mu(params.mu2)},${scales.sigma(params.sigma2)})`) .call(g => { g.append("circle") .attr("fill", d3.schemeCategory10[3]) .attr("stroke",'black') .attr("r", 3); g.append("circle") .attr("fill", "transparent") .attr("r", 20); }); } const g1 = elm.append("g").call(setup, "pq"); const g2 = elm.append("g").attr("transform", `translate(${step},0)`).call(setup, "qp"); const ctx1 = DOM.context2d(csize, csize, 1); const ctx2 = DOM.context2d(csize, csize, 1); const titlePQ = DOM.element('div'); const titleQP = DOM.element('div'); const root = html`

${titlePQ}

${titleQP}

${ctx1.canvas}

${ctx2.canvas}

${elm.node()}

`; function updateParams() { root.value = params; root.dispatchEvent(new CustomEvent("input")); titlePQ.innerHTML = tex`D_{KL}(p \| q) = ${kld(params.mu1, params.mu2, params.sigma1, params.sigma2).toFixed(2)}`.outerHTML; titleQP.innerHTML = tex`D_{KL}(q \| p) = ${kld(params.mu2, params.mu1, params.sigma2, params.sigma1).toFixed(2)}`.outerHTML; } updateParams(); const img1 = ctx1.getImageData(0, 0, csize, csize); const img2 = ctx2.getImageData(0, 0, csize, csize); const data1 = new Uint32Array(img1.data.buffer); const data2 = new Uint32Array(img2.data.buffer); const logScale = d3.scaleLog([1e-2, opts.max], [0, 1]) const cmap = x => { const t = Math.max(0, logScale(x)); return d3.rgb(d3.interpolateCividis(t)); }; function updateHeat() { for (let i = 0; i < csize; i++) { for (let j = 0; j < csize; j++) { const k = i * csize + j; const pq = cmap(kld(domain.mu[j], params.mu2, domain.sigma[csize-i-1], params.sigma2)); data1[k] = 255 << 24 | pq.r << 16 | pq.g << 8 | pq.b; const qp = cmap(kld(params.mu2, domain.mu[j], params.sigma2, domain.sigma[csize-i-1])); data2[k] = 255 << 24 | qp.r << 16 | qp.g << 8 | qp.b; } } ctx1.putImageData(img1, 0, 0); ctx2.putImageData(img2, 0, 0); } updateHeat(); const p1 = elm.selectAll(".p1"); p1.call(d3.drag().on("drag", e => { const x = clamp(e.x, 0, csize), y = clamp(e.y, 0, csize); p1.attr("transform", `translate(${x},${y})`); params.mu1 = scales.mu.invert(x); params.sigma1 = scales.sigma.invert(y); updateParams(); })); const p2 = elm.selectAll(".p2"); p2.call(d3.drag().on("drag", e => { const x = clamp(e.x, 0, csize), y = clamp(e.y, 0, csize); p2.attr("transform", `translate(${x},${y})`); params.mu2 = scales.mu.invert(x); params.sigma2 = scales.sigma.invert(y); updateParams(); updateHeat(); })); invalidation.then(() => { p1.on("drag", null); p2.on("drag", null); }); return root; }32:[] 2e:{"id":"fe93f29dd4ab1ba6","slug":"forward-and-reverse-kl-divergences","title":"Forward and Reverse KL Divergences","thumbnail":"31b280a5b3d46d95bd7b293e40a462092366f959bbc37ab89edc88c48ba078e1","access_level":"public","create_time":"$D2020-08-13T15:48:20.602Z","update_time":"$D2021-11-20T11:43:16.871Z","view_time":null,"first_public_time":"$D2020-09-21T11:45:01.674Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":"starter_2024"},"version":1548,"publish_version":1548,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null}],"members":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"b61c4cbf8581f558","slug":"visualizations","title":"Visualizations","owner":{"id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng"}},"type":"notebook","body":{"title":"Forward and Reverse KL Divergences","cells":[{"id":0,"value":"md`# Forward and Reverse KL Divergences`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"md`The difference between forward and reverse Kullback-Leibler Divergence is [quite](https://dibyaghosh.com/blog/probability/kldivergence.html) [subtle](https://wiseodd.github.io/techblog/2016/12/21/forward-reverse-kl/). We can get a hopefully more intuitive comparison by looking at the heatmap.\n\nLet's say we have two normal distributions, ${tex`p(x)=N(\\mu_1,\\sigma_1)`} and ${tex`q(x)=N(\\mu_2,\\sigma_2)`}, the KL Divergences are [defined](https://stats.stackexchange.com/questions/7440/kl-divergence-between-two-univariate-gaussians) as:\n\n${tex.block`D_{KL}(p \\| q) = \\log\\frac{\\sigma_2}{\\sigma_1} + \\frac{\\sigma_1^2 + (\\mu_1-\\mu_2)^2}{2 \\sigma_2^2} - \\frac{1}{2}`}\n\nand reversely \n${tex.block`D_{KL}(q \\| p) = \\log\\frac{\\sigma_1}{\\sigma_2} + \\frac{\\sigma_2^2 + (\\mu_2-\\mu_1)^2}{2 \\sigma_1^2} - \\frac{1}{2}`}\n\nAdjust the heatmaps below to see how these two definitions behave.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":521,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1242,"value":"md`---\n## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"draw = {\n const { domain, scales } = opts;\n const { mu1, mu2, sigma1, sigma2 } = params;\n const root = d3.select(chart);\n \n root.select(\".dist-p\")\n .data([domain.mu])\n .attr(\"stroke\", d3.schemeCategory10[0])\n .attr(\"stroke-width\", 1)\n .attr(\"fill\", d3.schemeCategory10[0])\n .attr(\"fill-opacity\", .5)\n .attr(\"d\", d3.area().x(d => scales.x(d)).y0(scales.y(0)).y1(x => scales.y(pdf(mu1, sigma1)(x))));\n root.select(\".dist-q\")\n .data([domain.mu])\n .attr(\"stroke\", d3.schemeCategory10[3])\n .attr(\"stroke-width\", 1)\n .attr(\"fill\", d3.schemeCategory10[3])\n .attr(\"fill-opacity\", .5)\n .attr(\"d\", d3.area().x(d => scales.x(d)).y0(scales.y(0)).y1(x => scales.y(pdf(mu2, sigma2)(x))));\n \n root.select(\".label-p\").node().innerHTML = tex`p=N(${mu1.toFixed(2)},${sigma1.toFixed(2)})`.outerHTML;\n root.select(\".label-q\").node().innerHTML = tex`q=N(${mu2.toFixed(2)},${sigma2.toFixed(2)})`.outerHTML;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"opts = {\n const height = 250;\n const margin = { top: 10, right: 20, bottom: 20, left: 30 };\n const extent = { mu: [-5, 5], sigma: [0.5, 5], y: [0, 0.5] };\n const scales = {\n x: d3.scaleLinear(extent.mu, [0, width - margin.right - margin.left]),\n y: d3.scaleLinear(extent.y, [height - margin.bottom - margin.top, 0]),\n };\n const step = [0.05, 0.0225];\n const domain = {\n mu: d3.range(extent.mu[0], extent.mu[1] + step[0], step[0]),\n sigma: d3.range(extent.sigma[0], extent.sigma[1] + step[1], step[1]),\n };\n return { \n margin, height, extent, scales, domain, step,\n max: 248\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":308,"value":"kld = (mu1, mu2, sigma1, sigma2) => {\n return Math.log(sigma2 / sigma1) + (sigma1 ** 2 + (mu1 - mu2) ** 2) / (2 * sigma2 ** 2) - .5;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"pdf = (mu, sigma) => x => {\n const m = sigma * Math.sqrt(2 * Math.PI);\n const e = Math.exp(-Math.pow(x - mu, 2) / (2 * sigma ** 2));\n return e / m;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"md`### Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"makePath = (x, y, scales) => {\n const path = d3.path();\n path.moveTo(scales.x(x[0]), scales.y(y[0]));\n for (let i = 1; i < x.length; i++)\n path.lineTo(scales.x(x[i]), scales.y(y[i]));\n return path;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":798,"value":"clamp = (x, min, max) => Math.max(min, Math.min(max, x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"md`---\n## References`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"md`\n* [A Zero-Maths Interactive Introduction to KL-Divergence](http://mdcrosby.com/blog/kldivergence.html)\n * [KL-Divergence Part 2: Gradient Descent](http://mdcrosby.com/blog/graddescent.html)\n * [KL-Divergence Part 3: An oddly satisfying visualisation of 6-variable gradient descent](http://mdcrosby.com/blog/graddescent2.html)\n* [KL-divergence as an objective function — Graduate Descent](https://timvieira.github.io/blog/post/2014/10/06/kl-divergence-as-an-objective-function/)\n* [KL Divergence for Machine Learning](https://dibyaghosh.com/blog/probability/kldivergence.html)\n* [KL Divergence: Forward vs Reverse?](https://wiseodd.github.io/techblog/2016/12/21/forward-reverse-kl/)\n* [normal distribution - KL divergence between two univariate Gaussians - Cross Validated](https://stats.stackexchange.com/questions/7440/kl-divergence-between-two-univariate-gaussians)\n* [errcw/gaussian: A JavaScript model of the normal distribution](https://github.com/errcw/gaussian)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"