2f:T527,viewof worldParameters = { // rX, rY, rZ const controller = view`

Rotation in X: ${[ "rX", Inputs.range([-Math.PI / 2, Math.PI / 2], { value: (-Math.PI * 3) / 16, step: Math.PI / 32 }) ]}

Rotation in Y: ${[ "rY", Inputs.range([-Math.PI / 2, Math.PI / 2], { value: 0, step: Math.PI / 32 }) ]}

Rotation in Z: ${[ "rZ", Inputs.range([-Math.PI, Math.PI], { value: -Math.PI / 4, step: Math.PI / 128 }) ]}

Shift in X: ${[ "mx", Inputs.range([-100, 100], { value: 0, step: 1 }) ]}

Shift in Y: ${[ "my", Inputs.range([-100, 100], { value: 0, step: 1 }) ]}

Shift in Z: ${[ "mz", Inputs.range([-100, 100], { value: 0, step: 1 }) ]}

Move Camera in X: ${[ "cx", Inputs.range([-100, 100], { value: 0, step: 1 }) ]}

Move Camera in Y: ${[ "cy", Inputs.range([-100, 100], { value: 2, step: 1 }) ]}

Move Camera in Z: ${[ "cz", Inputs.range([-100, 100], { value: 0, step: 1 }) ]}

`; return controller; }30:T557,viewof perspectiveParameters = { // near, zRange, eyeGap, scale const controller = view`

Camera Offset: ${[ "cameraOffset", Inputs.range([10, 1000], { value: 40, step: 10 }) ]}

Near (i.e. distance in front of the carema where we start projecting, aka. the projection plane): ${[ "near", Inputs.range([10, 40], { value: 10, step: 1 }) ]}

zRange (Far - Near) - i.e. how far past the projection plane to include: ${[ "zRange", Inputs.range([1, 40], { value: 15, step: 1 }) ]}

Eye Gap: ${[ "eyeGap", Inputs.range([0, 4], { value: 0.8, step: 0.01 }) ]}

Scale: ${[ "scale", Inputs.range([1, 20001], { value: 3800, step: 10 }) ]}

Horizontal Shift Window: ${[ "horizontalShift", Inputs.range([-10, 10], { value: 0, step: 0.1 }) ]}

Vertical Shift Window: ${[ "verticalShift", Inputs.range([-10, 10], { value: 0, step: 0.1 }) ]}

Shift in X': ${[ "xprime", Inputs.range([-500, 500], { value: 0, step: 1 }) ]}

Shift in Y': ${[ "yprime", Inputs.range([-500, 500], { value: 0, step: 1 }) ]}

`; return controller; }31:T4f3,scene = { let scene = []; let scale = 0.075; //const allRings = [] isolines.forEach((lvl, i) => { //lvl.lines.forEach((isoline) => { //const lvl = isolines[levelIndex] lvl.lines.forEach((isoline) => { let entity = simplify( isoline.map((d) => { return { x: d[0], y: d[1] }; }), lineSimplification ).map((c) => { let copy = [xScale(c.x), yScale(c.y), zScale(lvl.threshold), 1]; return copy; }); entity.closed = true; entity.fillColor = "#fff"; entity.strokeWidth = 0.5; entity.groupname = `group${lvl.threshold}`; scene.push(entity); }); }); // scene.push(label); // const east = [[14, 0, terrainExaggeration / 2, 1]]; // east.text = "E"; // east.textAnchor = "middle"; // const west = [[-14, 0, terrainExaggeration / 2, 1]]; // west.text = "W"; // west.textAnchor = "middle"; // const south = [[0, 14, terrainExaggeration / 2, 1]]; // south.text = "S"; // south.textAnchor = "middle"; // const north = [[0, -14, terrainExaggeration / 2, 1]]; // north.text = "N"; // north.textAnchor = "middle"; // scene.push(north); // scene.push(south); // scene.push(east); // scene.push(west); return scene; }32:T7c3,anaglyphRenderer = (processedScene) => { var t0 = performance.now(); const leftLayer = []; const rightLayer = []; const behindProjectionPlane = (item) => { return item.map((points) => { points.map((d) => d[0][2]).find((d) => d <= 0) === undefined && points.map((d) => d[1][2]).find((d) => d <= 0) === undefined; }); return true; }; let allLeftPath = ""; let allRightPath = ""; const svgStuff = processedscene_layer.map((m) => { leftLayer.push( svg`${m.values .filter(behindProjectionPlane) .map((item) => { const leftPath = "M " + item.map((p) => `${p[0][0]} ${p[0][1]}`).join(" L ") + (item.closed ? " Z" : ""); const rightPath = "M " + item.map((p) => `${p[1][0]} ${p[1][1]}`).join(" L ") + (item.closed ? " Z" : ""); // allLeftPath += ' ' + leftPath // allRightPath += ' ' + rightPath return svg``; })}` ); }); // if (allLeftPath !== '') { // leftLayer.push(svg``) // } // if (allRightPath !== '') { // rightLayer.push(svg``) // } var t1 = performance.now(); console.log(`renderer: ${t1 - t0}`); return svg` ${rightLayer} ${leftLayer} `; }33:[{"id":"79654208a7b5f6efd920d9c79b70c4f77d2f42481dbc2717a300d1a025924e0b205cd04cdf151d050f3c285d4a6c74a20a3b302cb4a2f86a30cddb11a33ffd7c","href":"https://static.observableusercontent.com/files/79654208a7b5f6efd920d9c79b70c4f77d2f42481dbc2717a300d1a025924e0b205cd04cdf151d050f3c285d4a6c74a20a3b302cb4a2f86a30cddb11a33ffd7c","name":"settlement_snapshot.json","type":"application/json","lastModified":1714667798866.505,"size":172134},{"id":"95c4497cf1022bc4028b7e63e6a0e2d99da93752ac44763c499a2e1dff7ec72d96349bb4a24fcf50e40c734cd45511e3f397814d2ad6398e0e56c9ee45ae90a4","href":"https://static.observableusercontent.com/files/95c4497cf1022bc4028b7e63e6a0e2d99da93752ac44763c499a2e1dff7ec72d96349bb4a24fcf50e40c734cd45511e3f397814d2ad6398e0e56c9ee45ae90a4","name":"lbn_admbnda_adm0_cdr_20200810.json","type":"application/json","lastModified":1728150251735.414,"size":603030},{"id":"95c4497cf1022bc4028b7e63e6a0e2d99da93752ac44763c499a2e1dff7ec72d96349bb4a24fcf50e40c734cd45511e3f397814d2ad6398e0e56c9ee45ae90a4","href":"https://static.observableusercontent.com/files/95c4497cf1022bc4028b7e63e6a0e2d99da93752ac44763c499a2e1dff7ec72d96349bb4a24fcf50e40c734cd45511e3f397814d2ad6398e0e56c9ee45ae90a4","name":"lebanon.json","type":"application/json","lastModified":1728150313322.838,"size":603030},{"id":"632ff55665928486bdab9b4cd1b9157199d2df874a4b2c26c4a309aa360a6750d5e1ef17ed4f59a5d2660d0ea0d662f2643a630b6272d836f641572259ed724c","href":"https://static.observableusercontent.com/files/632ff55665928486bdab9b4cd1b9157199d2df874a4b2c26c4a309aa360a6750d5e1ef17ed4f59a5d2660d0ea0d662f2643a630b6272d836f641572259ed724c","name":"langata02.geojson","type":"application/geo+json","lastModified":1726876186840.855,"size":321},{"id":"46b924d3df43ca497ceb0c1f572ee6b65586f0a7e91dd31130d447092a768a9c5655853340ae5548b997779f269869968ef8c092217db58ae708dec3cc3efb78","href":"https://static.observableusercontent.com/files/46b924d3df43ca497ceb0c1f572ee6b65586f0a7e91dd31130d447092a768a9c5655853340ae5548b997779f269869968ef8c092217db58ae708dec3cc3efb78","name":"langata01.geojson","type":"application/geo+json","lastModified":1726876276183.575,"size":324},{"id":"89aaa7df46564cddaec201ca02aa71244b4fc34bac5c20135ea04398c2428dd9482f7add163383c4256cf1ecb7e863b014c2d02213ea54ae4666c661919e8b72","href":"https://static.observableusercontent.com/files/89aaa7df46564cddaec201ca02aa71244b4fc34bac5c20135ea04398c2428dd9482f7add163383c4256cf1ecb7e863b014c2d02213ea54ae4666c661919e8b72","name":"langata_cemetery_outline.geojson","type":"application/geo+json","lastModified":1726876541168.996,"size":968},{"id":"57f6f670df47da9ec32943968ab1085fe68b3724a02e46587a8f006a3104ad6c73df7839ec008bb6638ee43c20b14b0fb52031c87b7821308fd579d07a2f0ae2","href":"https://static.observableusercontent.com/files/57f6f670df47da9ec32943968ab1085fe68b3724a02e46587a8f006a3104ad6c73df7839ec008bb6638ee43c20b14b0fb52031c87b7821308fd579d07a2f0ae2","name":"map (1).geojson","type":"application/geo+json","lastModified":1706299149468.635,"size":2674},{"id":"39e1feda0bc491316e0e8847d65a65ca8b98f8df26337f75d88649d536d99b10e5f48d1f27a6e858f9c3990974e0e2744f7a8f40dc19d5ab2f3a40e35cf3017b","href":"https://static.observableusercontent.com/files/39e1feda0bc491316e0e8847d65a65ca8b98f8df26337f75d88649d536d99b10e5f48d1f27a6e858f9c3990974e0e2744f7a8f40dc19d5ab2f3a40e35cf3017b","name":"map(7).geojson","type":"application/geo+json","lastModified":1706299149468.635,"size":322},{"id":"09fa2c74f92e29ecd8019fc5df10834411a403c6b9875753db42097f462e04e36830fa847d58db543aeb8fb594905b9e5899204c816038b5dc77ac0d7597ea7d","href":"https://static.observableusercontent.com/files/09fa2c74f92e29ecd8019fc5df10834411a403c6b9875753db42097f462e04e36830fa847d58db543aeb8fb594905b9e5899204c816038b5dc77ac0d7597ea7d","name":"bingham.geojson","type":"application/geo+json","lastModified":1706391728579.112,"size":2728},{"id":"2eda07e7db1603eabb4fb4e7a701cbd7d3e0403e81845f739dfff921610c6d3124c32320e2ec5b0a2a20113276b9008bc193be0dfd20f2ac8555cbc476c79ae1","href":"https://static.observableusercontent.com/files/2eda07e7db1603eabb4fb4e7a701cbd7d3e0403e81845f739dfff921610c6d3124c32320e2ec5b0a2a20113276b9008bc193be0dfd20f2ac8555cbc476c79ae1","name":"af.geojson","type":"application/geo+json","lastModified":1706391944790.283,"size":2758},{"id":"ec49a3732c38d727129ade86c90445a36b670771640305e30f1872ca86f16a93f284f707041bb703386b67c6c292571eacc60bc9aa6cedadfc6beab491136f50","href":"https://static.observableusercontent.com/files/ec49a3732c38d727129ade86c90445a36b670771640305e30f1872ca86f16a93f284f707041bb703386b67c6c292571eacc60bc9aa6cedadfc6beab491136f50","name":"california.geojson","type":"application/geo+json","lastModified":1706450879152.54,"size":73848},{"id":"dc6d4d8c8cbd99afeb83481b825e018472e19e8e6638ab0362b2fcd4cce073f0ce8166562baf41c82b7138f9c16733c08c075cc8be69e777d06e4b1ff83c45c4","href":"https://static.observableusercontent.com/files/dc6d4d8c8cbd99afeb83481b825e018472e19e8e6638ab0362b2fcd4cce073f0ce8166562baf41c82b7138f9c16733c08c075cc8be69e777d06e4b1ff83c45c4","name":"map (43).geojson","type":"application/geo+json","lastModified":1706392390939.524,"size":2759},{"id":"fb5c4a658e068b6115750544f1d193504b8adf55ac825f5890305c94b3461ad58f7f6c57826386c6c6b7829f17521fbdd980b792ca3983120298d7a164c905d5","href":"https://static.observableusercontent.com/files/fb5c4a658e068b6115750544f1d193504b8adf55ac825f5890305c94b3461ad58f7f6c57826386c6c6b7829f17521fbdd980b792ca3983120298d7a164c905d5","name":"diamantina.geojson","type":"application/geo+json","lastModified":1706392543618.488,"size":2777},{"id":"93b1cc771d69c1df81e5e5ac6e67957f95a17821211ac10cf3923b227ff3a938c0bac612a3a8f83a6bb9261b5d2d694795c0e78d7d747fcea829808e1b02e9c5","href":"https://static.observableusercontent.com/files/93b1cc771d69c1df81e5e5ac6e67957f95a17821211ac10cf3923b227ff3a938c0bac612a3a8f83a6bb9261b5d2d694795c0e78d7d747fcea829808e1b02e9c5","name":"sfbay.geojson","type":"application/geo+json","lastModified":1706400764993.678,"size":326}] 2d:{"title":"Towards Arbitrary Terrain Anaglyphs","cells":[{"id":0,"value":"md`# Towards Arbitrary Terrain Anaglyphs\n\nI don't love this approach but: given an arbitrary geojson, create an image of RGB terrain tiles stitched together, turn that into a standalone image, and turn that image into an anaglyph. An unholy butchering of [Tony Chu](https://observablehq.com/@tonyhschu/anaglyph-isobands-terrain)'s masterful work.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4266,"value":"//if you want to use a different file use the file upload thing and change this to file.json()\nboundsfile = lebanon","pinned":true,"hidden":false,"mode":"ojs"},{"id":4343,"value":"viewof file = Inputs.file({ label: \"Upload geoJSON\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2831,"value":"//get tiles needed at specific zoom (this kind of affects detail of your resulting image? but mostly it affects how slowly it loads lol)\nxyz_tiles = xyz(bounds, 9)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6054,"value":"california = FileAttachment(\"california.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":5818,"value":"terrainMap = {\n const el = svg``;\n\n let isMouseDown = false;\n\n return Object.assign(el, {\n onmousedown: (event) => {\n isMouseDown = true;\n },\n onmousemove: (event) => {\n if (isMouseDown === false) return;\n\n event.preventDefault();\n\n const newRZ = -Math.PI + (event.layerX / width) * 2 * Math.PI;\n const newRX = -Math.PI / 2 + ((event.layerY / height) * Math.PI) / 2;\n\n const newWorldParams = {\n ...worldParameters,\n rZ: newRZ,\n rX: newRX\n };\n\n const params = {\n ...perspectiveParameters,\n ...newWorldParams\n };\n\n el.querySelectorAll(\"*\").forEach((n) => n.remove());\n el.append(anaglyphRenderer(processScene(scene, params)));\n },\n onmouseup: (event) => {\n isMouseDown = false;\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5914,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":5763,"value":"viewof terrainExaggeration = Inputs.range([0.25, 10], {\n value: 1.75,\n step: 0.25,\n label: \"Terrain Exaggeration\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5806,"value":"viewof lineSimplification = Inputs.range([0.1, 3], {\n value: 0.2,\n step: 0.1,\n label: \"Line Simplification\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5906,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":5754,"value":"levels = 18","pinned":true,"hidden":false,"mode":"ojs"},{"id":5840,"value":"canvasMap = {\n // generic water color: \"rgb(1, 134,160)\"\n let ctx = DOM.context2d(width, height);\n // const path = d3.geoPath(projection, ctx);\n // ctx.fillStyle = \"rgb(1, 134,160)\";\n // ctx.fillRect(0, 0, width, height);\n // ctx.save();\n // ctx.beginPath(), path(boundsfile), ctx.clip();\n\n xyz_tiles.map((t, i) => {\n let tile = new Image();\n tile.src = base64[i];\n ctx.drawImage(\n tile,\n projection(tile_bbox[i].coordinates[0][0])[0],\n projection(tile_bbox[i].coordinates[0][0])[1],\n tileScale,\n tileScale\n );\n });\n ctx.save();\n ctx.strokeStyle = \"rgb(0,0,0)\";\n ctx.beginPath(),\n path(turf.rewind(langata_cemetery_outline, { reverse: true })),\n ctx.stroke();\n\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6127,"value":"langata01 = FileAttachment(\"langata01.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":5946,"value":"diamantina = FileAttachment(\"diamantina.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":6130,"value":"langata_cemetery_outline = FileAttachment(\"langata_cemetery_outline.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":5889,"value":"tileScale = projected[3][0] - projected[0][0] + 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":5706,"value":"width = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":5750,"value":"selected = canvasMap","pinned":true,"hidden":false,"mode":"ojs"},{"id":5709,"value":"tileSize = selected.width","pinned":true,"hidden":false,"mode":"ojs"},{"id":5719,"value":"gridSize = tileSize","pinned":true,"hidden":false,"mode":"ojs"},{"id":5716,"value":"terrain = {\n const ctx = DOM.context2d(tileSize, tileSize, 1);\n ctx.drawImage(selected, 0, 0);\n const data = ctx.getImageData(0, 0, tileSize, tileSize).data;\n\n const terrain = new Float32Array(gridSize * gridSize);\n\n // decode terrain values\n for (let y = 0; y < tileSize; y++) {\n for (let x = 0; x < tileSize; x++) {\n const k = (y * tileSize + x) * 4;\n const r = data[k + 0];\n const g = data[k + 1];\n const b = data[k + 2];\n terrain[y * gridSize + x] =\n (r * 256 * 256 + g * 256.0 + b) / 10.0 - 10000.0;\n }\n }\n // backfill right and bottom borders\n for (let x = 0; x < gridSize - 1; x++) {\n terrain[gridSize * (gridSize - 1) + x] =\n terrain[gridSize * (gridSize - 2) + x];\n }\n for (let y = 0; y < gridSize; y++) {\n terrain[gridSize * y + gridSize - 1] = terrain[gridSize * y + gridSize - 2];\n }\n return terrain;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5725,"value":"terrainMatrix = {\n const size = Math.sqrt(terrain.length);\n\n const m = d3.range(size).map((i) => {\n const start = i * size;\n const end = start + size;\n const slice = Array.from(terrain.slice(start, end));\n\n return slice;\n });\n\n return m;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5731,"value":"size = Math.sqrt(terrain.length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5733,"value":"heightExtent = d3.extent(terrain)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5735,"value":"heightThresholds = {\n const range = heightExtent[1] - heightExtent[0];\n const targetBand = Math.floor(range / levels);\n const numOfBands = Math.ceil(range / targetBand);\n const bandDelta = Math.round(range / numOfBands / targetBand) * targetBand;\n\n const minHeight = Math.max(heightExtent[0], 1);\n\n return d3.range(numOfBands).map((i) => {\n return Math.ceil(minHeight) + i * bandDelta;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5740,"value":"isolines = {\n return heightThresholds\n .map((lower) => {\n return {\n lines: MarchingSquares.isoBands(\n terrainMatrix,\n lower,\n heightExtent[1] + 1,\n { noFrame: false, linearRing: true }\n ),\n threshold: lower\n };\n })\n .filter((d) => {\n return d.lines.length > 0;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5742,"value":"TwoDimensionsChart = {\n const levels = isolines.map((lvl) => {\n const rings = lvl.lines.map((isoline) => {\n const path = d3.line()(isoline);\n\n return svg``;\n });\n\n return svg`${rings}`;\n });\n\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5757,"value":"xScale = d3.scaleLinear().domain([0, size]).range([-10, 10])","pinned":true,"hidden":false,"mode":"ojs"},{"id":5759,"value":"yScale = d3.scaleLinear().domain([0, size]).range([-10, 10])","pinned":true,"hidden":false,"mode":"ojs"},{"id":5765,"value":"zScale = d3.scaleLinear().domain(heightExtent).range([0, terrainExaggeration])","pinned":true,"hidden":false,"mode":"ojs"},{"id":5767,"value":"edges = Object.assign({\n top: terrainMatrix[0],\n bottom: terrainMatrix[terrainMatrix.length - 1],\n left: terrainMatrix.map((r) => r[0]),\n right: terrainMatrix.map((r) => r[terrainMatrix.length - 1])\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5793,"value":"parameters = Object.assign({ ...worldParameters, ...perspectiveParameters })","pinned":true,"hidden":false,"mode":"ojs"},{"id":5782,"value":"projectedIsobands = {\n const shapes = [];\n\n isolines.forEach((lvl, i) => {\n //lvl.lines.forEach((isoline) => {\n //const lvl = isolines[levelIndex]\n lvl.lines.forEach((isoline) => {\n let entity = simplify(\n isoline.map((d) => {\n return { x: d[0], y: d[1] };\n }),\n lineSimplification\n ).map((c) => {\n let copy = [xScale(c.x), yScale(c.y), zScale(lvl.threshold), 1];\n\n return copy;\n });\n\n entity.closed = true;\n entity.fillColor = \"none\";\n entity.strokeWidth = 0.5;\n entity.level = i;\n entity.elevation = lvl.threshold;\n\n shapes.push(entity);\n });\n });\n\n return processScene(shapes, parameters);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5810,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":5822,"value":"processedScene = {\n var t0 = performance.now();\n const result = processScene(scene, parameters);\n var t1 = performance.now();\n\n console.log(`processor: ${t1 - t0}`);\n\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5825,"value":"processedscene_layer = d3\n .nest()\n .key((d) => d.groupname)\n .entries(processedScene)\n .map((m) => {\n m.values.flat();\n return m;\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":5813,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":5804,"value":"import {\n renderer,\n processScene\n} with { height } from \"@tonyhschu/anaglyph-pipeline-in-gpujs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5677,"value":"import { rasterize } from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":4298,"value":"## Settings","pinned":false,"hidden":false,"mode":"md"},{"id":4307,"value":"### SVG height","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":4303,"value":"### Bounding Box\nThere's some weird stuff in here for accommodating the winding problem that comes with files made with [geojson.io](https://geojson.io) so if using another source just keep in mind. Making a slippy map for generating bounding boxes is a todo here.","pinned":false,"hidden":false,"mode":"md"},{"id":4300,"value":"### Zoom level for tile selection","pinned":false,"hidden":false,"mode":"md"},{"id":4352,"value":"Changes from **boundsfile** to **file** if you uploaded a geojson","pinned":false,"hidden":false,"mode":"md"},{"id":3438,"value":"zoomed_bbox = turf.bboxPolygon(\n turf.bbox(\n turf.buffer(turf.bboxPolygon(turf.bbox(boundsfile)), 0, {\n unit: \"miles\"\n })\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3122,"value":"site = zoomed_bbox","pinned":true,"hidden":false,"mode":"ojs"},{"id":2810,"value":"bounds = [\n site.geometry.coordinates[0][0],\n site.geometry.coordinates[0][2]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2897,"value":"rewind = turf.rewind(site, { reverse: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":3016,"value":"ctr = turf.center(site)","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"projection = d3\n .geoMercator()\n .center(ctr.geometry.coordinates)\n .translate([0, 0])\n //.scale(Math.pow(2, 21) / (2 * Math.PI))\n .fitSize([width, height], rewind)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4310,"value":"## Getting and processing tiles","pinned":false,"hidden":false,"mode":"md"},{"id":5463,"value":"projected = tile_bbox[0].coordinates[0].map((t) => projection(t))","pinned":true,"hidden":false,"mode":"ojs"},{"id":5337,"value":"xyz_tiles","pinned":true,"hidden":false,"mode":"ojs"},{"id":5374,"value":"tile_bbox = xyz_tiles.map((t) => tilebelt.tileToGeoJSON([t.x, t.y, t.z]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":5524,"value":"base64 = Promise.all(\n xyz_tiles.map(async (t) => {\n let image = await canvas(t);\n return await image.toDataURL();\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5506,"value":"canvas = async (t) => {\n let img = new Image();\n img.crossOrigin = \"anonymous\";\n img.src = url(t);\n await new Promise((resolve) => img.addEventListener(\"load\", resolve));\n let ctx = DOM.canvas(img.width, img.height).getContext(\"2d\");\n ctx.drawImage(img, 0, 0);\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5930,"value":"canvas(xyz_tiles[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":5302,"value":"url = (t) =>\n `https://api.mapbox.com/v4/mapbox.terrain-rgb/${t.z}/${t.x}/${t.y}.png?access_token=${mapbox}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":6044,"value":"sfbay = FileAttachment(\"sfbay.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":4329,"value":"## Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"Protobuf = require(\"pbf@3/dist/pbf.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"d3 = require(\"d3-geo@1\", \"d3-selection@1\", \"d3-fetch@1\", \"d3-tile@0.0\", \"d3-scale@2.1.2\", \"d3-collection@latest\", \"d3-array@3\", \"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":612,"value":"turf = require(\"@turf/turf@latest\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"vt = require('https://bundle.run/@mapbox/vector-tile@1.3.1')","pinned":true,"hidden":false,"mode":"ojs"},{"id":2095,"value":"import { Polygon, PI } from \"@makio135/utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2804,"value":"xyz = require(\"https://bundle.run/xyz-affair@0.9.1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":5060,"value":"map7 = FileAttachment(\"map(7).geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":5066,"value":"map1 = FileAttachment(\"map (1).geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":5368,"value":"tilebelt = import(\"https://cdn.skypack.dev/@mapbox/tilebelt@1.0.2?min\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":5661,"value":"mapbox = \"pk.eyJ1IjoibGlmZXdpbm5pbmciLCJhIjoiY2t6bXA2dWZlMmtzbTJ2bjJ0ZTdwYnoyNyJ9.cF_Xt3B9htHIUD0lAKXaRg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5738,"value":"MarchingSquares = import(\n \"https://unpkg.com/marchingsquares@1.3.3/dist/marchingsquares-esm.js?module\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5800,"value":"simplify = require(\"simplify-js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":5908,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5936,"value":"bingham = FileAttachment(\"bingham.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":5941,"value":"af = FileAttachment(\"af.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":6123,"value":"langata02 = FileAttachment(\"langata02.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":6140,"value":"lebanon = FileAttachment(\"lebanon.json\").json()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}