2e:null 2f:["$","title",null,{"children":"A Viennese Doodle | Charith Wijewardena | Observable"}] 34:T1026,{ const svg = d3.select(viewof svg); const lines = svg.selectAll("path").data(paths, (d) => d.index); const circles = svg.selectAll(".circle-center").data(points, (d) => d.index); const outlines = svg .selectAll(".circle-outline") .data(points, (d) => d.index); const lineOpacity = d3 .scaleLinear() .domain([1, paths.length]) .range([1, 0.75]); const circleRadius = d3 .scaleLinear() .domain([pointRadiusRange.min, pointRadiusRange.max]) .range([3, 8]); const outlineOpacity = 0.2; const lineWidth = { normal: 1.2, highlighted: 2.4 }; let enteredLines = []; let exitedLines = []; circles.enter().each(function (d) { enteredLines.push(d.lineNumber); }); circles.exit().each(function (d) { exitedLines.push(d.lineNumber); }); enteredLines = [...new Set(enteredLines)]; exitedLines = [...new Set(exitedLines)]; lines.join( (enter) => enter .append("path") .attr("d", (d) => d.path) .attr("fill", "none") .attr("stroke-width", 0) .transition() .delay(750) .duration((d) => 1500 + d.index * 40) .attr("stroke", "grey") .attr("stroke-width", lineWidth.normal), (update) => update .transition() .duration(1000) .attr("stroke", (d, i) => exitedLines.indexOf(d.index) === -1 ? "grey" : "#E31C7C" ) .attr("stroke-width", (d, i) => exitedLines.indexOf(d.index) === -1 ? lineWidth.normal : lineWidth.highlighted ) .transition() .duration(2000) .attrTween("d", function (d) { return pathTween(this, d.path); }) .attr("stroke", (d, i) => enteredLines.indexOf(d.index) === -1 ? "grey" : "#1C9AE3" ) .attr("stroke-width", (d, i) => enteredLines.indexOf(d.index) === -1 ? lineWidth.normal : lineWidth.highlighted ) .transition() .duration(1000) .attr("stroke", "grey") .attr("stroke-width", lineWidth.normal), (exit) => exit.remove() ); circles.join( (enter) => enter .append("circle") .attr("class", "circle-center") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", 0) .attr("fill", "#1C9AE3") .attr("opacity", 0) .transition() .delay(1000) .duration(1500) .attr("r", (d) => circleRadius(d.mag)) .attr("opacity", 1) .attr("stroke", "none") .transition() .attr("fill", "grey"), (update) => update .transition() .delay(1000) .duration(2000) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => circleRadius(d.mag)), (exit) => exit .transition() .duration(1000) .attr("fill", "#E31C7C") .attr("r", (d) => circleRadius(d.mag) * 1.3) .transition() .duration(1500) .attr("opacity", 0) .attr("r", 0) .remove() ); outlines.join( (enter) => enter .append("circle") .attr("class", "circle-outline") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", 0) .attr("fill", "#1C9AE3") .attr("opacity", 0) .transition() .delay(1000) .duration(1500) .attr("r", (d) => d.mag * 1.3) .attr("opacity", outlineOpacity) .attr("stroke", "none") .transition() .duration(1500) .attr("fill", "grey") .attr("r", (d) => d.mag), (update) => update .transition() .delay(1000) .duration(2000) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => d.mag), (exit) => exit .transition() .duration(1000) .attr("fill", "#E31C7C") .attr("r", (d) => d.mag * 1.3) .transition() .duration(1500) .attr("opacity", 0) .attr("r", 0) .remove() ); return svg.node(); }35:T930,path = (l) => { let coords = []; const lineHeight = l * lineSpacing; const pointsUnderLine = points.filter((d) => d.lineNumber <= l); let id = 0; for (let x = 0; x < width; x += 0.5) { const lineIsInsideACircle = pointsUnderLine .map((d) => isInsideCircle(x, lineHeight, l, d)) .some(Boolean); if (!lineIsInsideACircle) { coords.push({ x: x, y: lineHeight, id: id }); ++id; } const pointsInRange = pointsUnderLine.filter( (d) => Math.abs(x - d.x) <= pointRadius(d, l) ); let intersectingPoints = 0; for (let p = 0; p < pointsInRange.length; ++p) { const curPoint = pointsInRange[p]; const yIntersections = intersectY(curPoint, x, l) .filter(Boolean) .filter((y) => y >= lineHeight) .filter((y) => { const yIsInsideAnotherCircle = pointsInRange .filter((d) => d !== curPoint) .map((d) => isInsideCircle(x, y, l, d)) .some(Boolean); return !yIsInsideAnotherCircle; }); if (yIntersections.length > 0) { for (let i = 0; i < yIntersections.length; ++i) { coords.push({ x: x, y: yIntersections[i], id: id }); ++id; ++intersectingPoints; } } } } let pathArray = Array(coords.length).fill(null); const firstElement = coords .filter((d) => d.x === 0) .sort((a, b) => b.y - a.y) .splice(0, 1)[0]; const indexOfFirstElement = coords.indexOf(firstElement); coords.splice(indexOfFirstElement, 1); pathArray[0] = firstElement; let i = 0; while (pathArray[i] !== null) { const curX = pathArray[i].x; const curY = pathArray[i].y; let nextPointId = coords .filter((d) => Math.abs(curX - d.x) < 5) .map((d) => ({ id: d.id, dist: distanceBetweenTwoPoints(curX, curY, d.x, d.y) })) .sort((a, b) => a.dist - b.dist) .splice(0, 1); if (nextPointId.length > 0) { nextPointId = nextPointId[0].id; } else { break; } const indexOfPointToRemove = coords.findIndex((d) => d.id === nextPointId); pathArray[i + 1] = coords[indexOfPointToRemove]; coords.splice(indexOfPointToRemove, 1); if (pathArray[i + 1].x > width - 4) break; ++i; } pathArray = pathArray.filter(Boolean); return lineGenerator(pathArray); }36:T475,points = { let iter = 0; while (true) { let points = JSON.parse(JSON.stringify(data)); points = points.map((d) => ({ ...d, mag: d3.randomInt(pointRadiusRange.min, pointRadiusRange.max)(), visible: d3.randomInt(0, 100)() < inputs.numPoints ? true : false })); for (let p = 0; p < points.length; p++) { if (!points[p].visible) continue; for (let q = 0; q < p; q++) { if (!points[q].visible) continue; const dist = { x: Math.abs(points[p].x - points[q].x), y: Math.abs( (points[p].lineNumber - points[q].lineNumber) * lineSpacing ) }; const range = points[q].mag + dist.y; const isInRange = range > distanceBetweenTwoPoints( points[p].x, points[p].y, points[q].x, points[q].y ); if (isInRange) { const y = Math.sqrt(range ** 2 - dist.x ** 2) + points[q].y; points[p].y = y; } } } if (iter > 0) await Promises.delay(5000); iter++; yield points.filter((d) => d.visible); } }37:[] 32:{"id":"eeb4ee6f248723ec","slug":"a-viennese-doodle","title":"A Viennese Doodle","thumbnail":"952b3dbb2700d9f2f6d8dd910def4a750123c51018b40786b249bd08261433e6","access_level":"public","create_time":"$D2025-11-10T22:22:58.653Z","update_time":"$D2025-12-06T06:10:37.740Z","view_time":null,"first_public_time":"$D2025-11-27T03:52:52.795Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"046cde780f244322","login":"chaz","name":"Charith Wijewardena","avatar_url":"https://avatars-next.observableusercontent.com/59be3652951cdac59de6ac2160245d82c1c12a02e4d000d6e87abaaa82c8bf7a","tier":"starter_2024"},"version":2816,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"653cb85288b2ee67","login":"chaz","name":"Charith Wijewardena","avatar_url":"https://avatars-next.observableusercontent.com/59be3652951cdac59de6ac2160245d82c1c12a02e4d000d6e87abaaa82c8bf7a","tier":null}],"members":[{"type":"team","id":"046cde780f244322","login":"chaz","name":"Charith Wijewardena","avatar_url":"https://avatars-next.observableusercontent.com/59be3652951cdac59de6ac2160245d82c1c12a02e4d000d6e87abaaa82c8bf7a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"653cb85288b2ee67","login":"chaz","name":"Charith Wijewardena","avatar_url":"https://avatars-next.observableusercontent.com/59be3652951cdac59de6ac2160245d82c1c12a02e4d000d6e87abaaa82c8bf7a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"A Viennese Doodle","cells":[{"id":0,"value":"# A Viennese Doodle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2783,"value":"htl.html`

Inspired by the dear friend whose journal I stole this idea from 🫶🏽

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2797,"value":"While creating this doodle and wondering what I was doing with my life, I had a serendipitous encounter with a stranger who happened to be an artist. The conversation soon took a deep and profound turn as she reflected on what had inspired her to create, and generously donate, most (if not all?) of her artwork for free over many decades. \n\nAs she mused over this question, she realised that it was love. She said that this spiritual aspect underlied all her work. It was a powerful and touching moment. \n\nLove was her creative force.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2441,"value":"viewof inputs = Inputs.form({\n numPoints: Inputs.range([1, 90], {\n step: 1,\n label: \"Approximate number of points:\",\n value: 30\n }),\n numLines: Inputs.range([20, 40], {\n step: 1,\n label: \"Number of lines:\",\n value: 30\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2254,"value":"viewof svg = {\n return d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height).node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2340,"value":"paths = d3\n .range(inputs.numLines)\n .map((d) => d + 1)\n .map((d) => ({ index: d, path: path(d) }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1867,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1863,"value":"data = {\n return Array.from({ length: 100 }, (_, i) => ({\n lineNumber: d3.randomInt(inputs.numLines)() + 1,\n x: d3.randomInt(numNodes)() * pointSpacing,\n mag: d3.randomInt(pointRadiusRange.min, pointRadiusRange.max)(),\n index: i,\n visible: true\n }))\n .map((d) => ({ ...d, y: d.lineNumber * lineSpacing }))\n .sort((a, b) =>\n a.lineNumber === b.lineNumber ? a.x - b.x : a.lineNumber - b.lineNumber\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2502,"value":"pointRadiusRange = ({ min: 15, max: 30 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"height = inputs.numLines * lineSpacing + 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2327,"value":"intersectY = (point, x, l) => {\n const dr = pointRadius(point, l);\n const dx = Math.abs(point.x - x);\n const dy = Math.sqrt(dr ** 2 - dx ** 2);\n return [point.y - dy, point.y + dy];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"isInsideCircle = (x, y, l, point) => {\n const px = Math.abs(point.x - x);\n const py = Math.abs(point.y - y);\n const r = Math.sqrt(px ** 2 + py ** 2);\n return r < pointRadius(point, l) && l >= point.lineNumber;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"lineGenerator = d3\n .line()\n .x((d) => d.x)\n .y((d) => d.y)\n .curve(d3.curveLinear)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1265,"value":"pointRadius = (point, l) => point.mag + (l - point.lineNumber) * lineSpacing","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"distanceBetweenTwoPoints = (x1, y1, x2, y2) =>\n Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"numNodes = Math.ceil(width / pointSpacing) - 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2585,"value":"pointSpacing = 8","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2572,"value":"lineSpacing = 12","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2259,"value":"// Adapted from \"@d3/path-tween\"\nfunction pathTween(pathElement, d1) {\n const precision = Math.floor(width / 4);\n const path0 = pathElement;\n const path1 = path0.cloneNode();\n path1.setAttribute(\"d\", d1);\n\n const n0 = path0.getTotalLength();\n const n1 = path1.getTotalLength();\n\n // Sample distances along the paths\n const distances = [];\n for (let i = 0; i <= precision; i++) {\n distances.push(i / precision);\n }\n\n // Precompute point interpolators\n const interpolators = distances.map((t) => {\n const p0 = path0.getPointAtLength(t * n0);\n const p1 = path1.getPointAtLength(t * n1);\n return d3.interpolate([p0.x, p0.y], [p1.x, p1.y]);\n });\n\n // Return tween function\n return function (t) {\n const pts = interpolators.map((f) => f(t));\n return \"M\" + pts.map((p) => p[0] + \",\" + p[1]).join(\"L\");\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"