31:T501,satelliteData = { const datasets = [ { group: 'human', url: '_space-track-human_spaceflight.txt' }, { group: 'gps', url: '_space-track-gps.txt' }, { group: 'weather', url: '_space-track-weather.txt' }, { group: 'geo', url: '_space-track-geo.txt' }, { group: 'heo', url: '_space-track-heo.txt' }, { group: 'meo', url: '_space-track-meo.txt' }, { group: 'leo', url: '_space-track-leo.txt' } ]; const fetchPath = 'https://gist.githubusercontent.com/vasturiano/59adce85e23f92a1e76bb09612a3a215/raw/b67b67525201d2fbd1d354e4f589df650e22225b'; return Promise.all(datasets.map(d => fetch(`${fetchPath}/${d.url}`).then(r => r.text()))) .then(data => { const satNames = new Set(); const sats = [].concat(...data.map((groupData, idx) => { const group = datasets[idx].group; const tles = groupData.split('\n0').map(tle => tle.split('\n')); return tles.map(([name, ...tle]) => ({ satrec: satellite.twoline2satrec(...tle), name: name.split(' ').slice(1).join(' '), group })); })) .filter(({ name }) => { if (satNames.has(name)) return false; // remove duplicates satNames.add(name); return true; }); return sats; }); }32:T4fb,SatellitesView = { const START_DATE = new Date(); const SatellitesView = Kapsule({ props: { satData: { default: [] }, showGroups: { default: [] }, onTimeChange: { default: () => {}} }, init(domNode, state) { const frameView = SatellitesFrame()(domNode); const timeStep = 10 * 1000; let time = new Date(START_DATE); const ticker = new FrameTicker.default(); ticker.onTick.add(() => { time = new Date(+time + timeStep); state.onTimeChange(time); frameView.satellites(getSatPositions(state.satData, time)); }); // function getSatPositions(sats, posTime) { const gmst = satellite.gstime(posTime); // Get sidereal time return sats .filter(sat => state.showGroups.includes(sat.group)) .map(sat => { // x,y,z position / velocity const location = satellite.propagate(sat.satrec, posTime); if (!location?.position) return null; // can't compute satellite pos // lat, lng, height sat.coords = satellite.eciToGeodetic(location.position, gmst); return sat; }) .filter(d => d); // filter out nulls } } }); return SatellitesView; }33:Ta60,Satellites = { const SAT_SIZE_REL = 35; // degrees per 1/height(sqkm) const Satellites = Kapsule({ props: { satellites: { default: null } }, stateInit: () => ({ groupColor: d3.scaleOrdinal(d3.schemeCategory10), geoCircle: d3.geoCircle() .center(({ latitude, longitude }) => [longitude, latitude].map(r2d)) .radius(({ height }) => SAT_SIZE_REL / Math.sqrt(height)) .precision(30), geoVoronoi: d3.geoVoronoi() .x(d => r2d(d.coords.longitude)) .y(d => r2d(d.coords.latitude)), tip: d3Tip() .attr('class', 'tooltip') .direction('s') .offset([-40, 10]) .html(({ properties: { site: d } }) => `

${d.name}

${d.group}

Altitude: ${Math.round(d.coords.height)}km

`) }), init(svg, state, projection) { state.voronoiG = svg.append('g'); state.satG = svg.append('g'); state.geoPath = d3.geoPath() .projection(projection) .pointRadius(2); // Tooltip svg.call(state.tip); state.followCursor = svg.append('circle').style('pointer-events', 'none'); // helper to make tip follow cursor svg.on('mousemove', function() { const [x, y] = d3.mouse(this); state.followCursor.attr('cx', x).attr('cy', y); }); }, update(state) { // voronoi polygons try { const voronoiPolygons = state.voronoiG.selectAll('.voronoi') .data( state.geoVoronoi(state.satellites).polygons().features, d => d.properties.site.name ); voronoiPolygons.exit().remove(); const newPolygons = voronoiPolygons .enter().append('path') .attr('class', 'voronoi') .on('mousemove', d => state.tip.show(d, state.followCursor.node())) .on('mouseout', state.tip.hide); voronoiPolygons.merge(newPolygons) .attr('d', state.geoPath) } catch(e) {} // skip render cycle if voronoi computation errors (due to overlapping nodes) // satellite markers const sats = state.satG.selectAll('.satellite') .data(state.satellites, d => d.name); sats?.exit().remove(); const newSats = sats.enter().append('path') .attr('class', 'satellite') .attr('fill', d => state.groupColor(d.group)) .attr('fill-opacity', 0.7); sats.merge(newSats) .attr('d', d => state.geoPath(state.geoCircle(d.coords))); } }); // radians to degrees function r2d(rad) { return rad * 180 / Math.PI; } return Satellites; }34:[] 2f:{"title":"Satellites Voronoi","cells":[{"id":0,"value":"md`# Satellites Voronoi`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md `\nArtificial satellites orbiting the Earth. Data provided by [Space Track](https://www.space-track.org/) in [TLE](https://en.wikipedia.org/wiki/Two-line_element_set) format, propagated to space-time coordinates using [satellite-js](https://github.com/shashwatak/satellite-js). \n\nEach satellite is projected at the location on Earth where it's directly at the zenith. The area of each circle is inversely proportional to the satellite's altitude from the surface, so closer (and faster orbiting) satellites will exhibit a larger radius.\n\nThe Voronoi cells are computed iteratively according to the satellite layers in view, using [d3-geo-voronoi](https://github.com/Fil/d3-geo-voronoi).\n[d3-geo-zoom](https://github.com/vasturiano/d3-geo-zoom) is used to handle the globe zoom/pan interaction.\n\nSee also [Earth Satellites](https://observablehq.com/@vasturiano/earth-satellites) and [Geostationary Satellites](https://observablehq.com/@vasturiano/geostationary-satellites).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"viewof satelliteTypes = checkbox({\n title: 'Satellite Types',\n description: 'Select the types of satellites to show',\n options: [\n { label: 'Human Spaceflight', value: 'human' },\n { label: 'Navigation (GPS)', value: 'gps' },\n { label: 'Weather', value: 'weather' },\n { label: 'Geostationary', value: 'geo' },\n { label: 'Highly Eliptical Orbit (HEO)', value: 'heo' },\n { label: 'Medium Earth Orbit (MEO)', value: 'meo' },\n { label: 'Low Earth Orbit (LEO)', value: 'leo' }\n ],\n value: ['human', 'gps']\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"{\n const domEl = document.createElement('div');\n \n mainComp(domEl)\n .onTimeChange(t => mutable time = t);\n \n return domEl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"mutable time = ''","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"md `**Load Data**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"md `**Components**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"// initialize once\nmainComp = SatellitesView()\n .satData(satelliteData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"// react to control changes\nmainComp.showGroups(satelliteTypes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"SatellitesFrame = Kapsule({\n\n props: { satellites: { default: [] }},\n\n init(domNode, state) {\n const width = window.innerWidth;\n const height = 640;\n\n const svg = d3.select(domNode).append('svg')\n .attr('width', width)\n .attr('height', height);\n\n const canvas = svg.append('g');\n\n const projection = d3.geoOrthographic()\n .scale((height - 10) / 2)\n .translate([width / 2, height / 2])\n .rotate([0, -35, 0])\n .precision(0.1);\n\n const earth = Earth(projection)(canvas.append('g'));\n\n state.satellitesLayer = Satellites(projection)\n (canvas.append('g'));\n\n d3.geoZoom()\n .projection(projection)\n .onMove(() => {\n state.satellitesLayer.satellites(state.satellites); // update satellites positions\n earth.redraw();\n })\n (svg.node());\n },\n\n update(state) {\n state.satellitesLayer.satellites(state.satellites);\n }\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"Earth = Kapsule({\n\n methods: {\n redraw: function(state) {\n state.terrainRender && state.terrainRender();\n return this;\n }\n },\n\n init(svg, state, projection) {\n const path = d3.geoPath()\n .projection(projection);\n\n state.terrainRender = () => svg.selectAll('path.geo').attr('d', path);\n\n fetch('//unpkg.com/world-atlas@1/world/110m.json').then(r => r.json()).then(world => {\n // water\n svg.append('path').attr('class', 'geo sphere')\n .datum({ type: 'Sphere' });\n\n // land\n svg.append('path').attr('class', 'geo land')\n .datum(topojson.feature(world, world.objects.land).features[0]);\n\n // graticules\n svg.append('path').attr('class', 'geo graticule')\n .datum(d3.geoGraticule10());\n\n state.terrainRender();\n });\n }\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"md `**Style**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md `**Dependencies**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"FrameTicker = require('frame-ticker')","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"Kapsule = require('kapsule')","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"d3 = require('d3@4', 'd3-geo-zoom', 'd3-geo-voronoi')","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"d3Tip = require('d3-tip')","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"satellite = import('satellite.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}