2c:null 2d:["$","title",null,{"children":"All the Flights in the World | Yonsei University | Observable"}] 32:T31b8,{ const width = 1100; const height = 600; const dpr = window.devicePixelRatio || 1; const container = html`

`; const controls = html`

Time

`; container.appendChild(controls); const slider = controls.querySelector("input"); const timeLabel = controls.querySelector("span"); const chart = html`

`; container.appendChild(chart); const svg = d3.create("svg") .attr("viewBox", `0 0 ${width} ${height}`) .attr("width", width) .attr("height", height) .style("display", "block") .style("width", "100%") .style("height", "auto") .style("background", "#eef5ff") .style("cursor", "grab") .style("user-select", "none"); chart.appendChild(svg.node()); const bgCanvas = html`

`; const dynamicCanvas = html`

`; const pointCanvas = html`

`; for (const canvas of [bgCanvas, dynamicCanvas, pointCanvas]) { canvas.width = width * dpr; canvas.height = height * dpr; } chart.appendChild(bgCanvas); chart.appendChild(dynamicCanvas); chart.appendChild(pointCanvas); const bgCtx = bgCanvas.getContext("2d"); const dynCtx = dynamicCanvas.getContext("2d"); const pointCtx = pointCanvas.getContext("2d"); const tooltip = d3.select(container) .append("div") .style("position", "absolute") .style("pointer-events", "none") .style("background", "white") .style("border", "1px solid #999") .style("padding", "6px 8px") .style("border-radius", "4px") .style("font", "12px sans-serif") .style("box-shadow", "0 2px 8px rgba(0,0,0,0.15)") .style("display", "none"); const [rows, world] = await Promise.all([ FileAttachment("flights4.csv").csv(), d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json") ]); const countries = topojson.feature(world, world.objects.countries); const projection = d3.geoNaturalEarth1() .fitSize([width, height], countries); const path = d3.geoPath(projection); const zoomLayer = svg.append("g"); zoomLayer.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#eef5ff"); zoomLayer.append("g") .selectAll("path") .data(countries.features) .join("path") .attr("d", path) .attr("fill", "white") .attr("stroke", "none"); let minTime = Infinity; let maxTime = -Infinity; const flights = rows.map(row => { const feature = JSON.parse(row._geojson); const coords = feature.geometry.coordinates .map(d => { const lon = +d[0]; const lat = +d[1]; const alt = +d[2]; const time = +d[3]; const projected = projection([lon, lat]); if (!projected || !Number.isFinite(projected[0]) || !Number.isFinite(projected[1])) { return null; } minTime = Math.min(minTime, time); maxTime = Math.max(maxTime, time); return { lon, lat, alt, time, x: projected[0], y: projected[1] }; }) .filter(Boolean) .sort((a, b) => a.time - b.time); if (coords.length < 2) return null; return { icao24: row.icao24, origin_country: row.origin_country, callsign: row.callsign, airline: row.airline, country: row.country, coords, startTime: coords[0].time, endTime: coords[coords.length - 1].time }; }).filter(Boolean); function addSampledLineToPath(path2d, coords, maxPoints) { if (!coords.length) return; const step = Math.max(1, Math.ceil(coords.length / maxPoints)); path2d.moveTo(coords[0].x, coords[0].y); for (let i = step; i < coords.length; i += step) { path2d.lineTo(coords[i].x, coords[i].y); } const last = coords[coords.length - 1]; path2d.lineTo(last.x, last.y); } const backgroundPaths = { veryLow: new Path2D(), low: new Path2D(), med: new Path2D(), full: new Path2D() }; for (const flight of flights) { addSampledLineToPath(backgroundPaths.veryLow, flight.coords, 40); addSampledLineToPath(backgroundPaths.low, flight.coords, 120); addSampledLineToPath(backgroundPaths.med, flight.coords, 300); addSampledLineToPath(backgroundPaths.full, flight.coords, Infinity); } slider.min = minTime; slider.max = maxTime; slider.value = minTime; slider.step = 40; let currentTime = minTime; let currentTransform = d3.zoomIdentity; let activePoints = []; let redrawQueued = false; let backgroundDirty = true; let isZooming = false; const baseRadius = 3.5; const basePointStrokeWidth = 0.8; const baseBgTrackWidth = 1; const baseTrailWidth = 1.5; function formatTime(ts) { return new Date(ts * 1000).toUTCString(); } function clearCanvas(ctx) { ctx.save(); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, width * dpr, height * dpr); ctx.restore(); } function useZoomedCanvasCoordinates(ctx) { ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.translate(currentTransform.x, currentTransform.y); ctx.scale(currentTransform.k, currentTransform.k); } function useScreenCanvasCoordinates(ctx) { ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } function backgroundPathForZoom() { const k = currentTransform.k; if (isZooming) { if (k < 2) return backgroundPaths.veryLow; if (k < 5) return backgroundPaths.low; return backgroundPaths.med; } if (k < 1.5) return backgroundPaths.veryLow; if (k < 3) return backgroundPaths.low; if (k < 6) return backgroundPaths.med; return backgroundPaths.full; } function positionAtTime(flight, t) { const coords = flight.coords; if (t < flight.startTime || t > flight.endTime) return null; let i = d3.bisector(d => d.time).right(coords, t) - 1; if (i < 0) return null; if (i >= coords.length - 1) { const last = coords[coords.length - 1]; return { ...last, index: coords.length - 1 }; } const a = coords[i]; const b = coords[i + 1]; if (!b || b.time === a.time) { return { ...a, index: i }; } const p = (t - a.time) / (b.time - a.time); return { lon: a.lon + (b.lon - a.lon) * p, lat: a.lat + (b.lat - a.lat) * p, alt: a.alt + (b.alt - a.alt) * p, time: t, x: a.x + (b.x - a.x) * p, y: a.y + (b.y - a.y) * p, index: i }; } function recomputeActivePoints() { activePoints = []; for (const flight of flights) { if (currentTime < flight.startTime || currentTime > flight.endTime) continue; const pos = positionAtTime(flight, currentTime); if (!pos) continue; activePoints.push({ flight, pos }); } } function drawBackgroundTracks() { clearCanvas(bgCtx); useZoomedCanvasCoordinates(bgCtx); bgCtx.save(); bgCtx.globalAlpha = 0.15; bgCtx.strokeStyle = "#555"; bgCtx.lineWidth = baseBgTrackWidth / currentTransform.k; bgCtx.lineCap = "round"; bgCtx.lineJoin = "round"; bgCtx.stroke(backgroundPathForZoom()); bgCtx.restore(); } function addTrailToPath(path2d, coords, pos) { const stopIndex = pos.index; if (stopIndex <= 0) return; const k = currentTransform.k; const maxTrailPoints = isZooming ? (k < 2 ? 25 : k < 5 ? 60 : 120) : (k < 1.5 ? 60 : k < 3 ? 140 : k < 6 ? 300 : 700); const step = Math.max(1, Math.floor(stopIndex / maxTrailPoints)); path2d.moveTo(coords[0].x, coords[0].y); for (let i = step; i <= stopIndex; i += step) { path2d.lineTo(coords[i].x, coords[i].y); } path2d.lineTo(pos.x, pos.y); } function drawDynamicLayer() { clearCanvas(dynCtx); useZoomedCanvasCoordinates(dynCtx); const trailPath = new Path2D(); for (const d of activePoints) { addTrailToPath(trailPath, d.flight.coords, d.pos); } dynCtx.save(); dynCtx.globalAlpha = 0.75; dynCtx.strokeStyle = "#1f77b4"; dynCtx.lineWidth = baseTrailWidth / currentTransform.k; dynCtx.lineCap = "round"; dynCtx.lineJoin = "round"; dynCtx.stroke(trailPath); dynCtx.restore(); } function drawPointLayer() { clearCanvas(pointCtx); useScreenCanvasCoordinates(pointCtx); pointCtx.save(); for (const d of activePoints) { const x = currentTransform.applyX(d.pos.x); const y = currentTransform.applyY(d.pos.y); pointCtx.beginPath(); pointCtx.arc(x, y, baseRadius, 0, Math.PI * 2); pointCtx.fillStyle = "#d62728"; pointCtx.fill(); pointCtx.lineWidth = basePointStrokeWidth; pointCtx.strokeStyle = "white"; pointCtx.stroke(); } pointCtx.restore(); } function scheduleRedraw({ background = false } = {}) { backgroundDirty = backgroundDirty || background; if (redrawQueued) return; redrawQueued = true; requestAnimationFrame(() => { redrawQueued = false; if (backgroundDirty) { drawBackgroundTracks(); backgroundDirty = false; } drawDynamicLayer(); drawPointLayer(); }); } function updateForTime(t) { currentTime = +t; timeLabel.textContent = formatTime(currentTime); recomputeActivePoints(); scheduleRedraw({ background: false }); } function findNearestPoint(event) { const rect = svg.node().getBoundingClientRect(); const sx = (event.clientX - rect.left) * width / rect.width; const sy = (event.clientY - rect.top) * height / rect.height; const [mx, my] = currentTransform.invert([sx, sy]); const maxDist = (baseRadius + 8) / currentTransform.k; const maxDist2 = maxDist * maxDist; let best = null; let bestDist2 = maxDist2; for (const d of activePoints) { const dx = d.pos.x - mx; const dy = d.pos.y - my; const dist2 = dx * dx + dy * dy; if (dist2 < bestDist2) { best = d; bestDist2 = dist2; } } return best; } svg.on("mousemove", event => { const nearest = findNearestPoint(event); if (!nearest) { tooltip.style("display", "none"); return; } const { flight, pos } = nearest; const [tx, ty] = d3.pointer(event, container); tooltip .style("display", "block") .style("left", `${tx + 12}px`) .style("top", `${ty + 12}px`) .html(`

${flight.callsign || "Unknown callsign"}

ICAO24: ${flight.icao24}

Origin country: ${flight.origin_country || "Unknown"}

Airline: ${flight.airline || "Unknown"}

Airline country: ${flight.country || "Unknown"}

Altitude: ${Number.isFinite(pos.alt) ? pos.alt.toFixed(0) : "Unknown"} m

Time: ${formatTime(pos.time)}

`); }); svg.on("mouseleave", () => { tooltip.style("display", "none"); }); const zoom = d3.zoom() .scaleExtent([1, 12]) .translateExtent([[0, 0], [width, height]]) .extent([[0, 0], [width, height]]) .on("start", () => { isZooming = true; svg.style("cursor", "grabbing"); tooltip.style("display", "none"); }) .on("zoom", event => { currentTransform = event.transform; zoomLayer.attr("transform", currentTransform); // Redraw sharply during zoom using simplified paths. scheduleRedraw({ background: true }); }) .on("end", () => { isZooming = false; svg.style("cursor", "grab"); // Redraw once with better detail after zooming ends. scheduleRedraw({ background: true }); }); svg.call(zoom); slider.addEventListener("input", event => { updateForTime(event.target.value); }); const resizeObserver = new ResizeObserver(() => { scheduleRedraw({ background: true }); }); resizeObserver.observe(chart); timeLabel.textContent = formatTime(currentTime); recomputeActivePoints(); scheduleRedraw({ background: true }); return container; }33:[{"id":"5e513b2036bf7088e7380f9bee8d502fa739d80843bd227fe401e2e83222757a55d177900bf67b3057b2f644792eedb43d3d63eeb599a7f2bb1d82fca2818779","href":"https://static.observableusercontent.com/files/5e513b2036bf7088e7380f9bee8d502fa739d80843bd227fe401e2e83222757a55d177900bf67b3057b2f644792eedb43d3d63eeb599a7f2bb1d82fca2818779","name":"flights4.csv","type":"text/csv","lastModified":1774520265224.064,"size":23114472}] 30:{"id":"e70b572f85764265","slug":null,"title":"All the Flights in the World","thumbnail":"f816fd5f686b27909924589d618c0acdbe1cde2774b9a374a755a76f33f5406a","access_level":"public","create_time":"$D2026-03-25T21:00:11.386Z","update_time":"$D2026-05-22T09:35:54.390Z","view_time":null,"first_public_time":"$D2026-03-25T21:28:29.691Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6686209f2dacbb68","login":"yonsei-university","name":"Yonsei University","avatar_url":"https://avatars-next.observableusercontent.com/0ef313aea0a6d14e694642337ad9fb2c3d61bab08e797d7bf396f201ea06499b","tier":"starter_2024"},"version":23,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"993abe2b01c94697","login":"apikeu-muhammad-afiq-aiman-bin-affandi","name":"아피크 Muhammad Afiq Aiman bin Affandi","avatar_url":"https://avatars-next.observableusercontent.com/a3c91dc94a67b55a27b9cb13cd75d20a8cd74d4570e4acc69327d28827cd0613","tier":null}],"members":[{"type":"individual","id":"993abe2b01c94697","login":"apikeu-muhammad-afiq-aiman-bin-affandi","name":"아피크 Muhammad Afiq Aiman bin Affandi","avatar_url":"https://avatars-next.observableusercontent.com/a3c91dc94a67b55a27b9cb13cd75d20a8cd74d4570e4acc69327d28827cd0613","tier":null,"role":"editor"},{"type":"team","id":"6686209f2dacbb68","login":"yonsei-university","name":"Yonsei University","avatar_url":"https://avatars-next.observableusercontent.com/0ef313aea0a6d14e694642337ad9fb2c3d61bab08e797d7bf396f201ea06499b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"All the Flights in the World","cells":[{"id":0,"value":"# All the Flights in the World","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"Two hours of flight data collected by OpenSky Network on September 3rd 2019","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"Data source: OpenSky Network\n\nOriginal from a kepler.gl demo named [\"All the Flights in the World\"](https://kepler.gl/demo/world_flights)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"