2c:null 2d:["$","title",null,{"children":"New Terrain Anaglyphs | Ingrid Burrington | Observable"}] 32: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; }33: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; }34:T56f,getElevationData = (boundingBox, width, height) => { const canvas = DOM.canvas(width, height); const context = canvas.getContext("2d"); const path = d3.geoPath(projection, context); context.fillStlye = "rgb(255,255,255)"; context.fillRect(0, 0, width, height); // context.save(); // context.fillStlye = "rgb(0,0,0)"; demData.map((d, i) => { let dx = (d.x + tiles.translate[0]) * tiles.scale; let dy = (d.y + tiles.translate[1]) * tiles.scale; const imageData = new ImageData(d.data, tileSize, tileSize); context.putImageData(imageData, dx, dy, 0, 0, tileDim, tileDim); }); // context.fillStyle = "rgb(255,255,255)"; // context.beginPath(), path(diff), context.fill(); shuffle.map((d) => { let mx = (d.x + tiles.translate[0]) * tiles.scale; let my = (d.y + tiles.translate[1]) * tiles.scale; //context.fillStyle = `rgb(${lowest_pixel.r}, ${lowest_pixel.g}, ${lowest_pixel.b})`; //context.fillStyle = "rgb(1, 134,160)"; context.fillStlye = "rgb(0,0,0)"; context.fillRect(mx, my, tileSize, tileSize); }); const rawData = context.getImageData(0, 0, width, height).data; console.log("RAW", rawData); const heightData = convertToHeight(rawData); let extent = d3.extent(heightData); //console.log(extent); const outData = []; while (heightData.length) outData.push(heightData.splice(0, width)); return outData; }35:T514,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 = "white"; entity.fillOpacity = 0.1; 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; }36:T7d9,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} `; }37:[{"id":"7f23caa3dc4c6ffd384f6fce026c10d93f8ee76b481824adf05fc7f539c91d062083529e5ac6dec080f6b83b3663691ad5a4faac3d7f86f02d22fb9e1ec15c0a","href":"https://static.observableusercontent.com/files/7f23caa3dc4c6ffd384f6fce026c10d93f8ee76b481824adf05fc7f539c91d062083529e5ac6dec080f6b83b3663691ad5a4faac3d7f86f02d22fb9e1ec15c0a","name":"palestine.geojson","type":"application/geo+json","lastModified":1734623792454.218,"size":87027},{"id":"831f07e9cb7f18b5a6cd551faaa254ee2d034a64d277f0bfccc1b0bd535ab809d4d00b1342929701618845fca87bf9c740494a80d2c9243999d12e82783aa798","href":"https://static.observableusercontent.com/files/831f07e9cb7f18b5a6cd551faaa254ee2d034a64d277f0bfccc1b0bd535ab809d4d00b1342929701618845fca87bf9c740494a80d2c9243999d12e82783aa798","name":"svalbard.geojson","type":"application/geo+json","lastModified":1735498510472.027,"size":313},{"id":"e30102df900c50fbae2a69c4ce864e8652ade447c8fe2617c649b03699a83cc405b9d4eadb2cbf0b1f5b4092c85d42dc339e838fe28aaefd37c917f8542afbd9","href":"https://static.observableusercontent.com/files/e30102df900c50fbae2a69c4ce864e8652ade447c8fe2617c649b03699a83cc405b9d4eadb2cbf0b1f5b4092c85d42dc339e838fe28aaefd37c917f8542afbd9","name":"silverpeakmtn.geojson","type":"application/geo+json","lastModified":1735503574662.958,"size":327},{"id":"619f51876390b81c40fd9bf3f66528b2e821c4f39be6ba549350f38428213b201e285fc809ca780adca9857acb4d5ec837aa77f0e4f5945fe95a64891e5c6b8f","href":"https://static.observableusercontent.com/files/619f51876390b81c40fd9bf3f66528b2e821c4f39be6ba549350f38428213b201e285fc809ca780adca9857acb4d5ec837aa77f0e4f5945fe95a64891e5c6b8f","name":"palestine_full_no_golan.geojson","type":"application/geo+json","lastModified":1735946518139.828,"size":809054},{"id":"64f99b9df01b998a7635286f8d53090cb7b86fbb44afb023721c665a3e75007711188ff38e69cd7db540f6ca761f8dcc6dd24764bd69822a1b3952f343e24b29","href":"https://static.observableusercontent.com/files/64f99b9df01b998a7635286f8d53090cb7b86fbb44afb023721c665a3e75007711188ff38e69cd7db540f6ca761f8dcc6dd24764bd69822a1b3952f343e24b29","name":"sprucepine03.geojson","type":"application/geo+json","lastModified":1736534892140.999,"size":319},{"id":"fc3ebb0ee63ca1607eb28e94cbdb120aa596b92c83c05dd119a735494d1f09e139c2573daf2f959d23917a4950c82713ac6e805b6fb63e272d3076aadd0e09f5","href":"https://static.observableusercontent.com/files/fc3ebb0ee63ca1607eb28e94cbdb120aa596b92c83c05dd119a735494d1f09e139c2573daf2f959d23917a4950c82713ac6e805b6fb63e272d3076aadd0e09f5","name":"palestine_total.geojson","type":"application/geo+json","lastModified":1735940097834.259,"size":783281},{"id":"4189d2929af189f312038be33ab2588b932e1f043101ba16ee163645bbae00a7fabe1bce13c75eddb75981e433406ef1d449bbc9ea44f15ec3f21da36aeb85e4","href":"https://static.observableusercontent.com/files/4189d2929af189f312038be33ab2588b932e1f043101ba16ee163645bbae00a7fabe1bce13c75eddb75981e433406ef1d449bbc9ea44f15ec3f21da36aeb85e4","name":"hambach.geojson","type":"application/geo+json","lastModified":1735247083897.28,"size":319},{"id":"4cd5ec6470fc1be0df304f07c9cee80ca7976d6517ba162e378727713f617bbf3b0ab558e86314c595e1de74c9d1a1b63b90e4796eb59b0e2c90c1fb60cac70a","href":"https://static.observableusercontent.com/files/4cd5ec6470fc1be0df304f07c9cee80ca7976d6517ba162e378727713f617bbf3b0ab558e86314c595e1de74c9d1a1b63b90e4796eb59b0e2c90c1fb60cac70a","name":"northbend02.geojson","type":"application/geo+json","lastModified":1735002930659.955,"size":324},{"id":"528294c547b31cb0006d562d5bf195c9fc024f57482ca8b7eed34c720489a5f9efe08f205f5c89392cc5452b381498b23e8f9f019eccb448bd8a034951610c9e","href":"https://static.observableusercontent.com/files/528294c547b31cb0006d562d5bf195c9fc024f57482ca8b7eed34c720489a5f9efe08f205f5c89392cc5452b381498b23e8f9f019eccb448bd8a034951610c9e","name":"northbend.geojson","type":"application/geo+json","lastModified":1734990770175.322,"size":324},{"id":"d79213f0c806477d57e3fe9a22d346fca00e5fd9009fc2f805840e1ec987c15c1370f10ff43b454fc195b818f8743e237a1c65a4d9ce1077291ca23ad3aba705","href":"https://static.observableusercontent.com/files/d79213f0c806477d57e3fe9a22d346fca00e5fd9009fc2f805840e1ec987c15c1370f10ff43b454fc195b818f8743e237a1c65a4d9ce1077291ca23ad3aba705","name":"levant.geojson","type":"application/geo+json","lastModified":1734813683721.828,"size":313},{"id":"affd9d7aec983ae0c7d5227ca872a4b9bb276729c05b40809f97bc64e9b2c7bfef84a2a40503f7df417f7eb6f6a0de3d33aeec9ae41436ac1ad546b5e66153a9","href":"https://static.observableusercontent.com/files/affd9d7aec983ae0c7d5227ca872a4b9bb276729c05b40809f97bc64e9b2c7bfef84a2a40503f7df417f7eb6f6a0de3d33aeec9ae41436ac1ad546b5e66153a9","name":"potosi.geojson","type":"application/geo+json","lastModified":1734623792454.218,"size":326},{"id":"baf7306bcea0f3b23948e6b7e979c3a304ba084a7e2b600dfa69b1e61512be3c85ea30b26ce60b5753544c611807208384d76b5647855c5fa5f4ba3c6c928bb4","href":"https://static.observableusercontent.com/files/baf7306bcea0f3b23948e6b7e979c3a304ba084a7e2b600dfa69b1e61512be3c85ea30b26ce60b5753544c611807208384d76b5647855c5fa5f4ba3c6c928bb4","name":"chilean-nitrates.geojson","type":"application/geo+json","lastModified":1734623792454.218,"size":329},{"id":"91e4e9011788fed2e99b2973487bb33f75d607fa661bff73ee80ab0e46e0cbcf1a5bbad5ca1bd9b152892425c7ff07ab88c4b8e67eeb8e976ed6ea48b5a01091","href":"https://static.observableusercontent.com/files/91e4e9011788fed2e99b2973487bb33f75d607fa661bff73ee80ab0e46e0cbcf1a5bbad5ca1bd9b152892425c7ff07ab88c4b8e67eeb8e976ed6ea48b5a01091","name":"humberstone.geojson","type":"application/geo+json","lastModified":1734623792454.218,"size":2760},{"id":"ea403713dadf8762b16bbfca13cecdf7c3b553ad11cf544db4c75eb2096e09274b0f5543649e96180dcbcd481d12bd9cd54ad85ab5ec34ab52941d31da798d22","href":"https://static.observableusercontent.com/files/ea403713dadf8762b16bbfca13cecdf7c3b553ad11cf544db4c75eb2096e09274b0f5543649e96180dcbcd481d12bd9cd54ad85ab5ec34ab52941d31da798d22","name":"israel.geojson","type":"application/geo+json","lastModified":1734623792454.218,"size":1201},{"id":"2eda07e7db1603eabb4fb4e7a701cbd7d3e0403e81845f739dfff921610c6d3124c32320e2ec5b0a2a20113276b9008bc193be0dfd20f2ac8555cbc476c79ae1","href":"https://static.observableusercontent.com/files/2eda07e7db1603eabb4fb4e7a701cbd7d3e0403e81845f739dfff921610c6d3124c32320e2ec5b0a2a20113276b9008bc193be0dfd20f2ac8555cbc476c79ae1","name":"af.geojson","type":"application/geo+json","lastModified":1734623792454.218,"size":2758},{"id":"09fa2c74f92e29ecd8019fc5df10834411a403c6b9875753db42097f462e04e36830fa847d58db543aeb8fb594905b9e5899204c816038b5dc77ac0d7597ea7d","href":"https://static.observableusercontent.com/files/09fa2c74f92e29ecd8019fc5df10834411a403c6b9875753db42097f462e04e36830fa847d58db543aeb8fb594905b9e5899204c816038b5dc77ac0d7597ea7d","name":"bingham.geojson","type":"application/geo+json","lastModified":1734623792454.218,"size":2728},{"id":"632ff55665928486bdab9b4cd1b9157199d2df874a4b2c26c4a309aa360a6750d5e1ef17ed4f59a5d2660d0ea0d662f2643a630b6272d836f641572259ed724c","href":"https://static.observableusercontent.com/files/632ff55665928486bdab9b4cd1b9157199d2df874a4b2c26c4a309aa360a6750d5e1ef17ed4f59a5d2660d0ea0d662f2643a630b6272d836f641572259ed724c","name":"langata02.geojson","type":"application/geo+json","lastModified":1734623792454.218,"size":321},{"id":"8f3bfcab3fff3344c59edcf6f6f9b4331f723e789b139eeab91931f38bd8c3b6382799a698642f8ca2a9db00321da23eb697bf4e2ad4ca768b596e31f6c5a026","href":"https://static.observableusercontent.com/files/8f3bfcab3fff3344c59edcf6f6f9b4331f723e789b139eeab91931f38bd8c3b6382799a698642f8ca2a9db00321da23eb697bf4e2ad4ca768b596e31f6c5a026","name":"xinjiang03.geojson","type":"application/geo+json","lastModified":1734623792454.218,"size":311},{"id":"8d0e17a715121d01f1552a3b0febcfb9edf466ccae9d7999732447f86d79cd0b69f220dc0a1bed99d9f6946447fb7d3f79fdefd96ffbc6befc3f4eb3956701ea","href":"https://static.observableusercontent.com/files/8d0e17a715121d01f1552a3b0febcfb9edf466ccae9d7999732447f86d79cd0b69f220dc0a1bed99d9f6946447fb7d3f79fdefd96ffbc6befc3f4eb3956701ea","name":"pointarena.geojson","type":"application/geo+json","lastModified":1734623792454.218,"size":326},{"id":"06da88665c2494c60be02293fa8f8a6179cf596b78b4a7c4447dd2a5a76622cd1fb785f47dcf022be75b310e5224fa4c3a7f8f7702b496773b55aece68c0f514","href":"https://static.observableusercontent.com/files/06da88665c2494c60be02293fa8f8a6179cf596b78b4a7c4447dd2a5a76622cd1fb785f47dcf022be75b310e5224fa4c3a7f8f7702b496773b55aece68c0f514","name":"gaza.geojson","type":"application/geo+json","lastModified":1734623792454.218,"size":321},{"id":"d4e644f9045fec370a3401b924fc5478e5a15c9f130fb34f446de87e9b94d9154bab7fed8d75d57a537408c1457056d5bb91e6b6d8ff9e1f11b02855a2426726","href":"https://static.observableusercontent.com/files/d4e644f9045fec370a3401b924fc5478e5a15c9f130fb34f446de87e9b94d9154bab7fed8d75d57a537408c1457056d5bb91e6b6d8ff9e1f11b02855a2426726","name":"westbank02.geojson","type":"application/geo+json","lastModified":1734623792454.218,"size":316},{"id":"8fd9eb8e2fc07b8aa28efb37d6dfcc1b60eb53fc5c5b561ac78ad5eff480ede039b41dd3e5caa1802717d6c86ba97c097138b7475a10b4b02e50176d1131026c","href":"https://static.observableusercontent.com/files/8fd9eb8e2fc07b8aa28efb37d6dfcc1b60eb53fc5c5b561ac78ad5eff480ede039b41dd3e5caa1802717d6c86ba97c097138b7475a10b4b02e50176d1131026c","name":"gipson.geojson","type":"application/geo+json","lastModified":1734623792454.218,"size":2659}] 30:{"id":"784298632cbcfe54","slug":null,"title":"New Terrain Anaglyphs","thumbnail":null,"access_level":"public","create_time":"$D2024-12-19T15:56:32.454Z","update_time":"$D2025-05-17T18:11:47.210Z","view_time":null,"first_public_time":"$D2025-04-24T14:52:02.830Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"6ae7f99f369fe7ae","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":"starter_2024"},"version":8620,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"87193242b5b8718c","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":null}],"members":[{"type":"individual","id":"87193242b5b8718c","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":null,"role":"editor"},{"type":"team","id":"6ae7f99f369fe7ae","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"New Terrain Anaglyphs","cells":[{"id":0,"value":"md`# New 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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4266,"value":"//if you want to use a different file use the file upload thing and change this to file.json()\nboundsfile = sprucepine03","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8566,"value":"sprucepine03 = FileAttachment(\"sprucepine03.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7709,"value":"boundingBox = turf.bbox(boundsfile)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4343,"value":"viewof file = Inputs.file({ label: \"Upload geoJSON\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5914,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5906,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5754,"value":"levels = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7733,"value":"projection = {\n function floor(k) {\n return Math.pow(2, Math.floor(Math.log(k) / Math.LN2));\n }\n\n var pi = Math.PI,\n tau = 2 * pi;\n\n var projection = d3\n .geoMercator()\n .scale(1 / tau)\n .translate([0, 0]);\n\n var bounds = [\n [boundingBox[0], boundingBox[3]],\n [boundingBox[2], boundingBox[1]]\n ],\n p0 = projection([bounds[0][0], bounds[1][1]]),\n p1 = projection([bounds[1][0], bounds[0][1]]);\n\n // Convert this to a scale k and translate tx, ty for the projection.\n // For crisp image tiles, clamp to the nearest power of two.\n var k = floor(\n 0.95 / Math.max((p1[0] - p0[0]) / width, (p1[1] - p0[1]) / height)\n ),\n tx = (width - k * (p1[0] + p0[0])) / 2,\n ty = (height - k * (p1[1] + p0[1])) / 2;\n\n projection.scale(k / tau).translate([tx, ty]);\n\n return projection;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8415,"value":"alltiles = turf.dissolve(\n turf.featureCollection(\n tiles\n .map((t) => tilebelt.tileToGeoJSON([t.x, t.y, t.z]))\n .map((m) => {\n return { type: \"Feature\", geometry: m };\n })\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7731,"value":"tiles = d3\n .tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection.translate())()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8223,"value":"xyz_tiles = xyz(\n [\n [boundingBox[0], boundingBox[1]],\n [boundingBox[2], boundingBox[3]]\n ],\n 8\n).map((t) => {\n t.dimensions = tilebelt.tileToGeoJSON([t.x, t.y, t.z]);\n return t;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8249,"value":"tiles.translate","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8254,"value":"(xyz_tiles.scale = 256)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8246,"value":"(xyz_tiles.translate = alt_projection.translate())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8233,"value":"alt_projection = d3\n .geoMercator()\n .center(turf.center(boundsfile).geometry.coordinates)\n //.translate([0, 0])\n //.scale(Math.pow(2, 21) / (2 * Math.PI))\n .fitExtent(\n [\n [0, 0],\n [width, height]\n ],\n turf.rewind(boundsfile, { reverse: true })\n )\n//.fitSize([width, height], turf.rewind(boundsfile, { reverse: true }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8014,"value":"altsize = Math.ceil(Math.sqrt(xyz_tiles.length) * 256)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7745,"value":"demData = Promise.all(\n tiles.map(async (t) => {\n t.data = await getDemData(t);\n console.log(t);\n return t;\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7748,"value":"merged_demData = demData.map((d) => Array.from(d.data)).flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7750,"value":"rgbarr = {\n let arr = [];\n for (var n = 0, l = merged_demData.length; n < l / 4; n++) {\n arr.push({\n r: merged_demData[n * 4],\n g: merged_demData[n * 4 + 1],\n b: merged_demData[n * 4 + 2],\n a: merged_demData[n * 4 + 3],\n h:\n -10000 +\n (merged_demData[n * 4] * 256 * 256 +\n merged_demData[n * 4 + 1] * 256 +\n merged_demData[n * 4 + 2]) *\n 0.1\n });\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5709,"value":"tileSize = 256","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7761,"value":"tileDim = 256","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5719,"value":"gridSize = tileSize + 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"height = 1200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5706,"value":"width = 1200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5733,"value":"heightExtent = rgbextent","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8490,"value":"palestine_full_no_golan = FileAttachment(\"palestine_full_no_golan.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7908,"value":"sealevel = -0.6999999999989086","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7888,"value":"revisedExtent = d3.extent(ele.flat())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7822,"value":"rgbextent = d3.extent(rgbarr.map((r) => r.h))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7753,"value":"lowest_pixel = rgbarr.sort((a, b) => a.h - b.h)[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7779,"value":"shuffle = tiles.sort(() => 0.5 - Math.random()).slice(1, tiles.length * 0.2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7770,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8155,"value":"getDemData = function ({ x, y, z }) {\n const url = `https://api.mapbox.com/v4/mapbox.terrain-rgb/${z}/${x}/${y}.pngraw?access_token=${mapbox}`;\n\n return new Promise((resolve, reject) => {\n const image = new Image();\n image.crossOrigin = \"anonymous\";\n image.onerror = reject;\n image.src = url;\n\n image.onload = () => {\n const canvas = DOM.canvas(tileSize, tileSize);\n const ctx = canvas.getContext(\"2d\");\n\n ctx.drawImage(\n image,\n 0,\n 0,\n image.width,\n image.height,\n 0,\n 0,\n tileDim,\n tileDim\n );\n const rawData = ctx.getImageData(0, 0, image.width, image.height).data;\n resolve(rawData);\n };\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7814,"value":"(tiles[0].x + tiles.translate[0]) * tiles.scale","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7537,"value":"ele = getElevationData(turf.bbox(boundsfile), height, width)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5731,"value":"size = Math.sqrt(rgbarr.length)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8137,"value":"heightExtent[1] - heightExtent[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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], rgbextent[0]);\n\n return d3.range(numOfBands).map((i) => {\n return Math.ceil(minHeight) + i * bandDelta;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5740,"value":"isolines = {\n return heightThresholds.map((lower) => {\n return {\n lines: MarchingSquares.isoBands(ele, lower, heightExtent[1] + 1, {\n noFrame: false,\n linearRing: true\n }),\n threshold: lower\n };\n });\n // .filter((d) => {\n // return d.lines.length > 0;\n // });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8118,"value":"northbend = FileAttachment(\"northbend.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5757,"value":"xScale = d3.scaleLinear().domain([0, size]).range([-10, 10])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5759,"value":"yScale = d3.scaleLinear().domain([0, size]).range([-10, 10])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5765,"value":"zScale = d3.scaleLinear().domain(heightExtent).range([0, terrainExaggeration])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5767,"value":"edges = Object.assign({\n top: ele[0],\n bottom: ele[ele.length - 1],\n left: ele.map((r) => r[0]),\n right: ele.map((r) => r[ele.length - 1])\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5793,"value":"parameters = Object.assign({ ...worldParameters, ...perspectiveParameters })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 = \"white\";\n entity.fillOpacity = 0.3;\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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5810,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5813,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5804,"value":"import {\n renderer,\n processScene\n} with { height } from \"@tonyhschu/anaglyph-pipeline-in-gpujs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5677,"value":"import { rasterize } from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4329,"value":"## Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6205,"value":"import { drawGrid } from \"@mourner/martin-real-time-rtin-terrain-mesh\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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\", \"d3-color\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"turf = require(\"@turf/turf@latest\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2804,"value":"xyz = require(\"https://bundle.run/xyz-affair@0.9.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5368,"value":"tilebelt = import(\"https://cdn.skypack.dev/@mapbox/tilebelt@1.0.2?min\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5661,"value":"mapbox = \"pk.eyJ1IjoibGlmZXdpbm5pbmciLCJhIjoiY2t6bXA2dWZlMmtzbTJ2bjJ0ZTdwYnoyNyJ9.cF_Xt3B9htHIUD0lAKXaRg\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5800,"value":"simplify = require(\"simplify-js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5908,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7535,"value":"import { convertToHeight } from \"@dvreed77/tiled-elevation-data\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 31:"$30:body"