flight_view = async function ( flight, { simplify = 1e-4, graticule = false } = {} ) { const width = 300; const extent = [ [0, 0], [width, width] ]; const minlat = flight.min("latitude"); const minlon = flight.min("longitude"); const maxlat = flight.max("latitude"); const maxlon = flight.max("longitude"); let feature = flight.feature({}); const projection = d3 .geoAzimuthalEqualArea() .rotate([-(minlon + maxlon) / 2, -(minlat + maxlat) / 2]) .translate([width / 2, width / 2]) .fitExtent(extent, feature) .clipExtent(extent); // -- Visvalingam algorithm if (simplify) { const topo = topojson.simplify( topojson.presimplify(topojson.topology({ feature })), simplify ); feature = topojson.feature(topo, topo.objects.feature); } const svg = d3.create("svg").attr("width", width).attr("height", width); const container = svg.append("g"); let marks = [Plot.geo(feature, { stroke: "#66cc99" })]; if (graticule) { marks = marks.concat( Plot.geo(d3.geoGraticule().step([graticule, graticule])(), { strokeWidth: 0.25 }) ); } const map = Plot.plot({ width, height: width, projection, marks }); container.append(() => map); const tf = d3.utcFormat("%Y-%m-%dT%H:%M:%SZ"); const tdf = d3.utcFormat("%H hours %M minutes %S seconds"); const sr = d3.format(".0f")( d3.mean( d3 .pairs(flight.data.columnArray("timestamp")) .map((elt) => elt[1] - elt[0]) ) / 1000 ); /*const aircraft_info = async function (x) { const pattern = patterns.find( (elt) => (elt.start <= `0x${x}`) & (`0x${x}` < elt.end) ); const response = await fetch( `https://whispering-inlet-31182.herokuapp.com/https://www.flightradar24.com/v1/search/web/find?query=${x}&limit=50` ); const info = await response.json(); const tail = info.results.length > 0 ? info.results[0] : undefined; return `${x} · ${pattern?.flag} ${tail?.id} (${tail?.detail?.equip})`; };*/ //

aircraft: ${await aircraft_info(flight.icao24)}

return html`

Flight

callsign: ${flight.callsign}
start: ${tf(flight.start)}
stop: ${tf(flight.stop)}
duration: ${tdf(flight.stop - flight.start)}
sampling rate: ${sr} second(s)

${svg.node()}`; }