2c:null 2d:["$","title",null,{"children":"Satellite Explorer | John Keefe | Observable"}] 32: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; }33:[] 30:{"id":"44a5b807491f31c6","slug":"satellite-explorer","title":"Satellite Explorer","thumbnail":"4646b66734dda2754c3a90a2f6b0217c9519ed499c136978664d4c21ae6a698f","access_level":"public","create_time":"$D2021-06-24T17:31:03.826Z","update_time":"$D2021-06-25T20:00:06.369Z","view_time":null,"first_public_time":"$D2021-06-25T20:00:20.978Z","has_unpublished_edits":null,"fork":{"id":"2e982ad1c5bb44bf","slug":"satellite-explorer","title":"Satellite Explorer","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"03a1099d1bd8d2bd","login":"jkeefe","name":"John Keefe","avatar_url":"https://avatars-next.observableusercontent.com/d6190ea3f9670629f99ba2a6f6b29efaac715ec3d6eaabf1720333ed799303aa","tier":"starter_2024","bio":"Currently @nytimes @nytgraphics. Formerly @Quartz & @datanews. Adjunct prof at the Newmark Graduate School of Journalism. Professional beginner."},"version":278,"publish_version":278,"role":null,"authored":false,"authors":[{"type":"individual","id":"8b9da3d135e04170","login":"jkeefe","name":"John Keefe","avatar_url":"https://avatars-next.observableusercontent.com/d6190ea3f9670629f99ba2a6f6b29efaac715ec3d6eaabf1720333ed799303aa","tier":null,"bio":"Currently @nytimes @nytgraphics. Formerly @Quartz & @datanews. Adjunct prof at the Newmark Graduate School of Journalism. Professional beginner."}],"members":[{"type":"individual","id":"8b9da3d135e04170","login":"jkeefe","name":"John Keefe","avatar_url":"https://avatars-next.observableusercontent.com/d6190ea3f9670629f99ba2a6f6b29efaac715ec3d6eaabf1720333ed799303aa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"geoClipCircle = d3.geoClipCircle","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"outline = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"graticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"d3 = require(\"d3-geo@2\", \"d3-geo-projection@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"