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; }