21:null 22:["$","title",null,{"children":"Globle Tile ViewPort Output: CameraPosi, LatLng | Antoine Faché | Observable"}] 27:Tc6d,getVisibleTiles = function(projection, zoom) { function getVisibleChildren(x, y, z) { console.log(x, y, z); let visible = false; // Define a projection stream based on the input projection. This stream first does all of // the operations (rotating, clipping, and resampling) that the input projection would do. // Then, any geometries that survive that process (i.e. are visible in the output projection) // get passed on to our custom stream, which just sets `visible = true` if it sees a point. // We'll use this stream to determine if a tile is visible when projected through `projection`. let stream = projection.stream({ point: () => { visible = true; }, lineStart: () => {}, lineEnd: () => {}, polygonStart: () => {}, polygonEnd: () => {} }); // calculate screen-space coordinates of tile (x, y, z) in the `mercator` projection below const extent = mercator.clipExtent(); // we assume that extent is a square, and thus all tiles are also squares const size = (extent[1][0] - extent[0][0]) / (2 ** z); const epsilon = 0.001; const x0 = x * size + epsilon, y0 = y * size + epsilon, x1 = (x + 1) * size - epsilon, y1 = (y + 1) * size - epsilon; const step = Math.min(size, 1); const tile = { type: "Polygon", coordinates: [ [] // Interpolate along each of the four edges of the Mercator polygon. This is a rather // crude way to do interpolation (with a constant step size) but it's easier than the // adaptive resampling that d3 does natively, which is not available to us here since // we're not using a projection. .concat(d3.range(x0, x1 + step / 2, +step).map(x => [x, y0])) .concat(d3.range(y0, y1 + step / 2, +step).map(y => [x1, y])) .concat(d3.range(x1, x0 - step / 2, -step).map(x => [x, y1])) .concat(d3.range(y1, y0 - step / 2, -step).map(y => [x0, y])) // convert this mercator polygon to a spherical polygon on the Earth .map(point => mercator.invert(point)) ], }; // Project the spherical polygon representing the tile by feeding it through the stream. d3.geoStream(tile, stream); // If any point in the tile was visible in the output projection, then our stream will have // received that point via its `point` method and set `visible = true`. if (visible) { if (z < zoom) { // if we're not yet at the desired zoom level, recurse on each of the four sub-tiles let visibleChildren = [] .concat(getVisibleChildren(2 * x, 2 * y, z + 1)) // upper left .concat(getVisibleChildren(2 * x + 1, 2 * y, z + 1)) // upper right .concat(getVisibleChildren(2 * x, 2 * y + 1, z + 1)) // lower left .concat(getVisibleChildren(2 * x + 1, 2 * y + 1, z + 1)) // lower right return visibleChildren; } else { return [tile]; // this tile is visible and is of the desired zoom level } } else { return []; // this tile is not visible } } return getVisibleChildren(0, 0, 0); }28:[] 25:{"id":"6464c5444b3f78f8","slug":"globle-tile-viewport-output-cameraposi-latlng/2","title":"Globle Tile ViewPort Output: CameraPosi, LatLng","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2021-04-26T15:07:21.682Z","update_time":"$D2021-04-26T15:07:21.682Z","view_time":null,"first_public_time":"$D2021-04-26T15:07:32.265Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"ab5c695e0d9f5ed0","login":"anthonyzornig","name":"Antoine Faché","avatar_url":"https://avatars-next.observableusercontent.com/73fe10f97d0449896f1255d6ce2abd09ac0d89a7c87afb645a54faeb67cc288a","tier":"starter_2024"},"version":2724,"publish_version":2724,"role":null,"authored":false,"authors":[{"type":"individual","id":"a6dae7277d3d666a","login":"anthonyzornig","name":"Antoine Faché","avatar_url":"https://avatars-next.observableusercontent.com/73fe10f97d0449896f1255d6ce2abd09ac0d89a7c87afb645a54faeb67cc288a","tier":null}],"members":[{"type":"individual","id":"a6dae7277d3d666a","login":"anthonyzornig","name":"Antoine Faché","avatar_url":"https://avatars-next.observableusercontent.com/73fe10f97d0449896f1255d6ce2abd09ac0d89a7c87afb645a54faeb67cc288a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Globle Tile ViewPort Output: CameraPosi, LatLng","cells":[{"id":0,"value":"md`# Globle Tile ViewPort Output: CameraPosi, LatLng `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1889,"value":"projection = d3[projectionName]().precision(20)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1721,"value":"viewof projectionName = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2354,"value":"/*viewof precision = slider({\n min: 0.01, \n max: 20.1,\n value: 10,\n})*/\n\n\nviewof precision = {\n \n let form;\n\n if (this) {\n form = this;\n } else {\n form = html`\n \n `;\n\n form.scale.addEventListener('input', () => {\n mutable globeMuta = mutable globeMuta.precision(form.scale.valueAsNumber);\n });\n }\n\n form.value = form.scale.valueAsNumber;\n\n return form;\n}\n\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1924,"value":"point = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1920,"value":"coordPoint = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1901,"value":"divMercator = {\n const divMercator = DOM.element('div');\n// circle = enclose(points);\n \n divOrthoGlobe \n \n divMercator.appendChild(renderMercator.canvas);\n \n renderMercator.canvas.style.display = 'inline-block';\n renderMercator.canvas.style.width = '45%';\n renderMercator.canvas.style.margin = '5px';\n \n return divMercator;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2406,"value":"camPosiOrthGlobe = {\n let moving = BehaveOrthoGlobe.update(now * 0.001);\n renderCamOrthoGlobe(globeMuta.cameraPos);\n \n return BehaveOrthoGlobe.cameraPos;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2417,"value":"coordStringOrthoGlobe = {\n let lonDeg = camPosiOrthGlobe[0] * degrees;\n // Start with spaces on the left, to ensure fixed-width printing\n let lon = (Math.abs(lonDeg) < 10) ? \" \" : (Math.abs(lonDeg) < 100) ? \" \" : \"\";\n lon += Math.abs(lonDeg).toFixed(4) + \"°\";\n lon += (camPosiOrthGlobe[0] < 0) ? \"W\" : \"E\";\n \n let latDeg = camPosiOrthGlobe[1] * degrees;\n // Same as for longitude\n let lat = (Math.abs(latDeg) < 10) ? \" \" : \"\";\n lat += Math.abs(latDeg).toFixed(4) + \"°\";\n lat += (camPosiOrthGlobe[1] < 0) ? \"S\" : \"N\";\n \n let alt = camPosiOrthGlobe[2].toFixed(0) + \"km\"\n \n let string = md`${\"Ortho's Lat & Lgn - Cntr Viewport: \" + lon + \" \" + lat + \" \" + alt}`;\n string.style.fontFamily = \"monospace\";\n string.style.fontWeight = \"bold\";\n \n return string;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1221,"value":"viewof scale = {\n \n \n \n let form;\n\n if (this) {\n form = this;\n } else {\n form = html`\n \n `;\n\n form.scale.addEventListener('input', () => {\n mutable globeMuta = mutable globeMuta.scale(300 * form.scale.valueAsNumber);\n });\n }\n\n form.value = form.scale.valueAsNumber;\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1329,"value":"viewof zoom = {\n const scaleToZoom = scale => Math.round(2 * Math.log2(scale + 1));\n\n let form;\n\n if (this) {\n form = this;\n\n if (form.auto.checked) {\n form.zoom.value = scaleToZoom(scale);\n }\n\n form.value = form.zoom.valueAsNumber;\n } else {\n form = html`\n \n `;\n\n form.zoom.oninput = () => {\n form.value = form.zoom.valueAsNumber;\n };\n\n form.value = form.zoom.valueAsNumber;\n }\n\n form.auto.oninput = () => {\n form.zoom.disabled = form.auto.checked;\n form.zoom.value = scaleToZoom(scale);\n form.value = form.zoom.valueAsNumber;\n };\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2105,"value":"divOrthoGlobe = html`

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1938,"value":"camPosiLatLgnGlobe = {\n let moving = BehaveLatLgnGlobe.update(now * 0.001);\n renderCamLatLgnGlobe(BehaveLatLgnGlobe.cameraPos);\n \n return BehaveLatLgnGlobe.cameraPos;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1935,"value":"coordStringLatLgnGlobe = {\n let lonDeg = camPosiLatLgnGlobe[0] * degrees;\n // Start with spaces on the left, to ensure fixed-width printing\n let lon = (Math.abs(lonDeg) < 10) ? \" \" : (Math.abs(lonDeg) < 100) ? \" \" : \"\";\n lon += Math.abs(lonDeg).toFixed(4) + \"°\";\n lon += (camPosiLatLgnGlobe[0] < 0) ? \"W\" : \"E\";\n \n let latDeg = camPosiLatLgnGlobe[1] * degrees;\n // Same as for longitude\n let lat = (Math.abs(latDeg) < 10) ? \" \" : \"\";\n lat += Math.abs(latDeg).toFixed(4) + \"°\";\n lat += (camPosiLatLgnGlobe[1] < 0) ? \"S\" : \"N\";\n \n let alt = camPosiLatLgnGlobe[2].toFixed(0) + \"km\"\n \n let string = md`${\"Lat Lgn of Center ViewPort: \" + lon + \" \" + lat + \" \" + alt}`;\n string.style.fontFamily = \"monospace\";\n string.style.fontWeight = \"bold\";\n \n return string;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2032,"value":"divLatLgn = html`

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"grabOrthoGlobe = {\n let v0, q0, r0;\n \n function dragstarted() {\n v0 = versor.cartesian(mutable globeMuta.invert(d3.mouse(this)));\n q0 = versor(r0 = mutable globeMuta.rotate());\n }\n \n function dragged() {\n const v1 = versor.cartesian(mutable globeMuta.rotate(r0).invert(d3.mouse(this)));\n const q1 = versor.multiply(q0, versor.delta(v0, v1));\n mutable globeMuta = mutable globeMuta.rotate(versor.rotation(q1));\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1280,"value":"$27","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1966,"value":"function renderCamLatLgnGlobe(renderSettings) {\n contextLatLgnGlobe.clearRect(0, 0, width, numPixelsY);\n const projection = setProjectionLatLgnGlobe(renderSettings);\n const path = d3.geoPath(projection, contextLatLgnGlobe);\n\n BehaveLatLgnGlobe.camMoving() ? renderLowResLatLngGlobe(path) : renderHighResLatLgnClobe(path);\n //renderLowRes(path);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2549,"value":"function renderCamOrthoGlobe(camPos) {\n \n contextOrthoGlobe.clearRect(0, 0, width, numPixelsY);\n const projection = setProjectionOrthoGlobe(camPos);\n const path = d3.geoPath(projection, globeMuta);\n\n// BehaveOrthoGlobe.camMoving() ? renderLowResOrthoGlobe(path) : renderHighResOrthoGlobe(path);\n //renderLowRes(path);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2028,"value":"contextLatLgnGlobe = {\n const contextLatLgnGlobe = DOM.context2d(width, numPixelsY);\n // Add the canvas to our globe div, after removing any existing child nodes\n divLatLgn.innerHTML = \"I Am The LatLng Globe\";\n divLatLgn.appendChild(contextLatLgnGlobe.canvas);\n \n return contextLatLgnGlobe;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2191,"value":"contextOrthoGlobe = { \n const contextOrthoGlobe = DOM.context2d(width, numPixelsY);\n// const contextOrthoGlobe = DOM.element('div');\n // Add the canvas to our globe div, after removing any existing child nodes\n divOrthoGlobe.innerHTML = \"I Am The Orthographic GLOBE\";\n divOrthoGlobe.appendChild(renderOrthoGlobe.canvas);\n \n return contextOrthoGlobe;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2277,"value":"function setProjectionLatLgnGlobe(camPos) {\n let visibleYextent = 2 * camPos[2] * BehaveLatLgnGlobe.view.maxRay[1];\n let scale = BehaveLatLgnGlobe.radius() * numPixelsY / visibleYextent;\n let snyderP = 1 + camPos[2] / BehaveLatLgnGlobe.radius();\n let projection = d3.geoSatellite()\n .translate([width / 2, numPixelsY / 2])\n .scale(scale)\n .rotate([-camPos[0] * degrees, -camPos[1] * degrees, 0])\n .distance(snyderP)\n .clipAngle(Math.acos(1 / snyderP) * degrees)\n .precision(precision);\n\n return projection;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2369,"value":"function setProjectionOrthoGlobe(camPos) {\n let visibleYextent = 2 * camPos[2] * BehaveOrthoGlobe.view.maxRay[1];\n let scale = BehaveOrthoGlobe.radius() * numPixelsY / visibleYextent;\n let snyderP = 1 + camPos[2] / BehaveOrthoGlobe.radius();\n let projection = d3.geoSatellite()\n .translate([width / 2, numPixelsY / 2])\n .scale(scale)\n .rotate([-camPos[0] * degrees, -camPos[1] * degrees, 0])\n .distance(snyderP)\n .clipAngle(Math.acos(1 / snyderP) * degrees)\n .precision(precision);\n\n return projection;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2260,"value":"BehaveLatLgnGlobe = spinningBall.init(divLatLgn, [-95.3656049, 29.7537002], 11000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1962,"value":"BehaveOrthoGlobe = spinningBall.init(divOrthoGlobe, [-95.3656049, 29.7537002], 11000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2329,"value":"function renderLowResLatLngGlobe(path) {\n contextLatLgnGlobe.beginPath(), path(land110m), contextLatLgnGlobe.globalAlpha = 1.0, contextLatLgnGlobe.fill();\n contextLatLgnGlobe.beginPath(), path(grid.major), contextLatLgnGlobe.strokeStyle = \"#aaa\", contextLatLgnGlobe.globalAlpha = 0.8, contextLatLgnGlobe.stroke();\n contextLatLgnGlobe.beginPath(), path(grid.horizon), contextLatLgnGlobe.strokeStyle = \"#000\", contextLatLgnGlobe.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2532,"value":"function renderLowResOrthoGlobe(path) {\n// contextOrthoGlobe.beginPath(), path(land110m), contextOrthoGlobe.globalAlpha = 1.0, contextOrthoGlobe.fill();\n// contextOrthoGlobe.beginPath(), path(grid.major), contextOrthoGlobe.strokeStyle = \"#aaa\", contextOrthoGlobe.globalAlpha = 0.8, contextOrthoGlobe.stroke();\n// contextOrthoGlobe.beginPath(), path(grid.horizon), contextOrthoGlobe.strokeStyle = \"#000\", contextOrthoGlobe.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2332,"value":"function renderHighResLatLgnClobe(path) {\n contextLatLgnGlobe.beginPath(), path(land50m), contextLatLgnGlobe.globalAlpha = 1.0, contextLatLgnGlobe.fill();\n contextLatLgnGlobe.beginPath(), path(grid.minor), contextLatLgnGlobe.strokeStyle = \"#aaa\", contextLatLgnGlobe.globalAlpha = 0.4, contextLatLgnGlobe.stroke();\n contextLatLgnGlobe.beginPath(), path(grid.major), contextLatLgnGlobe.strokeStyle = \"#aaa\", contextLatLgnGlobe.globalAlpha = 0.8, contextLatLgnGlobe.stroke();\n contextLatLgnGlobe.beginPath(), path(grid.horizon), contextLatLgnGlobe.strokeStyle = \"#000\", contextLatLgnGlobe.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2530,"value":"function renderHighResOrthoGlobe(path) {\n// contextOrthoGlobe.beginPath(), path(land50m), contextOrthoGlobe.globalAlpha = 1.0, contextOrthoGlobe.fill();\n// contextOrthoGlobe.beginPath(), path(grid.minor), contextOrthoGlobe.strokeStyle = \"#aaa\", contextOrthoGlobe.globalAlpha = 0.4, contextOrthoGlobe.stroke();\n// contextOrthoGlobe.beginPath(), path(grid.major), contextOrthoGlobe.strokeStyle = \"#aaa\", contextOrthoGlobe.globalAlpha = 0.8, contextOrthoGlobe.stroke();\n// contextOrthoGlobe.beginPath(), path(grid.horizon), contextOrthoGlobe.strokeStyle = \"#000\", contextOrthoGlobe.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2168,"value":"renderOrthoGlobe = {\n let contextOrthoDiv;\n \n if (this) {\n contextOrthoDiv = this;\n contextOrthoDiv.clearRect(0, 0, size, size);\n } else {\n contextOrthoDiv = DOM.context2d(size, size);\n d3.select(contextOrthoDiv.canvas).call(grabOrthoGlobe);\n }\n \n const path = d3.geoPath(globeMuta, contextOrthoDiv)\n\n contextOrthoDiv.beginPath(), path(sphere), contextOrthoDiv.fillStyle = \"#fff\", contextOrthoDiv.fill(), contextOrthoDiv.strokeStyle = 'black', contextOrthoDiv.stroke();\n contextOrthoDiv.beginPath(), path(land), contextOrthoDiv.fillStyle = \"#000\", contextOrthoDiv.fill();\n//context.beginPath(), path(graticule), context.strokeStyle = 'rgba(100, 100, 100, 0.25)', context.stroke();\n \n contextOrthoDiv.beginPath(), path(quads), contextOrthoDiv.strokeStyle = 'red', contextOrthoDiv.stroke(), contextOrthoDiv.fillStyle = 'rgba(255, 0, 0, 0.25)', contextOrthoDiv.fill();\n \n return contextOrthoDiv;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"renderMercator = {\n let context;\n \n if (this) {\n context = this; //this.getContext(\"2d\");\n context.clearRect(0, 0, size, size);\n } else {\n context = DOM.context2d(size, size);\n }\n \n const path = d3.geoPath(mercator, context);\n \n context.fillStyle = 'black';\n context.strokeStyle = 'black';\n\n context.beginPath(), path(sphere), context.fillStyle = \"#fff\", context.fill();\n context.beginPath(), path(land), context.fillStyle = \"#000\", context.fill();\n context.beginPath(), path(graticule), context.strokeStyle = 'rgba(100, 100, 100, 0.25)', context.stroke();\n \n for (var quad of quads.features) {\n context.beginPath(), path(quad), context.strokeStyle = 'red', context.stroke();\n context.beginPath(), path(quad), context.fillStyle = 'rgba(255, 0, 0, 0.25)', context.fill();\n }\n \n context.beginPath(), path(sphere), context.strokeStyle = 'black', context.stroke();\n\n\n return context;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1861,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"mutable globeMuta = d3.geoOrthographic()\n .translate([size / 2, size / 2])\n .clipExtent([[0, 0], [size, size]])\n .rotate([-17, -13, 30])\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1685,"value":"numPixelsY = width * 0.6;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"size = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1687,"value":"degrees = 180 / Math.PI;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"tau = 2 * Math.PI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"pi = Math.PI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"rect = Object({\n x: 1/6 * size,\n y: 2/6 * size,\n width: 4/6 * size,\n height: 2/6 * size,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"quads = {\n globeMuta.clipExtent([[rect.x, rect.y], [rect.x + rect.width, rect.y + rect.height]]);\n \n let features = getVisibleTiles(globeMuta, zoom)\n .map(geom => turf.feature(geom));\n \n globeMuta.clipExtent([[0, 0], [size, size]]);\n return turf.featureCollection(features);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"mercator = d3.geoMercator()\n .fitSize([size, size], sphere)\n .clipExtent([[0, 0], [size, size]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1997,"value":"land50m = fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@1/world/50m.json\")\n .then(response => response.json())\n .then(world => topojson.feature(world, world.objects.land));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1995,"value":"land110m = fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@1/world/110m.json\")\n .then(response => response.json())\n .then(world => topojson.feature(world, world.objects.land));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"world = d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"sphere = Object({ type: 'Sphere' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1992,"value":"grid = ({\n major: d3.geoGraticule().step([15,15])(),\n minor: d3.geoGraticule().step([5,5])(),\n horizon: ({type: \"Sphere\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\", \"d3-geo@1\", \"d3-geo-projection@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"versor = require(\"versor@0.0.4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1941,"value":"spinningBall = import(\"spinning-ball@0.2.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2357,"value":"import { checkbox, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W28","stdlib":"1","titling":"auto"}} 26:"$25:body"