31:T4a2,viewof camera = { const form = html``; form.value = {tilt: 0, distance: 2}; form.oninput = () => { const tilt = form.value.tilt = form.a.valueAsNumber; const distance = form.value.distance = Math.pow(2, form.b.valueAsNumber); const phi = Math.acos(1 / distance); const size = (distance - 1) / (distance - Math.cos(phi)) * Math.sin(phi); const scale = form.value.scale = Math.pow(2, form.d.valueAsNumber) / size * (width - 2) / Math.SQRT2; form.oa.value = `${tilt.toFixed(2)}°`; form.ob.value = distance.toFixed(2); form.od.value = `${scale.toFixed(0)}`; }; form.oninput(); return form; }32:[] 2f:{"title":"Satellite Explorer","cells":[{"id":0,"value":"md`# Satellite Explorer\n\nUse the sliders below to configure the [general perspective projection](/@d3/satellite). For an alternative exploration using satellite position and camera orientation, see Jeshurun Hembd’s [Tilting the Satellite](/@jjhembd/tilting-the-satellite).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"viewof rotate = {\n const form = html``;\n form.value = [0, 0, 0];\n form.oninput = () => {\n form.oa.value = `${(form.value[0] = form.a.valueAsNumber).toFixed(2)}°`;\n form.ob.value = `${(form.value[1] = form.b.valueAsNumber).toFixed(2)}°`;\n form.oc.value = `${(form.value[2] = form.c.valueAsNumber).toFixed(2)}°`;\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"map = {\n const context = DOM.context2d(width, height);\n const path = d3.geoPath(projection, context);\n context.save();\n context.beginPath(), path(outline), context.clip(), context.fillStyle = \"#fff\", context.fillRect(0, 0, width, height);\n context.beginPath(), path(graticule), context.strokeStyle = \"#ccc\", context.stroke();\n context.beginPath(), path(land), context.fillStyle = \"#000\", context.fill();\n context.restore();\n context.beginPath(), path(outline), context.strokeStyle = \"#000\", context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"md`**Here is John's code:** \n\n\\` const camera = {\n tilt: ${camera.tilt},\n distance: ${camera.distance},\n scale: ${camera.scale}\n} \\`\n\n\\`const rotate = [ ${rotate[0]}, ${rotate[1]}, ${rotate[2]}\n]\\`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"projection = d3\n .geoSatellite()\n .scale(camera.scale)\n .translate([width / 2, height / 2])\n .rotate(rotate)\n .tilt(camera.tilt)\n .distance(camera.distance)\n // .preclip(preclip)\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"preclip = {\n const distance = camera.distance;\n const tilt = camera.tilt * Math.PI / 180;\n const alpha = Math.acos(distance * Math.cos(tilt) * 0.999);\n const clipDistance = geoClipCircle(Math.acos(1 / distance) - 1e-6);\n return alpha ? geoPipeline(\n clipDistance,\n geoRotatePhi(Math.PI + tilt),\n geoClipCircle(Math.PI - alpha),\n geoRotatePhi(-Math.PI - tilt)\n ) : clipDistance;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"function geoPipeline(...transforms) {\n return sink => {\n for (let i = transforms.length - 1; i >= 0; --i) {\n sink = transforms[i](sink);\n }\n return sink;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"geoClipCircle = d3.geoClipCircle","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"function geoRotatePhi(deltaPhi) {\n const cosDeltaPhi = Math.cos(deltaPhi);\n const sinDeltaPhi = Math.sin(deltaPhi);\n return sink => ({\n point(lambda, phi) {\n const cosPhi = Math.cos(phi);\n const x = Math.cos(lambda) * cosPhi;\n const y = Math.sin(lambda) * cosPhi;\n const z = Math.sin(phi);\n const k = z * cosDeltaPhi + x * sinDeltaPhi;\n sink.point(Math.atan2(y, x * cosDeltaPhi - z * sinDeltaPhi), Math.asin(k));\n },\n lineStart() { sink.lineStart(); },\n lineEnd() { sink.lineEnd(); },\n polygonStart() { sink.polygonStart(); },\n polygonEnd() { sink.polygonEnd(); },\n sphere() { sink.sphere(); }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"outline = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"graticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"land = Generators.observe(notify => {\n const mousedown = event => { event.target.form && notify(land110); };\n const mouseup = event => { event.target.form && notify(land50); };\n notify(land50);\n window.addEventListener(\"mousedown\", mousedown);\n window.addEventListener(\"mouseup\", mouseup);\n return () => {\n window.removeEventListener(\"mousedown\", mousedown);\n window.removeEventListener(\"mouseup\", mouseup);\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"land50 = fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@2/land-50m.json\")\n .then(response => response.json())\n .then(topology => topojson.feature(topology, topology.objects.land))","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"land110 = fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@2/land-110m.json\")\n .then(response => response.json())\n .then(topology => topojson.feature(topology, topology.objects.land))","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"d3 = require(\"d3-geo@2\", \"d3-geo-projection@3\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}