31:[] 2f:{"title":"Earth Mover Distance","cells":[{"id":0,"value":"md`# Earth Mover Distance\n\nCode based on: https://math.stackexchange.com/questions/714476/how-do-you-compute-numerically-the-earth-movers-distance-emd\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"emd_table = {\n let p_slider = slider();\n let q_slider = slider();\n // Using values from elements: https://observablehq.com/@observablehq/a-brief-introduction-to-viewof\n let p = Generators.input(p_slider);\n let q = Generators.input(q_slider);\n \n let p_bar = get_barchart(p);\n let q_bar = get_barchart(q);\n \n const table = html`\n \n \n \n \n

p	q
${p_slider}	${q_slider}
${p_bar}	${q_bar}

`;\n table.p = p;\n table.q = q;\n return table\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"html`

p

${get_barchart(p)}

q

${get_barchart(q)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"html`

Earth Mover Distance: ${get_emd(p, q)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"p = emd_table.p","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"q = emd_table.q","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"function get_emd(p, q){\n /**\n Code based on: https://math.stackexchange.com/questions/714476/how-do-you-compute-numerically-the-earth-movers-distance-emd\n */\n let temp_emd = 0.0;\n let emd = 0.0;\n for(let i = 0; i < p.length; i++){\n temp_emd = p[i] + temp_emd - q[i];\n emd += Math.abs(temp_emd);\n console.log(`i=${i}\\ttemp_emd=${temp_emd}, emd=${emd}`)\n }\n return emd;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"function get_barchart(p){\n // Code from: https://observablehq.com/@jurb/data-visualisatie-met-d3-js\n const graph = d3.select(DOM.element(\"div\")); \n \n graph.selectAll(\"div\")\n .data(p)\n .enter()\n .append(\"div\")\n .attr(\"class\", \"bar\")\n .style(\"height\", d => d*100 + \"px\"); // use the data value in pixels as height\n return graph.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"import { ternarySlider as slider } from '@yurivish/ternary-slider'","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}