2e:null 2f:["$","title",null,{"children":"Distances Comparison | Chathura Jayalath | Observable"}] 34:T1231, // === CELL 2: Interactive visualization with viewof === viewof points = { const width = 200; const height = 200; let snapToInteger = false; // Create container const container = document.createElement("div"); // Create checkbox controls const controls = document.createElement("div"); controls.style.cssText = "margin-bottom: 12px; display: flex; align-items: center; gap: 8px;"; const checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.id = "snapCheckbox"; checkbox.style.cssText = "cursor: pointer; width: 16px; height: 16px;"; const label = document.createElement("label"); label.htmlFor = "snapCheckbox"; label.textContent = "Snap coordinates to integers"; label.style.cssText = "cursor: pointer; font-size: 14px; color: #333;"; checkbox.addEventListener("change", (e) => { snapToInteger = e.target.checked; }); controls.appendChild(checkbox); controls.appendChild(label); container.appendChild(controls); // Create SVG const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("background", "#fafafa"); container.appendChild(svg.node()); // Grid background const gridSize = 50; for (let i = 0; i < width; i += gridSize) { svg.append("line") .attr("x1", i).attr("y1", 0) .attr("x2", i).attr("y2", height) .attr("stroke", "#e0e0e0") .attr("stroke-width", 0.5) .attr("opacity", 0.4); } for (let i = 0; i < height; i += gridSize) { svg.append("line") .attr("x1", 0).attr("y1", i) .attr("x2", width).attr("y2", i) .attr("stroke", "#e0e0e0") .attr("stroke-width", 0.5) .attr("opacity", 0.4); } // Initialize state object const state = { p1: { x: 50, y: 50 }, p2: { x: 80, y: 90 } }; // Connection line const connLine = svg.append("line") .attr("stroke", "#999") .attr("stroke-dasharray", "4,4") .attr("opacity", 0.5) .attr("stroke-width", 1); // Euclidean distance line const eucLine = svg.append("line") .attr("stroke", "#1e88e5") .attr("stroke-width", 2) .attr("opacity", 0.3); // Manhattan path (L-shaped) const manhPath = svg.append("path") .attr("stroke", "#43a047") .attr("stroke-width", 1.5) .attr("fill", "none") .attr("opacity", 0.25); // Point circles const circles = svg.selectAll("circle") .data([ { id: 1, color: "#1e88e5" }, { id: 2, color: "#43a047" } ]) .join("circle") .attr("r", 8) .attr("fill", d => d.color) .attr("stroke", "white") .attr("stroke-width", 2) .attr("cursor", "grab") .style("user-select", "none"); // Labels const labels = svg.selectAll("text") .data([ { id: 1, text: "P₁" }, { id: 2, text: "P₂" } ]) .join("text") .attr("font-size", 12) .attr("font-weight", 500) .attr("fill", "#333") .text(d => d.text); // Update function function update() { const p1 = state.p1; const p2 = state.p2; connLine .attr("x1", p1.x).attr("y1", p1.y) .attr("x2", p2.x).attr("y2", p2.y); eucLine .attr("x1", p1.x).attr("y1", p1.y) .attr("x2", p2.x).attr("y2", p2.y); manhPath .attr("d", `M ${p1.x} ${p1.y} L ${p2.x} ${p1.y} L ${p2.x} ${p2.y}`); circles .attr("cx", (d) => d.id === 1 ? p1.x : p2.x) .attr("cy", (d) => d.id === 1 ? p1.y : p2.y); labels .attr("x", (d) => (d.id === 1 ? p1.x : p2.x) + 12) .attr("y", (d) => (d.id === 1 ? p1.y : p2.y) - 8); } // Drag behavior const drag = d3.drag() .on("start", (event) => { d3.select(event.sourceEvent.target).attr("cursor", "grabbing"); }) .on("drag", (event, d) => { let x = event.x; let y = event.y; // Snap to integers if checkbox is checked if (snapToInteger) { x = Math.round(x); y = Math.round(y); } if (d.id === 1) { state.p1 = { x: Math.max(10, Math.min(width - 10, x)), y: Math.max(10, Math.min(height - 10, y)) }; } else { state.p2 = { x: Math.max(10, Math.min(width - 10, x)), y: Math.max(10, Math.min(height - 10, y)) }; } update(); svg.node().dispatchEvent(new CustomEvent("input", { bubbles: true })); }) .on("end", (event) => { d3.select(event.sourceEvent.target).attr("cursor", "grab"); }); circles.call(drag); update(); // Return the container with both checkbox and SVG, and attach state value container.value = state; return container; }35:T7f8,// === CELL 3: Display metrics (reactive) === { const distances = calculateDistances(points.p1, points.p2); return html`

Distance metrics

Euclidean

${distances.euclidean.toFixed(2)}

√[(x₂-x₁)² + (y₂-y₁)²]

Manhattan

${distances.manhattan.toFixed(2)}

|x₂-x₁| + |y₂-y₁|

Chebyshev

${distances.chebyshev.toFixed(2)}

max(|x₂-x₁|, |y₂-y₁|)

P₁: (${Math.round(points.p1.x)}, ${Math.round(points.p1.y)}) P₂: (${Math.round(points.p2.x)}, ${Math.round(points.p2.y)})

`; } 36:[] 32:{"id":"e958a7642bda4776","slug":"distances-comparison","title":"Distances Comparison","thumbnail":"c3be131334f62d29faeaa3e7f2cd919040b29230c1a70dc153b46f34c1983766","access_level":"public","create_time":"$D2026-07-03T03:53:10.665Z","update_time":"$D2026-07-03T04:14:46.807Z","view_time":null,"first_public_time":"$D2026-07-03T04:10:27.535Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"faa67bfd1359f951","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":"starter_2024"},"version":43,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5fe81dea2f61079a","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":null}],"members":[{"type":"individual","id":"5fe81dea2f61079a","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":null,"role":"editor"},{"type":"team","id":"faa67bfd1359f951","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Distances Comparison","cells":[{"id":0,"value":"# Distances Comparison","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"// === CELL 1: Distance calculation function ===\nfunction calculateDistances(p1, p2) {\n const dx = p2.x - p1.x;\n const dy = p2.y - p1.y;\n \n return {\n euclidean: Math.sqrt(dx * dx + dy * dy),\n manhattan: Math.abs(dx) + Math.abs(dy),\n chebyshev: Math.max(Math.abs(dx), Math.abs(dy))\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"// Alternative: Complete standalone function for Copy/Paste\nfunction distanceMetricsVisualization(container) {\n const width = 700, height = 500;\n const state = { p1: { x: 150, y: 150 }, p2: { x: 550, y: 350 } };\n \n const svg = d3.select(container).append(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n // Add grid, points, lines, and drag behavior...\n // (Full implementation as shown in Cell 3 above)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"