2f:T44e,{ await visibility(); const ctx = DOM.context2d(width, height); yield ctx.canvas; function render() { ctx.clearRect(0, 0, width, height); drawPoints(ctx, example_points, 5); drawTriangle(ctx, example_points); ctx.save(); ctx.strokeStyle = "red"; ctx.fillStyle = "red"; let bisections = getBisections(example_points); let { center, radius } = getCircumcircle(bisections); let bisectionLength = 2.3 * getMinimalLengthBisections(bisections.map(b => b.vertex), center); drawBisections(ctx, bisections, bisectionLength); ctx.beginPath(); ctx.fillStyle = `rgb(255,0,0,0.03)`; ctx.arc(center.x, center.y, radius, 0, 2 * Math.PI); ctx.stroke(); ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.fillStyle = `black`; ctx.arc(center.x, center.y, 5, 0, 2 * Math.PI); ctx.fill(); ctx.restore(); } render(); // Bind the drag behavior for interaction. d3.select(ctx.canvas).call( drag( example_points, render, () => (mutable example_points = mutable example_points) ) ); }30:T522,{ await visibility(); const ctx = DOM.context2d(width, height); yield ctx.canvas; function render() { let sample_points = points.slice(0, 5); let bisections = getBisections(example_points); let { center, radius } = getCircumcircle(bisections); let bisectionLength = 2.3 * getMinimalLengthBisections(bisections.map(b => b.vertex), center); let point_included = sample_points.find( pt => distance(center, pt) < radius ); ctx.clearRect(0, 0, width, height); drawPoints(ctx, sample_points, 4); drawPoints(ctx, example_points, 5); if (!point_included) drawTriangle(ctx, example_points); ctx.strokeStyle = `${point_included ? "red" : "blue"}`; ctx.fillStyle = `${point_included ? "red" : "blue"}`; ctx.beginPath(); ctx.fillStyle = `rgb(${point_included ? "255,0,0" : "0,0,255"},0.03)`; ctx.arc(center.x, center.y, radius, 0, 2 * Math.PI); ctx.stroke(); ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.fillStyle = `black`; // ctx.arc(center.x, center.y, 5, 0, 2 * Math.PI); ctx.fill(); } render(); // Bind the drag behavior for interaction. d3.select(ctx.canvas).call( drag( example_points, render, () => (mutable example_points = mutable example_points) ) ); }31:T2170,{ redraw; const pointRadius = 7; const marginRight = 100; const svg = d3.create("svg") .attr("width", width) .attr("height", height); const nrPointsX = 6; const nrPointsY = 3; // Generate random data for point positions - width 10 x height 5 const nrPoints = {x: nrPointsX, y: nrPointsY}; const cellSize = {x: (width - marginRight)/nrPoints.x, y: height/nrPoints.y}; const pointData = []; d3.range(nrPoints.x).forEach(idx => { d3.range(nrPoints.y).forEach(idy => { pointData.push({ x: idx * cellSize.x + Math.random() * cellSize.x, y: idy * cellSize.y + Math.random() * cellSize.y, idx, idy, id: `${idx}${idy}` }) }); }); // Taken from: https://d3js.org/d3-delaunay/delaunay const delaunay = new d3_7.Delaunay(Float64Array.of(...pointData.map(d => ([d.x, d.y])).flat())); const {points, halfedges, triangles} = delaunay; // Extract the line information from the triangulation const lineData = []; for (let i = 0, n = halfedges.length; i < n; ++i) { const j = halfedges[i]; if (j < i) continue; const ti = triangles[i]; const tj = triangles[j]; lineData.push({ x1: points[ti * 2], y1: points[ti * 2 + 1], x2: points[tj * 2], y2: points[tj * 2 + 1], id1: pointData[ti].id, id2: pointData[tj].id, }); } // Add the convex hull as, apparently, this is missing from d3.delauny const pointsHull = d3.polygonHull(pointData.map(d => { const outArray = [d.x, d.y]; outArray.id = d.id; return outArray; })); const borderCellIds = [ ...d3.range(nrPointsX).map(d => d + '0'), ...d3.range(1, nrPointsY).map(d => (nrPointsX-1) + '' + d), ...d3.range(nrPointsX-2, 0, -1).map(d => d + '' + (nrPointsY-1)), ...d3.range(nrPointsY-1, 0, -1).map(d => '0' + d), '00' ]; const hullIds = pointsHull.map(d => d.id); // Go over all border cell points and, for each, find the next border cell point that is on the convex hull borderCellIds.forEach((id1, i) => { if (hullIds.includes(id1) && i !== borderCellIds.length-1) { // Go over all later border cell points and check whether the corresponding point is part of the convex hull let j = i+1; while (!hullIds.includes(borderCellIds[j])) j = j+1; if (hullIds.includes(borderCellIds[j])) { // Exclude the case that no later id is contained anymore const p1 = pointData.find(d => d.id == id1); const p2 = pointData.find(d => d.id == borderCellIds[j]); lineData.push({ x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, id1: p1.id, id2: p2.id, }); } } }) /* pointsHull.forEach((d, i) => { const j = (i+1) % (pointsHull.length-1); console.log(i, j) lineData.push({ x1: d[0], y1: d[1], x2: pointsHull[j][0], y2: pointsHull[j][1], id1: d.id, id2: pointsHull[j].id, }); }) */ console.log(lineData) let trueLinesHidden = true; svg.selectAll('.true-line') .data(lineData) .join('line') .attr('class', 'true-line') .attr('x1', d => d.x1) .attr('y1', d => d.y1) .attr('x2', d => d.x2) .attr('y2', d => d.y2) .attr('stroke-width', 3) .attr('stroke', 'orange') .attr('opacity', 0) .attr('pointer-events', 'none'); const correctPointPairsSymmetrical = lineData.map(d => ([`${d.id1}${d.id2}`, `${d.id2}${d.id1}`])).flat(); console.log(correctPointPairsSymmetrical) // Append the basic circles svg.selectAll('circle-basic') .data(pointData) .enter() .append('circle') .attr('class', 'circle-basic') .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('r', pointRadius); // Append the reveal button const revealButton = svg.append('rect') .attr('x', width - marginRight) .attr('y', 0) .attr('width', marginRight) .attr('height', height) .attr('fill', 'rgb(150,150,150)'); // Append reveal text svg.append('text') //.attr('id', 'reveal-text') .attr('font-family', 'Arial, Helvetica, sans-serif') .attr('font-weight', 'bold') .attr('text-anchor', 'middle') .attr('transform', `translate(${width - marginRight/2 - 6},${height/2}) rotate(90)`) .text('Reveal Solution') .attr('pointer-events', 'none') .style('-webkit-user-select', 'none') .style('-moz-user-select', 'none') .style('-ms-user-select', 'none') .style('user-select', 'none'); svg.on("mousemove", function() { const [xMouse, yMouse] = d3.mouse(this).map(Math.abs); // Draw the center of the circle svg.selectAll('.circle-center') .data([{x: xMouse, y: yMouse}]) .join('circle') .attr('class', 'circle-center') .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('r', pointRadius) .attr('fill', 'none') .attr('stroke', 'black') .attr('stroke-width', 2) .attr('pointer-events', 'none'); // Determine the radius of the circumcircle // Determine the cell over which the mouse currently hovers to find all adjacent cells - only the points from the adjacent cells need to be considered to determine the three closest points - (keep in mind the border cases) //const idxCurrent = Math.floor(xMouse/cellSize.x); //const idyCurrent = Math.floor(yMouse/cellSize.y); // Get the points from all adjacent cells const adjacentPoints = pointData.filter(d => { const closeX = Math.abs(xMouse - d.x) <= 2 * cellSize.x; const closeY = Math.abs(yMouse - d.y) <= 2 * cellSize.y; return closeX && closeY; }); // Calculate the distances of the closest points to the mouse position adjacentPoints.forEach(d => { d['dist'] = distance(d, {x: xMouse, y: yMouse}); }) adjacentPoints.sort((a, b) => a.dist - b.dist); const rCircum = adjacentPoints[2].dist; // Plot the circum circle svg.selectAll('.circle-circum') .data([{x: xMouse, y: yMouse}]) .join('circle') .attr('class', 'circle-center') .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('r', rCircum) .attr('fill', 'none') .attr('stroke', 'grey') .attr('stroke-width', 1); // Update the current edge line (if existant) svg.select('.line-current') .attr('x2', xMouse) .attr('y2', yMouse); }); let line = []; svg.selectAll('.circle-basic') .on('click', function() { const circleNode = d3.select(this); const xCircleNode = +circleNode.attr('cx'); const yCircleNode = +circleNode.attr('cy'); if (line.length == 1) { // Finish the current line const nodeOfCurrentLine = svg.select('.line-current'); nodeOfCurrentLine .attr('x2', xCircleNode) .attr('y2', yCircleNode) .attr('class', 'line-drawn') // Evaluate whether the line was correct or wrong if (correctPointPairsSymmetrical.includes(line[0] + circleNode.datum().id)) { nodeOfCurrentLine.attr('stroke', rightColor); } else { nodeOfCurrentLine.attr('stroke', wrongColor); } line = []; } else { // Draw new current line svg.selectAll('.line-current').remove(); const [xMouse, yMouse] = d3.mouse(this).map(Math.abs); line.push(circleNode.datum().id); console.log(line) svg.append('line') .attr('class', 'line-current') .attr('x1', xCircleNode) .attr('y1', yCircleNode) .attr('x2', xMouse) .attr('y2', yMouse) .attr('stroke', 'grey') .attr('stroke-width', 3) .attr('pointer-events', 'none'); } }) revealButton.on('click', () => { if (true) { // if (trueLinesHidden) { svg.selectAll('.true-line') .attr('opacity', 1); } else { svg.selectAll('.true-line') .attr('opacity', 0); } trueLinesHidden = !trueLinesHidden; }) return svg.node(); }32:T6db,// adapted from https://observablehq.com/@d3/hello-d3-drag dragTriangle = (triangle, draw, end) => { // When starting a drag gesture, move the subject to the top and mark it as active. function dragstarted() { d3.select(this).style("cursor", "grabbing"); } // When dragging, update the subject’s position. async function dragged() { const agent = d3.event.subject; let dx = triangle.circumcenter.x - Math.max(0, Math.min(width, d3.event.x)), dy = triangle.circumcenter.y - Math.max(0, Math.min(height, d3.event.y)); triangle.vertices.forEach(vt => { (vt.x += dx), (vt.y += dy); }); await draw(); } // When ending a drag gesture, mark the subject as inactive again. function dragended() { d3.event.subject.active = false; d3.select(this).style("cursor", "grab"); if (end) end(); draw(); } function dragsubject(event) { const radius = radius_interaction; if (!event) event = d3.event; let subject = null; let maxDistance = radius * 1.5; let d = Math.hypot( event.x - triangle.circumcenter.x, event.y - triangle.circumcenter.y ); console.log(d, maxDistance); if (d < maxDistance) { maxDistance = d; subject = triangle.circumcenter; } return subject; } return function(sel) { sel .style("cursor", "pointer") .call( d3 .drag() .subject(dragsubject) .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) .on("mousemove", function() { const m = d3.mouse(this), subject = dragsubject({ x: m[0], y: m[1] }); d3.select(this).style("cursor", subject ? "grab" : "pointer"); }); }; }33:T60e,// adapted from https://observablehq.com/@d3/hello-d3-drag drag = (agents, draw, end) => { // When starting a drag gesture, move the subject to the top and mark it as active. function dragstarted() { d3.select(this).style("cursor", "grabbing"); } // When dragging, update the subject’s position. async function dragged() { const agent = d3.event.subject; agent.x = Math.max(0, Math.min(width, d3.event.x)); agent.y = Math.max(0, Math.min(height, d3.event.y)); await draw(); } // When ending a drag gesture, mark the subject as inactive again. function dragended() { d3.event.subject.active = false; d3.select(this).style("cursor", "grab"); if (end) end(); draw(); } function dragsubject(event) { const radius = radius_interaction; if (!event) event = d3.event; let subject = null; let maxDistance = radius * 1.5; for (const c of agents) { let d = Math.hypot(event.x - c.x, event.y - c.y); if (d < maxDistance) { maxDistance = d; subject = c; } } return subject; } return function(sel) { sel .style("cursor", "pointer") .call( d3 .drag() .subject(dragsubject) .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) .on("mousemove", function() { const m = d3.mouse(this), subject = dragsubject({ x: m[0], y: m[1] }); d3.select(this).style("cursor", subject ? "grab" : "pointer"); }); }; }34:[] 2d:{"title":"Visualization Exercises - Practical Notebook 3","cells":[{"id":1065,"value":"# Visualization Exercises - Practical Notebook 3","pinned":false,"hidden":false,"mode":"md"},{"id":1076,"value":"In this notebook, we want to look at how we can produce a surface mesh from a set of data points. For simplicity, we work in 2D, but the approach is also often used to visualize surfaces in 3D. \nTo get surface shapes with nice proportions, we can make use of the [Delauny triangulation](https://en.wikipedia.org/wiki/Delaunay_triangulation).","pinned":false,"hidden":false,"mode":"md"},{"id":1078,"value":"One way to look at the Delauny triangulation is that we connect all triplets of points to a triangle for which there is no other point from the data set that lies in the [circumcircle](https://en.wikipedia.org/wiki/Circumcircle) of the three points. \nTo get an intuition for what that means in practice, we can make use of a few example views taken from [this notebook](https://observablehq.com/@pierreleripoll/delaunay-triangulation-hand-made).","pinned":false,"hidden":false,"mode":"md"},{"id":1047,"value":"## The basic idea behind the circumcircle","pinned":false,"hidden":false,"mode":"md"},{"id":1089,"value":"This is a basic triangle, based on three data points. Each of the points is one vertex of the triangle.","pinned":false,"hidden":false,"mode":"md"},{"id":118,"value":"{\n await visibility();\n const ctx = DOM.context2d(width, height);\n yield ctx.canvas;\n\n function render() {\n ctx.clearRect(0, 0, width, height);\n drawPoints(ctx, example_points, 10);\n\n drawTriangle(ctx, example_points);\n }\n\n render();\n\n // Bind the drag behavior for interaction.\n d3.select(ctx.canvas).call(\n drag(\n example_points,\n render,\n () => (mutable example_points = mutable example_points)\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1091,"value":"Now let's draw the circumcircle for the three points. \nYou can grab and move the vertices of the triangle to see how it changes the center of the circumcircle and the circumcircle itself.","pinned":false,"hidden":false,"mode":"md"},{"id":266,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1144,"value":"Below, you see the same triangle as above, but this time, there are also other data points. In the context of the Delauny triangulation, connecting the three points is only allowed if no other data point is inside the circumcircle. \n_Try moving the three vertices around. Whenever the requirement is fulfilled, i.e., when there is no other point in the circle, the circle turns blue and the triangle is drawn. If the requirement is not fulfilled, the circle turns red and the triangle is not drawn._","pinned":false,"hidden":false,"mode":"md"},{"id":439,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1051,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":1045,"value":"# Your turn!","pinned":false,"hidden":false,"mode":"md"},{"id":1152,"value":"Now that you have gotten an understanding for the role that the circumcircle of three points plays, you can try to draw a Delauny triangle mesh yourself. To do so, in the view below, click on any point to begin a line. Click on another point to lock the line as an edge between the two points. Can you find all of the triangles? ","pinned":false,"hidden":false,"mode":"md"},{"id":1157,"value":"To reveal the solution produced by performing the Delauny triangulation automatically, click on \"Reveal Solution\" on the right. After revealing the solution, take a screenshot of your results and paste it on the Miro board for your respective exercise group: \nGroup 1: https://miro.com/app/board/uXjVLGnCaQ8=/?share_link_id=746885112655 \nGroup 2: https://miro.com/app/board/uXjVLGn7HpU=/?share_link_id=441951862348 \nGroup 3: https://miro.com/app/board/uXjVLGn7HrA=/?share_link_id=147432664183 \nGroup 4: https://miro.com/app/board/uXjVLGn7H28=/?share_link_id=346156132315 \nGroup 5: https://miro.com/app/board/uXjVLGmkeho=/?share_link_id=306310064429 ","pinned":false,"hidden":false,"mode":"md"},{"id":1160,"value":"_Note: We have added a circle as a visual aid to the view. The circle center follows the location of your mouse pointer. The radius of the circle is the mouse pointer's distance to the point which is third-closest to it._","pinned":false,"hidden":false,"mode":"md"},{"id":1061,"value":"viewof redraw = Inputs.button(\"Redraw\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1135,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1170,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":1074,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1174,"value":"viewof wrongColor = Inputs.color({label: \"'Incorrect' color\", value: \"#c20000\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"viewof rightColor = Inputs.color({label: \"'Correct' color\", value: \"#26e600\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"md`## Tools`","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"mutable delay = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"margin = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"radius_interaction = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"points = createPoints(20)","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"mutable random_points = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"mutable example_points = [\n { x: 250, y: 180 },\n { x: 450, y: 340 },\n { x: 650, y: 130 }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"createPoints = function(number, h = height, w = width, m = margin) {\n if (2 * m > Math.min(height, width)) m = margin;\n return Array.from({ length: number }, () => {\n return {\n x: Math.round(Math.random() * (w - 2 * m) + m),\n y: Math.round(Math.random() * (h - 2 * m) + m)\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"md`### Math`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"gradient = function(a, b) {\n return (b.y - a.y) / (b.x - a.x);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"perpendicularGradient = function(a, b) {\n return -1 / gradient(a, b);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"midpoint = function(a, b) {\n return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"getYIntercept = (vertex, slope) => {\n return vertex.y - slope * vertex.x\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"perpendicularBisector = (a, b) => {\n let slope = perpendicularGradient(a, b),\n midPoint = midpoint(a, b),\n yIntercept = getYIntercept(midPoint, slope),\n xIntercept = -yIntercept / slope,\n line = [];\n\n if (yIntercept === Infinity || yIntercept === -Infinity) {\n line = [\n {\n x: midPoint.x,\n y: 0\n },\n {\n x: midPoint.x,\n y: 20\n }\n ];\n } else if (a.x === b.x || isNaN(xIntercept)) {\n line = [{ x: 0, y: midPoint.y }, { x: 20, y: midPoint.y }];\n } else if (xIntercept < 0 || yIntercept < 0) {\n line = [{ x: xIntercept, y: 0 }, { x: 20, y: slope * 20 + yIntercept }];\n } else {\n line = [{ x: xIntercept, y: 0 }, { x: 0, y: yIntercept }];\n }\n return { line, vertex: midPoint, slope };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"getBisections = points => {\n let bisections = [];\n for (let i = 0; i < points.length; i++) {\n let { vertex, slope } = perpendicularBisector(\n points[i % points.length],\n points[(i + 1) % points.length]\n );\n bisections.push({ vertex, slope });\n }\n return bisections;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"getMinimalLengthBisections = (midpoints, center) => {\n var len = 0;\n for (let i = 0; i < midpoints.length; i++) {\n let d = distance(midpoints[i], center);\n len = Math.max(len, d);\n }\n return len;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"getCircumcircle2 = points => {\n var a = points[0];\n var b = points[1];\n var c = points[2];\n\n var x = 0,\n y = 0,\n r = 0;\n\n var A = b.x - a.x,\n B = b.y - a.y,\n C = c.x - a.x,\n D = c.y - a.y,\n E = A * (a.x + b.x) + B * (a.y + b.y),\n F = C * (a.x + c.x) + D * (a.y + c.y),\n G = 2 * (A * (c.y - b.y) - B * (c.x - b.x)),\n minx,\n miny,\n dx,\n dy;\n\n /* If the points of the triangle are collinear, then just find the\n * extremes and use the midpoint as the center of the circumcircle. */\n if (Math.abs(G) < 0.000001) {\n minx = Math.min(a.x, b.x, c.x);\n miny = Math.min(a.y, b.y, c.y);\n dx = (Math.max(a.x, b.x, c.x) - minx) * 0.5;\n dy = (Math.max(a.y, b.y, c.y) - miny) * 0.5;\n\n x = minx + dx;\n y = miny + dy;\n r = dx * dx + dy * dy;\n } else {\n x = (D * E - B * F) / G;\n y = (A * F - C * E) / G;\n dx = x - a.x;\n dy = y - a.y;\n r = Math.sqrt(dx * dx + dy * dy);\n }\n return { center: { x, y }, radius: r };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"getCircumcirleCenter = (lineA, lineB) => {\n const x1 = -lineA.slope,\n y1 = 1,\n c1 = getYIntercept(lineA.vertex, lineA.slope),\n x2 = -lineB.slope,\n y2 = 1,\n c2 = getYIntercept(lineB.vertex, lineB.slope);\n\n const matrix = [[x1, y1], [x2, y2]];\n\n const center = solveMatrix(matrix, [c1, c2]);\n return center;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"getCircumcircle = (bisections, pts = example_points) => {\n const center = getCircumcirleCenter(bisections[0], bisections[1]);\n if (!center) return { center: null, radius: null };\n const radius = distance(center, pts[0]);\n\n return { center, radius };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"distance = (a, b) => {\n return Math.sqrt((b.x - a.x) ** 2 + (b.y - a.y) ** 2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"solveMatrix = (matrix, r) => {\n const determinant = det(matrix);\n const x = det([[r[0], matrix[0][1]], [r[1], matrix[1][1]]]) / determinant;\n\n const y = det([[matrix[0][0], r[0]], [matrix[1][0], r[1]]]) / determinant;\n if (isNaN(x) || isNaN(y)) return null;\n return { x: Math.round(x), y: Math.round(y) };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"det = matrix => {\n return matrix[0][0] * matrix[1][1] - matrix[0][1] * matrix[1][0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"getDx = (slope, distance) => {\n return distance / Math.sqrt(1 + slope ** 2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"md`### Drawing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"drawBisections = (ctx, bisections, length) => {\n ctx.save();\n bisections.forEach(({ vertex, slope }) => {\n let dx = getDx(slope, length) / 2;\n let dy = slope * dx;\n drawPoints(ctx, [vertex], 3);\n ctx.beginPath();\n ctx.moveTo(vertex.x + dx, vertex.y + dy);\n ctx.lineTo(vertex.x - dx, vertex.y - dy);\n ctx.stroke();\n });\n ctx.restore();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"drawPoints = function(ctx, points, width = 1, color = \"black\") {\n ctx.beginPath();\n ctx.fillStyle = color;\n points.forEach((pt, i) => {\n ctx.moveTo(pt.x, pt.y);\n ctx.arc(pt.x, pt.y, width, 0, 2 * Math.PI);\n });\n ctx.closePath();\n ctx.fill();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"drawCircle = (ctx, center, radius, color) => {\n ctx.moveTo(center.x + radius, center.y);\n ctx.arc(center.x, center.y, radius, 0, 2 * Math.PI);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"drawTriangle = (ctx, points) => {\n ctx.beginPath();\n points.forEach((pt, i, points) => {\n const x = pt.x,\n y = pt.y;\n const nxPt = points[(i + 1) % points.length];\n const nx = nxPt.x,\n ny = nxPt.y;\n ctx.moveTo(x, y);\n ctx.lineTo(nx, ny);\n });\n ctx.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"drawEdges = (ctx, edges) => {\n ctx.beginPath();\n edges.forEach(e => {\n ctx.moveTo(e[0].x, e[0].y);\n ctx.lineTo(e[1].x, e[1].y);\n });\n ctx.closePath();\n ctx.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@5\", \"d3-delaunay@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"d3_7 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}