29:null 2a:["$","title",null,{"children":"Earth Mover Distance | Shubhanshu Mishra | Observable"}] 2f:[] 2d:{"id":"c2c16a772a20d428","slug":"earth-mover-distance","title":"Earth Mover Distance","thumbnail":"08bed23285340267c6b2169c65414535063097a2101ab9776e211c5f7670940c","access_level":"public","create_time":"$D2019-11-16T12:31:06.707Z","update_time":"$D2021-01-27T01:35:30.715Z","view_time":null,"first_public_time":"$D2019-11-16T17:16:38.593Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3df8ffe3d85471be","login":"napsternxg","name":"Shubhanshu Mishra","avatar_url":"https://avatars-next.observableusercontent.com/38949e46a60167fcf6722d089a015b3ab69512009eaa466fffcf77bc884707c4","tier":"starter_2024"},"version":203,"publish_version":203,"role":null,"authored":false,"authors":[{"type":"individual","id":"88a899f83ba8101d","login":"napsternxg","name":"Shubhanshu Mishra","avatar_url":"https://avatars-next.observableusercontent.com/38949e46a60167fcf6722d089a015b3ab69512009eaa466fffcf77bc884707c4","tier":null}],"members":[{"type":"individual","id":"88a899f83ba8101d","login":"napsternxg","name":"Shubhanshu Mishra","avatar_url":"https://avatars-next.observableusercontent.com/38949e46a60167fcf6722d089a015b3ab69512009eaa466fffcf77bc884707c4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"812ee4aaa8ce928b","slug":"explorables","title":"Explorables","owner":{"id":"3df8ffe3d85471be","login":"napsternxg","name":"Shubhanshu Mishra"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"html`

p

${get_barchart(p)}

q

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

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"p = emd_table.p","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"q = emd_table.q","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"import { ternarySlider as slider } from '@yurivish/ternary-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"