25:["$","title",null,{"children":"Centerline labeling tmp | mheard03 | Observable"}] 49:T69d,{ const box = fp.box.clone(); box.xmin -= box.width * 0.1; box.ymin -= box.height * 0.1; box.xmax += box.width * 0.1; box.ymax += box.height * 0.1; const { xmin, ymin, xmax, ymax } = box; const viewBox = [xmin, ymin, xmax, ymax].join(" "); const { segment, pointsAboveSplitLine, pointsBeforeStart, pointsAfterEnd, boundedPoints, candidateSegments, closest } = qtr[edgeIndex]; const { splitLine, startLine, endLine, opposingSegments } = segment; const img = svg`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1732,"value":"div.forEach","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1734,"value":"new [].forEach","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1740,"value":"isIterable(div)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1738,"value":"function isIterable(value) {\n return (Symbol.iterator in Object(value));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1704,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"{\n const { id, href } = DOM.uid(\"centerline\"); // necessary for Firefox\n return getSvg(svg`\n \n \n ${place}\n `)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1479,"value":"viewof tolerance = slider({\n min: 0, \n max: 10, \n step: 0.1, \n value: 10,\n title: \"Simplification level\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"md`## Step 1: turn the shape into evenly spaced points\nFirst, we walk the perimeter of the shape to get a set of evenly spaced points that approximate the original shape. Adjust the slider to change how many points we're using (more points = more precision and more computation).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"{\n \n return svgZoom``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1530,"value":"outerRing = turf.rewind(turf.polygon(feature.geometry.coordinates[0]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1565,"value":"skel.Distances.get(skel.Edges[0].Edge.Begin)\n// skel.Edges[0].Edge.Begin","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1575,"value":"_.sortBy(skel.Edges.map(e => e.Polygon), [p => p.length, p => p[0].X])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1548,"value":"skel = getPolygonSkeleton(feature)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1610,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1524,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1603,"value":"// https://stackoverflow.com/questions/9246100/how-can-i-implement-the-distance-from-a-point-to-a-line-segment-in-glsl/65521091#65521091","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1435,"value":"multiPolygonContains = {\n function polygonContains(polygon, point) {\n debugger;\n const outerRing = polygon[0];\n if (!d3.polygonContains(outerRing, point)) return false;\n \n for (let innerRing of polygon.slice(1)) {\n if (d3.polygonContains(innerRing, point)) return false;\n }\n return true;\n }\n \n function multiPolygonContains(coordinates, point) {\n debugger;\n return coordinates.some(c => polygonContains(c, point));\n }\n\n return multiPolygonContains;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1471,"value":"_points = turf.coordAll(feature)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"polygon = feature.geometry.coordinates","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`## Step 2: compute the Voronoi diagram of the points\nNext, we compute the Voronoi diagram from our generated points, and we clip all the edges to the boundary of our polygon.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1855,"value":"paths = {\n const paths = {};\n const delaunayPath = d3.path();\n delaunay.render(delaunayPath);\n paths.delaunay = ``;\n\n paths.edges = edges.map(e => ``);\n paths.rawEdges = unclippedEdges.map(e => ``);\n return paths;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"clipped = true\n/*\n{\n let clip = false;\n yield clip;\n while (true) {\n clip = !clip;\n yield Promises.delay(1000, clip);\n }\n}\n*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1848,"value":"$54","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1840,"value":"unclippedEdges = [...voronoi.edges()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"edges = {\n return [...voronoi.edges()]\n .filter(edge => {\n if (edge) {\n const inside = edge.map(point => multiPolygonContains(polygon, point));\n if (inside[0] === inside[1]) {\n return inside[0];\n }\n if (inside[1]) {\n edge.reverse();\n }\n return true;\n }\n return false;\n })\n .map(([start, end] = []) => {\n const { intersection, distance } = findClosestMultiPolygonIntersection(\n start,\n end,\n polygon\n );\n \n if (intersection) {\n intersection.clipped = true;\n }\n else {\n debugger;\n }\n\n // Each edge has a starting point, a clipped end point, and an original end point\n const edge = [start, intersection || end];\n edge.distance = intersection ? distance : distanceBetween(start, end);\n\n return edge;\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"md`## Step 3: Compute a graph from the clipped Voronoi edges\nUse [node-dijkstra](https://github.com/albertorestifo/node-dijkstra) to construct a graph of all the nodes and edges in the Voronoi diagram.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"graph = { \n const graph = new Graph();\n nodes.forEach(node => graph.addNode(node.id, node.links));\n return graph;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"nodes = {\n const nodes = [];\n\n edges.forEach(edge => {\n edge.forEach((node, i) => {\n if (!i || !node.clipped) {\n const match = nodes.find(d => d === node);\n if (match) {\n return (node.id = match.id);\n }\n }\n node.id = nodes.length.toString();\n node.links = {};\n nodes.push(node);\n });\n edge[0].links[edge[1].id] = edge.distance;\n edge[1].links[edge[0].id] = edge.distance;\n });\n\n return nodes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"perimeterNodes = nodes.filter(d => d.clipped)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"md`## Step 4: walk the graph and find the best path\nFor each pair of perimeter nodes, find the shortest path between them. Keep the longest one we find, or use a strategy that also factors in how straight the line is.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"viewof strategy = radio({\n title: \"Optimization strategy\",\n description: \"edit fitnessFunction() below to create a custom strategy!\",\n options: [\n { label: \"Just take the longest one\", value: \"longest\" },\n { label: \"Care a little about straightness\", value: \"medium\" },\n { label: \"Care a lot about straightness\", value: \"high\" }\n ],\n value: \"medium\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"viewof speed = radio({\n title: \"Traversal speed\",\n description: \"Slow things down to see each step.\",\n options: [\n { label: \"Slow\", value: \"250\" },\n { label: \"Medium\", value: \"100\" },\n { label: \"Fast\", value: \"0\" }\n ],\n value: \"0\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"traversal = {\n let totalBest;\n\n for (let i = 0; i < perimeterNodes.length; i++) {\n const start = perimeterNodes[i];\n const longestShortestPath = perimeterNodes.slice(i + 1).reduce((nodeBest, node) => {\n const path = graph.path(node.id, start.id, { cost: true });\n if (path && (!nodeBest || path.cost > nodeBest.cost)) {\n return path;\n }\n return nodeBest;\n }, null);\n\n if (longestShortestPath && longestShortestPath.path) {\n longestShortestPath.path = longestShortestPath.path.map(id => nodes[+id]);\n longestShortestPath.cost = fitnessFunction(longestShortestPath.path, longestShortestPath.cost);\n if (!totalBest || longestShortestPath.cost > totalBest.cost) {\n totalBest = longestShortestPath;\n }\n \n yield Promises.delay(+speed, {\n bestPath: totalBest.path,\n currentPath: longestShortestPath.path\n });\n }\n }\n if (totalBest) {\n yield {\n bestPath: totalBest.path\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"md`## Step 5: simplify the best line\nWe can use [simplify-js](http://mourner.github.io/simplify-js/) and a basis spline to smooth out our best candidate, and flip the direction of the line if the text would be upside down.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"viewof simplification = slider({\n min: 0.1, \n max: 50, \n value: 8,\n title: \"Simplification tolerance\",\n description: \"How much should we simplify the best line once we find it?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"simplifiedLine = simplify(traversal.bestPath)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"flipText = {\n const svg = DOM.svg(width, height);\n \n const path = d3.select(svg)\n .append(\"path\")\n .attr(\"d\", \"M\" + simplifiedLine.join(\"L\"))\n .node();\n\n const tangent = tangentAt(path, path.getTotalLength() * offset);\n\n return Math.abs(tangent) > Math.PI / 2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"centerline = d3.line().curve(d3.curveBasis)(flipText ? simplifiedLine.slice(0).reverse() : simplifiedLine)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"md`## Step 7: choose the best offset and font size\nAs a final step, we can roughly estimate how large we can make the text without overrunning the shape's borders.\n\nWe'll approximate this by walking the centerline from the middle out, and measuring the shortest perpendicular distance from the center to the boundary at each step. Combined with the aspect ratio of the text, we then know roughly how large we can make the text without it overrunning the containing shape's border.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"viewof measurementStep = slider({\n min: 1, \n max: 25, \n value: 5,\n title: \"Measurement step\",\n description: \"How frequently should we measure the available space?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1171,"value":"viewof offset = slider({\n min: 0.01, \n max: 0.99, \n value: 0.5,\n title: \"Text offset\",\n description: \"How far along the path should we place the label? (0.5 = the center)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"{\n const { id, href } = DOM.uid(\"centerline\"); // necessary for Firefox\n return svg``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"maxFontSize = {\n let ceiling = Infinity,\n maxWidth = 0;\n \n measurements.forEach((pair, i) => {\n pair.forEach(measurement => {\n ceiling = Math.min(measurement.distance, ceiling);\n });\n maxWidth = Math.max(maxWidth, 2 * Math.min(i * measurementStep, ceiling * aspectRatio));\n });\n \n return maxWidth / widthPerPixel;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"$56","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"aspectRatio = bbox.width / bbox.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"widthPerPixel = bbox.width / 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"bbox = {\n const svg = DOM.svg(width, height);\n\n const text = d3.select(svg)\n .append(\"text\")\n .attr(\"class\", \"label\")\n .style(\"font-size\", \"100px\")\n .text(place)\n .node();\n \n // Have to yield the SVG first before element has a measurable width and height\n yield svg;\n yield text.getBBox();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1245,"value":"md`## Epilogue: other potential exercises\n\n1. Rather than manually select the starting offset along the path, we could [automatically find the roomiest offset](https://bl.ocks.org/veltman/6204863ae290904fbae83ca5490d4b1b).\n2. We could do a side-by-side comparison of the results of this approach vs. a flat label using [Polylabel](https://github.com/mapbox/polylabel) for different kinds of shapes and see where it tends to break down.\n3. We could make a label span multiple shapes, like the Hawaiian Islands, by using the [concave hull](https://github.com/mapbox/concaveman) of the group of shapes as the basis for all our operations.\n4. Sinuosity might not be the best choice for a fitness function, we could come up with some other heuristic that factors in some other sense of straightness or smoothness of the centerline.\n5. We could avoid using \\`.getPointAtLength()\\` for measurement and do everything with DOM-less math for better performance (but maybe more verbose code).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1363,"value":"height = Math.min(width / 2, 400)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1483,"value":"rawPlaces = d3.json(\"https://gist.githubusercontent.com/veltman/644f16a90259a20a88b036ef189d71fd/raw/d2f0a027bfc9b63ca223b509bd2cfe0cf5d138c2/places.geojson\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1360,"value":"places = {\n const places = _.cloneDeep(rawPlaces);\n const moroccoCoords = places.features[8].geometry.coordinates;\n moroccoCoords[0].push([[700, 100], [700, 150], [600, 150], [600, 100], [700, 100]].toReversed());\n moroccoCoords.push([[[300, 50], [300, 100], [350, 100], [350, 50], [300, 50]].toReversed()]);\n\n for (let feature of places.features) {\n const projection = d3\n .geoIdentity()\n .fitExtent([[5, 5], [width - 5, height - 5]], feature);\n const s = projection.scale(),\n t = projection.translate();\n \n turf.coordEach(feature, point => {\n const projected = [s * point[0] + t[0], s * point[1] + t[1]];\n point[0] = projected[0];\n point[1] = projected[1];\n });\n }\n\n places.features = places.features.map(p => turf.simplify(p, { tolerance, highQuality: true })); \n return places;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1250,"value":"feature = places.features.find(f => f.properties.name === place);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"// Rescale to fit at the current screen width\nprojection = d3\n .geoIdentity()\n .fitExtent([[5, 5], [width - 5, height - 5]], feature)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"value":"background = d3.geoPath()(feature)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"function fitnessFunction(path, length){\n let fitness = length;\n if (strategy !== \"longest\") {\n const sinuosity = length / distanceBetween(path[0], path[path.length - 1]);\n\n // divide the length by some power of the sinuosity\n // these choices are arbitrary, play with them!\n fitness /= Math.pow(sinuosity, strategy === \"medium\" ? 2 : 4);\n }\n return fitness;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1508,"value":"polygon","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1506,"value":"findClosestMultiPolygonIntersection([0,0], [400, 800], polygon)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1504,"value":"function findClosestMultiPolygonIntersection(start, end, multiPolygon) {\n let best = {};\n for (let ring of multiPolygon.flat()) {\n debugger;\n ring.forEach((point, i) => {\n const intersection = findIntersection(start, end, point, ring[i + 1] ?? ring[0]);\n if (intersection) {\n const distance = distanceBetween(start, intersection);\n if (!best.distance || distance < best.distance) {\n best = { intersection, distance };\n }\n }\n });\n }\n return best;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"function findClosestPolygonIntersection(start, end, polygon) {\n return polygon.reduce((best, point, i) => {\n const intersection = findIntersection(start, end, point, polygon[i + 1] || polygon[0]);\n if (intersection) {\n const distance = distanceBetween(start, intersection);\n if (!best.distance || distance < best.distance) {\n return { intersection, distance };\n }\n }\n return best;\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"function getPointsAlongPolyline(polyline, count) {\n const distances = polyline.map((p, i) =>\n distanceBetween(p, polyline[i + 1] || polyline[0])\n );\n const totalLength = d3.sum(distances);\n const step = totalLength / count;\n let traversed = 0;\n let next = step / 2;\n\n const done = polyline.reduce((arr, point, i) => {\n while (next < traversed + distances[i]) {\n let a = point,\n b = polyline[i + 1] || polyline[0],\n pct = (next - traversed) / distances[i];\n arr.push([a[0] + (b[0] - a[0]) * pct, a[1] + (b[1] - a[1]) * pct]);\n next += step;\n }\n traversed += distances[i];\n return arr;\n }, []);\n return done;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":978,"value":"function findIntersection(a1, a2, b1, b2) {\n // Adapted from https://github.com/Turfjs/turf-line-slice-at-intersection\n const uaT = (b2[0] - b1[0]) * (a1[1] - b1[1]) - (b2[1] - b1[1]) * (a1[0] - b1[0]),\n ubT = (a2[0] - a1[0]) * (a1[1] - b1[1]) - (a2[1] - a1[1]) * (a1[0] - b1[0]),\n uB = (b2[1] - b1[1]) * (a2[0] - a1[0]) - (b2[0] - b1[0]) * (a2[1] - a1[1]);\n\n if (uB !== 0) {\n const ua = uaT / uB,\n ub = ubT / uB;\n if (ua > 0 && ua < 1 && ub > 0 && ub < 1) {\n return [a1[0] + ua * (a2[0] - a1[0]), a1[1] + ua * (a2[1] - a1[1])];\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"function rotatePoint(point, angle, center) {\n\n const x2 = (point[0] - center[0]) * Math.cos(angle) - (point[1] - center[1]) * Math.sin(angle),\n y2 = (point[0] - center[0]) * Math.sin(angle) + (point[1] - center[1]) * Math.cos(angle);\n\n return [\n (point[0] - center[0]) * Math.cos(angle) - (point[1] - center[1]) * Math.sin(angle) + center[0],\n (point[0] - center[0]) * Math.sin(angle) + (point[1] - center[1]) * Math.cos(angle) + center[1]\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"function tangentAt(el, len) {\n const a = el.getPointAtLength(Math.max(len - 0.01, 0)),\n b = el.getPointAtLength(len + 0.01);\n\n return Math.atan2(b.y - a.y, b.x - a.x);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":981,"value":"function distanceBetween(a, b) {\n const dx = a[0] - b[0],\n dy = a[1] - b[1];\n\n return Math.sqrt(dx * dx + dy * dy);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"$57","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1522,"value":"straightSkeleton = (await import('https://cdn.skypack.dev/straight-skeleton@1.1.0?min')).default;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1425,"value":"turf = await require('@turf/turf@6.5/turf.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1695,"value":"{\n function getUnitSquare() {\n return turf.polygon([[[0, 0], [1, 0], [1, 1], [0, 1], [0, 0]]]);\n }\n \n const rotated = turf.transformRotate(getUnitSquare(), 45, { mutate: true });\n return JSON.stringify(rotated.geometry);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"function simplify(points) {\n // Convert from [x, y] to { x, y } and back for simplify-js\n return simplifyJS(points.map(p => ({ x: p[0], y: p[1] })), simplification).map(p => [p.x, p.y]); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"simplifyJS = require(\"simplify-js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"// d3 = require(\"d3@5\");\nd3 = require(\"d3@7.8\", \"d3-delaunay@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1787,"value":"{\n const delaunay = d3.Delaunay.from();\n const voronoi = delaunay.voronoi();\n return voronoi;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"import {slider, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2118,"value":"tuple = (await require('https://bundle.run/immutable-tuple@0.4.10')).tuple","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1152,"value":"styles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1788,"value":"import {Pack} from \"@d3/pack\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2378,"value":"Object.keys(collections)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2375,"value":"collections = (await import('https://cdn.skypack.dev/sweet-collections@1.1.0?min')).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2383,"value":"SortedArray = {\n const handler = {\n get(target, prop, receiver) {\n if (typeof(prop) == \"string\") {\n const number = Number(prop);\n if (!Number.isNaN(number)) return target.get(prop);\n }\n return target[prop];\n }\n };\n \n class SortedArray extends collections.SortedArray {\n static create() {\n const instance = new SortedArray(...arguments)\n const proxy = new Proxy(instance, handler);\n return proxy;\n }\n *[Symbol.iterator]() {\n for (let i = 0; i < this.length; i++) {\n yield this.get(i);\n }\n }\n }\n\n return SortedArray;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1872,"value":"Flatten = {\n const Flatten = await require('@flatten-js/core');\n\n const leftTo = Flatten.Point.prototype.leftTo;\n Flatten.Point.prototype.leftToOrOn = function(line) {\n let vec = new Flatten.Vector(line.pt, this);\n let onLeftSemiPlane = Flatten.Utils.GE(vec.dot(line.norm), 0);\n return onLeftSemiPlane;\n }\n \n return Flatten;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W58","stdlib":"1"}} 24:null