2f:Tf00,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("stroke-width", 2); const gx = svg.append("g") .attr("transform", `translate(0,${height - margin.bottom + 12})`) .call(d3.axisBottom(xScale)); const line = d3.line() .x(d => xScale(d.x)) .y(d => yScaleDensity(d.y)); svg.selectAll("path.density") .data(densities) .join("path") .attr("class", "density") .attr("fill", "none") .attr("stroke", "rgba(0, 0, 0, 0.1)") .attr("stroke-width", 1.5) .attr("d", (d) => line(d)); svg.selectAll("circle.source") .data(start_blocks_geometry) .join("circle") .attr("class", "source") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", size / 5) .attr("fill", "#ccc"); svg.selectAll("circle.target") .data(target_blocks_geometry) .join("circle") .attr("class", "target") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", size / 5) .attr("fill", "#ccc"); const sugar = svg.selectAll("rect.sugar") .data(start_blocks_geometry) .join("rect") .attr("class", "sugar") .attr("transform", d => `translate(${d.x - size / 2}, ${d.y - size / 2})`) .attr("width", size) .attr("height", size) .attr("fill", (d) => { const r = 100 + Math.random() * 100; return `rgba(${r}, ${r}, ${r + 25}, 1)`; }); const ant = svg.append("g") .attr("transform", `translate(${xScale(0) + 50}, ${height - margin.bottom - 10})`); ant.append("g") .attr("transform", "scale(-0.25, 0.25)") .html(antSource); function dragstarted(event, d) { d3.select(this).attr("stroke", "black"); ant .transition() .duration(300) .attr("transform", `translate(${d.x + 50}, ${height - margin.bottom - 10})`) } function dragged(event, d) { d3.select(this).raise().attr("cx", d.x = event.x).attr("cy", d.y = event.y); } function dragended (event, d, index) { const closest = closest_target(event.x, event.y, start_blocks_geometry); if(closest != false) { const cost = Math.pow(closest.xp - d.xp, 2); const start_cost = mutable incurred_cost; d.occupying = closest; d3.select(sugar.nodes()[d.index]) .transition() .duration(1000) .attr("transform", `translate(${closest.x - size / 2}, ${closest.y - size / 2})`) d3.select(this).raise().attr("cx", d.x = closest.x).attr("cy", d.y = closest.y); ant.transition() .duration(1000) .attr("transform", `translate(${closest.x + 50}, ${height - margin.bottom - 10})`) .tween("cost", () => { return (t) => { mutable incurred_cost = start_cost + cost * t; } }); //mutable incurred_cost = start_cost + cost; } else { d.occupying = false; d3.select(sugar.nodes()[d.index]) .attr("cx", d.original_x) .attr("cy", d.original_y); d3.select(this).raise().attr("cx", d.x = d.original_x).attr("cy", d.y = d.original_y); } d3.select(this).attr("stroke", null); } const drag = d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); svg.selectAll("circle.start") .data(start_blocks_geometry) .join("circle") .attr("class", "start") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", size) .attr("fill", "rgba(0, 0, 0, 0)") .call(drag) .on("click", clicked); function clicked(event, d) { if (event.defaultPrevented) return; d3.select(this).transition() .attr("fill", "black") .attr("r", size * 2) .transition() .attr("r", size) .attr("fill", "gray"); } return svg.node(); }30:T6e7,antSource = ` `31:[] 2d:{"title":"Optimal Transport","cells":[{"id":0,"value":"# Optimal Transport","pinned":false,"hidden":false,"mode":"md"},{"id":394,"value":"Total cost: ${d3.format(\"0.1f\")(incurred_cost)}","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"viewof reset = Inputs.button(\"Reset\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"viewof scale = Inputs.range([2, 7], {label: \"Amount\", step: 1, value: 2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"min_cost = {\n let cost = 0;\n for(let i = 0; i < start_blocks_geometry.length; i++) {\n cost += Math.pow(target_blocks_geometry[i].xp - start_blocks_geometry[i].xp, 2);\n }\n return cost;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":" get_density = function(grid, mean, sd) {\n return grid.map((x) => ({\n x: x,\n y: dnorm(x, mean, sd)\n }));\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"densities = [\n get_density(d3.range(-5, 5.1, 0.1), mean, sd),\n get_density(d3.range(2, 12.1, 0.1), mean + 7, sd)\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"xScale = d3.scaleLinear()\n .domain([-4, 11])\n .range([margin.left, width - margin.right]);\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"yScale = d3.scaleLinear()\n .domain([0, d3.max(start_blocks, (d) => d.count)])\n .range([height - margin.bottom, height - margin.bottom - d3.max(start_blocks, (d) => d.count) * (size + 4)]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":451,"value":"yScaleDensity = d3.scaleLinear()\n .domain([0, d3.max(densities[0], (d) => d.y)])\n .range([height - margin.bottom, height - margin.bottom - d3.max(start_blocks, (d) => d.count) * (size + 4)]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"mutable incurred_cost = { reset; return 0 };","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"get_blocks = function(mean, sd, xs) {\n const block_height = dnorm(mean, mean, sd) / scale;\n\n const blocks = [];\n let index = 0;\n for(let j in xs) {\n for(let i = 0; i < Math.floor(dnorm(xs[j], mean, sd) / block_height); i++) {\n blocks.push({ xp: xs[j], count: i, index: index } );\n index += 1;\n }\n }\n \n return blocks;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"start_blocks = {\n reset;\n return get_blocks(\n mean,\n sd,\n d3.range(-5, 5.1, 0.5)\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"closest_target = function(x, y, blocks) {\n console.log(x, y);\n let closest_index = -1;\n let closest_distance = 100;\n for(let i = 0; i < target_blocks_geometry.length; i++) {\n // Make sure it's not already occupied\n if(blocks.filter((d) => d.occupying == target_blocks_geometry[i]).length > 0) {\n continue;\n }\n \n const dist = Math.sqrt(Math.pow(target_blocks_geometry[i].x - x, 2) + Math.pow(target_blocks_geometry[i].y - y, 2));\n if(dist < closest_distance) {\n closest_distance = dist;\n closest_index = i;\n }\n }\n if(closest_index < 0) return false;\n return target_blocks_geometry[closest_index];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"target_blocks = get_blocks(\n mean + 7,\n sd,\n d3.range(0, 12.1, 0.5)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"start_blocks_geometry = start_blocks.map((d) => ({\n xp: d.xp,\n index: d.index,\n original_x: xScale(d.xp),\n original_y: yScale(d.count),\n x: xScale(d.xp),\n y: yScale(d.count)\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"target_blocks_geometry = target_blocks.map((d) => ({\n index: d.index,\n xp: d.xp,\n x: xScale(d.xp),\n y: yScale(d.count)\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"margin = ({ left: 50, top: 50, right: 50, bottom: 100 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"mean = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"sd = 1.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"dnorm = (x, mean, sd) => 1 / (sd * Math.sqrt(2 * Math.PI)) * Math.exp(-0.5 * Math.pow((x - mean) / sd, 2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"size = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}