3d:["$","title",null,{"children":"SVG path sampler | Andreas Plesch | Observable"}] 43:T729,function SVGPathInterpolator (path, eps, maxIter) { const safeIter = maxIter || 100; const epsilon = eps || 0.00001; const pathString = path || "M0,0L1,1"; const area = svg` ` const svgpath = area.querySelector('path'); svgpath.setAttribute('d', pathString); const totalLength = svgpath.getTotalLength(); const minPoint = svgpath.getPointAtLength(0); const maxPoint = svgpath.getPointAtLength(totalLength); let reverse = maxPoint.x < minPoint.x; const range = reverse ? [maxPoint, minPoint] : [minPoint, maxPoint]; reverse = reverse ? -1 : 1; return function interpolator (x) { const targetX = x === 0 ? 0 : x || minPoint.x; // check for 0 and null/undefined if ( targetX < range[0].x ) return range[0]; // clamp if ( targetX > range[1].x ) return range[1]; const estimatedLength = estimateLength(totalLength / 2, 0, totalLength); return estimatedLength ? svgpath.getPointAtLength(estimatedLength) : false; function estimateLength (l, mn, mx) { let delta = svgpath.getPointAtLength(l).x - targetX; let next_delta = 0; let iter = 0; //console.log(delta, targetX, epsilon); while (Math.abs(delta) > epsilon) { if (iter++ > safeIter) return false; //console.log(iter, Math.abs(delta) > epsilon); if (reverse * delta < 0) { mn = l; l = (l + mx) / 2; } else { mx = l; l = (mn + l) / 2; } next_delta = svgpath.getPointAtLength(l).x - targetX; delta = next_delta; } //console.log(iter); return l; // if (Math.abs(delta) < epsilon) return resultLength // if (reverse * delta < 0) return estimateLength((totalLength + max)/2, resultLength, max) // return estimateLength((min + resultLength)/2, min, resultLength) } } } 44:[] 41:{"id":"c47dbd136d77b682","slug":"svg-path-sampler","title":"SVG path sampler","thumbnail":"0a9dc656f0a5d2def6f940135cd58f438cd135da8f8069eb5e6d043abebe6d33","access_level":"public","create_time":"$D2019-05-01T18:57:41.089Z","update_time":"$D2021-12-12T20:21:50.196Z","view_time":null,"first_public_time":"$D2019-07-13T23:41:33.794Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"3a7167e5e638bcd0","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":"starter_2024","bio":""},"version":512,"publish_version":512,"role":null,"authored":false,"authors":[{"type":"individual","id":"171053d51d09c7fc","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":null,"bio":""}],"members":[{"type":"individual","id":"171053d51d09c7fc","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":null,"role":"editor"}],"comments":[{"id":"c4d74116db4930c6","reply_to_id":null,"content":"Currently broken. Looks like d3-shape needs to be pinned to @1","create_time":"$D2021-12-12T14:03:27.246Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"9dee4410044249a7","reply_to_id":"c4d74116db4930c6","content":"Thanks ! Do you know what changed ?","create_time":"$D2021-12-12T19:07:08.135Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"171053d51d09c7fc","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":null}},{"id":"cc89063a9c495efd","reply_to_id":"c4d74116db4930c6","content":"Nope, sorry, haven't looked into it","create_time":"$D2021-12-12T19:17:02.963Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"75257638c479d873","reply_to_id":"c4d74116db4930c6","content":"The signatures may have changed a bit. I adopted @3 now.","create_time":"$D2021-12-12T20:24:34.250Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"171053d51d09c7fc","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SVG path sampler","cells":[{"id":0,"value":"md`# SVG path sampler`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`#### Given a SVG path element, for example generated by d3.line, provide a interpolator function which returns the y value at a given x.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"area = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"viewof slider = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"md`interpolated Point at x=${slider}: ${targetPoint.x}, ${targetPoint.y}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"data = [[1,1], [4, 1], [5, 3], [6, 3], [7,3], [10,10]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"line = d3.line().curve(d3.curveBasis).defined( d => d[0] !== 6 )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"pathString = line(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"targetPoint = SVGPathInterpolator(pathString, 0.01)(slider)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"d3 = require(\"d3-shape@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W44","stdlib":"1"}} 42:"$41:body" 3c:E{"digest":"NEXT_REDIRECT;replace;/@andreasplesch/svg-path-sampler;307;"}