31:T6b5,{ const context = DOM.context2d(width, height) const path = d3.geoPath(projection, context) context.clearRect(0, 0, width, height) context.beginPath() path(({type: "Sphere"})) context.fillStyle = d3.hcl(270,10,90) context.fill() context.beginPath() path(topojson.feature(land, land.objects.ne_50m_land)) context.fillStyle = d3.hcl(150,10,80) context.fill() context.fillStyle = dotcolor ISS_positions .map( ({lat, lng}) => projection([lng, lat])) .forEach( ([x,y], i) => { context.globalAlpha = 1 - i/5; context.beginPath(); context.arc(x, y, 5, 0, 2 * Math.PI) context.fill() }) context.globalAlpha = 1 const miniW = 90, miniH = 60 context.translate(width - miniW, height - miniH) const projectionMini = d3.geoCylindricalStereographic() .fitExtent([[0, 0], [miniW, miniH]], { type: "Sphere" }) .precision(0.1) const pathMini = d3.geoPath(projectionMini, context); context.strokeStyle = d3.hcl(0,0,50) context.lineWidth = .5 context.beginPath() pathMini(({type: "Sphere"})) context.fillStyle = d3.hcl(270,10,100) context.stroke() context.beginPath() pathMini(topojson.feature(land, land.objects.ne_50m_land)) context.fillStyle = d3.hcl(0,0,50) context.fill() context.beginPath() pathMini(topojson.feature(land, land.objects.ne_50m_land)) context.fillStyle = d3.hcl(0,0,60) context.strokeStyle = d3.hcl(0,0,50) context.stroke() const pixelCoords = projectionMini([ISS_positions[0].lng, ISS_positions[0].lat]) context.beginPath() context.fillStyle = dotcolor context.arc(pixelCoords[0], pixelCoords[1], 4, 0, 2 * Math.PI) context.fill() return context.canvas }32:[] 2f:{"title":"The View from the International Space Station","cells":[{"id":627,"value":"html`\n

The View from the International Space Station

Here's a perspective from low Earth orbit aboard the International Space Station.

The ISS is about 400km above and completes an orbit in about 90 minutes. The center dot () is the point currently directly beneath the space station. The trailing dots \n() are previous positions at 30 second intervals.

Compare with ISS webcam.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"md`#### Data\nCurrent ISS position computed from its official [TLE](https://en.wikipedia.org/wiki/Two-line_element_set) (thanks [ARISS](https://live.ariss.org/iss.txt)) using [TLE-js](https://github.com/davidcalhoun/tle.js#readme) and [satellite-js](https://github.com/shashwatak/satellite-js). Raw cartographic data courtesy of [Natural Earth](https://www.naturalearthdata.com/), converted to [topojson](https://github.com/topojson/topojson#readme) by [mapshaper](https://mapshaper.org/). Map data is rendered with [d3-geo](https://github.com/d3/d3-geo#readme) after being projected through the [General Perspective projection](https://en.wikipedia.org/wiki/General_Perspective_projection), which renders the earth from a vantage point.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"dotcolor = d3.hcl(60, 80, 70)","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"altitudeinKM = 409","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"projection = d3.geoSatellite()\n .scale(2500)\n .rotate([ISS_positions[0].lng * -1, ISS_positions[0].lat * -1])\n .translate([width/2, height/2])\n .distance((altitudeinKM + 6371) / 6371)\n .clipAngle(Math.acos(6371 / (altitudeinKM + 6371)) * 180 / Math.PI)","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"ISS_TLE = d3.text(\"https://live.ariss.org/iss.txt\")\n.then(d => d.substring(0,d.length-4))","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"ISS_positions = {\n while (true) {\n yield Promises.delay(1000, \n Array.from({length: 5}, (d,i) => i) // range from 0-4\n .map(d => tle.getLatLngObj(ISS_TLE, Date.now() - d * 30 * 1000))) \n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"topojson = require(\"topojson-client@3\", \"topojson-simplify@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"land = d3.json(\"https://gist.githubusercontent.com/caseylabrack/82cfbccc4ecdaf46128a424bdc5eacc5/raw/\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"tle = import('https://unpkg.com/tle.js@4.2.5/dist/tlejs.esm.js?module')","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"d3 = require(\"d3\",\"d3-geo-projection@3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}