2b:null 2c:["$","title",null,{"children":"Satellite Explorer | D3 | Observable"}] 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:{"id":"2e982ad1c5bb44bf","slug":"satellite-explorer","title":"Satellite Explorer","thumbnail":"fff13c33972cd3d1a01f31465fa59f87279f3bef4ccaa3baefe61b5f0762a052","access_level":"public","create_time":"$D2019-08-30T17:27:14.075Z","update_time":"$D2020-08-27T09:51:15.507Z","view_time":null,"first_public_time":"$D2019-08-30T18:04:12.014Z","fork":false,"stars":33,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":225,"publish_version":225,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":48,"collection":{"id":"650e48551bcfb21d","slug":"d3-geo-projection","title":"d3-geo-projection","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"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"},{"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"},{"id":47,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"projection = d3.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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"geoClipCircle = d3.geoClipCircle","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"outline = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"graticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"id":20,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"d3 = require(\"d3-geo@2\", \"d3-geo-projection@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"