30:T77e,map = { const container = d3 .create("div") .style("position", "relative") .style("width", width + "px") .style("height", height + "px"); const svg = container .append("svg") .attr("width", width) .attr("height", height) .style("position", "absolute") .style("top", 0) .style("left", 0); const zoomLayer = svg.append("g").attr("id", "zoom-layer"); // base layers drawMap(zoomLayer, countries); drawAirports(zoomLayer); drawPolygons(zoomLayer); // conditional let canvas, ctx; if (animate) { ({ canvas, ctx } = createFlightCanvas(container.node(), width, height)); startFlightAnimation(ctx, zoomLayer); } else { drawFlights(zoomLayer); } // titles & legends const title = selectedAirport == "all" || selectedAirport == null ? `Top ${showTopN} flights by ${theme}` : `Flights from ${getAirportName(selectedAirport)} (${selectedAirport})`; drawTitle(svg, title, { x: 10, y: 10 }); drawWidthLegend(svg, { x: 10, y: 100 }); if (showEmptySeats) drawColorLegend(svg, { x: 10, y: 140 }); // tooltip d3.select(document.body) .selectAll("#airport-tooltip") .data([0]) .join("div") .attr("id", "airport-tooltip") .style("position", "fixed") .style("pointer-events", "none") .style("z-index", 10000) .style("background", "rgba(255,255,255,0.95)") .style("border", "1px solid #ccc") .style("border-radius", "4px") .style("padding", "8px 10px") .style("display", "none"); // zoom const zoom = d3 .zoom() .scaleExtent([0.5, 12]) .on("zoom", (event) => { zoomLayer.attr("transform", event.transform); if (ctx) ctx.setTransform( event.transform.k, 0, 0, event.transform.k, event.transform.x, event.transform.y ); }); svg.call(zoom); return container.node(); }31:T1078,function drawAirports(svg) { const airportsContainer = svg.append("g").attr("id", "airports"); // adjust scale const extent = d3.extent(data.airports, (d) => d.outgoing); scales.airports.domain(extent); // draw airport bubbles airportsContainer .selectAll("circle.airport") .data(data.airports, (d) => d.iata) .enter() .append("circle") .attr("r", (d) => scales.airports(d.outgoing)) .attr("cx", (d) => d.x) // calculated on load .attr("cy", (d) => d.y) // calculated on load .attr("class", "airport") .style("cursor", "pointer") .each(function (d) { // adds the circle DOM node reference to our airport (runtime only) d.bubble = this; }) .on("mouseover", function (e, d) { d3.select("#airport-tooltip").style("display", "block").html(` ${d.name}
Incoming: ${format(d.incoming)}
Outgoing: ${format(d.outgoing)}
Total: ${format((d.incoming || 0) + (d.outgoing || 0))} `); d3.select(this).style("stroke", "red").style("stroke-width", 2); // Fade all flights d3.selectAll("path.flight") .style("opacity", 0) .style("stroke-opacity", 0); // Highlight only flights connected to this airport. // Resolve flight objects at hover time to tolerate reactive updates. try { const highlight = (flightObj) => { if (!flightObj || !flightObj._paths) return; flightObj._paths.forEach((el) => d3 .select(el) .style("opacity", 1) .style("stroke-opacity", 0.5) .raise() ); }; // Legacy: if d.flights exists and contains objects, use them if ( Array.isArray(d.flights) && d.flights.length && typeof d.flights[0] === "object" ) { d.flights.forEach((f) => highlight(f)); } // New: resolve flight keys on the fly if (Array.isArray(d.flightKeys)) { d.flightKeys.forEach((key) => { const k = String(key).toUpperCase(); // prefer flightByKey map if present and up-to-date let fo = typeof flightByKey !== "undefined" && flightByKey.get ? flightByKey.get(k) : null; // if not found or no _paths yet, try a scan fallback if (!fo || !Array.isArray(fo._paths) || fo._paths.length === 0) { fo = filteredFlights.find( (ff) => `${(ff.origin || "").toUpperCase()}|${( ff.destination || "" ).toUpperCase()}` === k ) || fo; } highlight(fo); }); } } catch (err) { console.warn("hover highlight error:", err); } }) .on("mouseleave", function () { d3.select("#airport-tooltip").style("display", "none"); d3.select(this).style("stroke", null).style("stroke-width", 1); // Restore all flights: restore stored original stroke-width and stroke where possible d3.selectAll("path.flight").each(function () { const node = this; const sel = d3.select(this); // restore original stroke width if we stored it if (node.__origStrokeWidth != null) sel.style("stroke-width", node.__origStrokeWidth); // restore stroke color / opacity sel .style("stroke", node.__origStroke || null) .style("stroke-opacity", node.__origStrokeOpacity || null) .style("opacity", null); }); }) .on("mousemove", function (e, d) { // move tooltip with mouse, positioned relative to page const pad = 10; const tip = d3.select("#airport-tooltip"); if (tip.empty()) return; const tw = tip.node().offsetWidth; const th = tip.node().offsetHeight; let x = e.clientX + pad; let y = e.clientY + pad; if (x + tw + pad > window.innerWidth) x = e.clientX - tw - pad; if (y + th + pad > window.innerHeight) y = e.clientY - th - pad; tip.style("left", `${x}px`).style("top", `${y}px`); }); }32:T1cfb,function drawFlights(svg) { const flightsContainer = svg.append("g").attr("id", "flights"); // break each flight between airports into multiple segments let bundle = generateSegments(data.airports, filteredFlights); // allocate array once for runtime DOM path refs filteredFlights.forEach((f) => (f._paths = [])); // https://github.com/d3/d3-shape#curveBundle let line = d3 .line() .curve(d3.curveBundle) .x((airport) => airport.x) .y((airport) => airport.y); // attach flight metadata to each path in the bundle using the O(1) map const MIN_W = 0.6; bundle.paths.forEach((path) => { const first = path && path[0]; const last = path && path[path.length - 1]; const originKey = ( (first && (first.code || first.icao || first.iata || first.origin)) || "" ) .toString() .toUpperCase(); const destKey = ( (last && (last.code || last.icao || last.iata || last.destination)) || "" ) .toString() .toUpperCase(); const key = `${originKey}|${destKey}`; const f = typeof flightByKey !== "undefined" && flightByKey.get ? flightByKey.get(key) || null : filteredFlights.find( (ff) => `${(ff.origin || "").toUpperCase()}|${( ff.destination || "" ).toUpperCase()}` === key ) || null; // attach pointer to the flight object (if found) and a reliable count path._flight = f; path.count = f ? Number(f.count) || 0 : 0; path.availableCount = f ? Number(f.availableCount) || 0 : 0; }); // draw paths let paths = flightsContainer .selectAll("path.flight") .data(bundle.paths) .enter() .append("path") .attr("d", line) .attr("class", "flight") .style("cursor", "pointer") // make sure the path is interactive and visible regardless of stylesheet .style("pointer-events", "auto") .style("fill", "none") .style("stroke", (d) => { if (!showEmptySeats) { return "#000"; } let passengers = d.count || 0; let seats = d.availableCount || 0; let emptySeats = seats - passengers; let perc = (emptySeats / seats) * 100; return scales.color(perc); }) .attr("stroke-width", function (d) { const count = theme === "Passengers carried" ? d.count // passengers : +d.availableCount - +d.count || 0; // empty seats const w = Math.max(scales.width(count || 0), MIN_W); // store original stroke width on DOM node so we can restore later this.__origStrokeWidth = w; this.__origStroke = this.style.stroke || "black"; this.__origStrokeOpacity = this.style.strokeOpacity || null; return w; }) .each(function (d) { // derive origin/dest keys from the path datum's first and last node const first = d && d[0]; const last = d && d[d.length - 1]; const originKey = ( (first && (first.code || first.icao || first.iata || first.origin)) || "" ) .toString() .toUpperCase(); const destKey = ( (last && (last.code || last.icao || last.iata || last.destination)) || "" ) .toString() .toUpperCase(); // push a lightweight flight key string onto airport.flightKeys (serializable) try { if (first) { first.flightKeys = first.flightKeys || []; if (originKey && destKey) first.flightKeys.push(`${originKey}|${destKey}`); } } catch (err) { // ignore any unexpected runtime errors here } // attach DOM path to the flight object for runtime interactivity if (originKey && destKey) { const key = `${originKey}|${destKey}`; // prefer global map if available, otherwise fallback to scan const flightObj = typeof flightByKey !== "undefined" && flightByKey.get ? flightByKey.get(key) : filteredFlights.find( (ff) => `${(ff.origin || "").toUpperCase()}|${( ff.destination || "" ).toUpperCase()}` === key ); if (flightObj) { flightObj._paths = flightObj._paths || []; flightObj._paths.push(this); this._flightObj = flightObj; // optional backref } } }) .on("mouseover", function (e, d) { const src = d[0]; const dst = d[d.length - 1]; const f = d._flight; if (!f) return; const empty = f.availableCount - f.count; const pct = ((empty / f.availableCount) * 100).toFixed(); const stroke = d3.select(this).style("stroke"); d3.select("#airport-tooltip").style("display", "block").html(` ${ getAirportName(src.code) || src.code || src.iata || "" } ${mergeFlows ? "↔" : "→"} ${getAirportName(dst.code) || dst.code || dst.iata || ""}
${format(f.count)} passengers
${format(f.availableCount)} seats
${format(empty)} empty seats (${contrastBadge(`${pct}%`, stroke)}) `); d3.select(this).style("stroke", "red").style("stroke-opacity", 1).raise(); }) .on("mousemove", function (e, d) { const pad = 10; const tip = d3.select("#airport-tooltip"); if (tip.empty()) return; const tw = tip.node().offsetWidth; const th = tip.node().offsetHeight; let x = e.clientX + pad; let y = e.clientY + pad; if (x + tw + pad > window.innerWidth) x = e.clientX - tw - pad; if (y + th + pad > window.innerHeight) y = e.clientY - th - pad; tip.style("left", `${x}px`).style("top", `${y}px`); }) .on("mouseout", function () { d3.select("#airport-tooltip").style("display", "none"); // restore original stroke and opacity d3.select(this) .style("stroke", this.__origStroke || null) .style("stroke-opacity", this.__origStrokeOpacity) .style("opacity", null); }); // // --- filter using selectedAirport --- // if (typeof selectedAirport !== "undefined" && selectedAirport) { // const sel = selectedAirport.toUpperCase(); // paths.style("display", function (d) { // const first = d && d[0]; // const last = d && d[d.length - 1]; // const o = (first && (first.iata || first.code || "")).toUpperCase(); // const t = (last && (last.iata || last.code || "")).toUpperCase(); // // Show only flights where origin or destination matches selectedAirport // return o === sel || t === sel ? null : "none"; // }); // } // --- filter using topN (according to theme) --- // https://github.com/d3/d3-force if (edgeBundling) { let layout = d3 .forceSimulation() // settle at a layout faster .alphaDecay(0.1) // nearby nodes attract each other .force( "charge", d3 .forceManyBody() .strength(10) .distanceMax(scales.airports.range()[1] * 2) ) // edges want to be as short as possible // prevents too much stretching .force("link", d3.forceLink().strength(0.7).distance(0)) .on("tick", function () { paths.attr("d", line); }) .on("end", function () { console.log("layout complete"); }); layout.nodes(bundle.nodes).force("link").links(bundle.links); } }33:T6c5,// Turns a single edge into several segments that can // be used for simple edge bundling. function generateSegments(nodes, links) { // generate separate graph for edge bundling // nodes: all nodes including control nodes // links: all individual segments (source to target) // paths: all segments combined into single path for drawing let bundle = { nodes: [], links: [], paths: [] }; // make existing nodes fixed bundle.nodes = nodes.map(function (d, i) { d.fx = d.x; d.fy = d.y; return d; }); links.forEach(function (d, i) { // calculate the distance between the source and target let length = distance(d.source, d.target); // calculate total number of inner nodes for this link let total = Math.round(scales.segments(length)); // create scales from source to target let xscale = d3 .scaleLinear() .domain([0, total + 1]) // source, inner nodes, target .range([d.source.x, d.target.x]); let yscale = d3 .scaleLinear() .domain([0, total + 1]) .range([d.source.y, d.target.y]); // initialize source node let source = d.source; let target = null; // add all points to local path let local = [source]; for (let j = 1; j <= total; j++) { // calculate target node target = { x: xscale(j), y: yscale(j) }; local.push(target); bundle.nodes.push(target); bundle.links.push({ source: source, target: target }); source = target; } local.push(d.target); // add last link to target node bundle.links.push({ source: target, target: d.target }); bundle.paths.push(local); }); return bundle; }34:Td13,function drawPolygons(svg) { const voronoiContainer = svg.append("g").attr("id", "voronoi"); // convert array of airports into geojson format const geojson = data.airports.map(function (airport) { return { type: "Feature", properties: airport, geometry: { type: "Point", coordinates: [airport.longitude, airport.latitude] } }; }); // Use existing HTML tooltip div (created in map cell) const tip = d3.select("#airport-tooltip"); // calculate voronoi polygons const polygons = geoVoronoi.geoVoronoi().polygons(geojson); // console.log(polygons); voronoiContainer .selectAll("path") .data(polygons.features) .enter() .append("path") .attr("d", d3.geoPath(projection)) .attr("class", "voronoi") .on("mouseover", function (e, d) { // d.properties is the airport object we created above const airport = d.properties; // highlight bubble if (airport && airport.bubble) d3.select(airport.bubble).classed("highlight", true); // highlight flight paths (airport.flights is an array of DOM path elements) if (airport && airport.flights && airport.flights.length) { d3.selectAll(airport.flights).classed("highlight", true).raise(); } // show HTML tooltip and position it near the airport point inside the SVG if (tip.empty()) return; // tooltip content tip.style("display", "block").html(` ${airport.name || airport.code || ""}
${airport.iata ? `IATA: ${airport.iata}
` : ""} ${ airport.city ? `${airport.city}${ airport.country ? ", " + airport.country : "" }
` : "" } Out: ${d3.format(",")( airport.outgoing || 0 )} • In: ${d3.format(",")(airport.incoming || 0)} `); // position tooltip near airport.x, airport.y relative to the page const svgRect = svg.node().getBoundingClientRect(); const pad = 12; const tipNode = tip.node(); const tw = tipNode.offsetWidth || 120; const th = tipNode.offsetHeight || 30; // airport.x/y are SVG coordinates (pixels) relative to svg origin let left = svgRect.left + (airport.x || 0) + pad; let top = svgRect.top + (airport.y || 0) + pad; // keep inside viewport if (left + tw + pad > window.innerWidth) left = svgRect.left + (airport.x || 0) - tw - pad; if (top + th + pad > window.innerHeight) top = svgRect.top + (airport.y || 0) - th - pad; tip.style("left", `${left}px`).style("top", `${top}px`); }) .on("mouseout", function (e, d) { // d.properties is the airport object const airport = d.properties; if (airport && airport.bubble) d3.select(airport.bubble).classed("highlight", false); if (airport && airport.flights && airport.flights.length) { d3.selectAll(airport.flights).classed("highlight", false); } // hide tooltip d3.select("#airport-tooltip").style("display", "none"); }) .on("dblclick", function (e, d) { // toggle voronoi outline const toggle = d3.select(this).classed("highlight"); d3.select(this).classed("highlight", !toggle); }); }35:Tc76,function drawWidthLegend(svg, opts = {}) { const { x = 10, y = 60, totalWidth = 220, segments = 5, labelOffset = 12, title = theme, titleOffsetX = 0 } = opts; if (!scales || !scales.width) { console.warn("scales.width is not available for legend"); return null; } const g = svg .append("g") .attr("class", "width-legend") .style("font-family", "sans-serif") .style("font-size", "11px") .style("pointer-events", "none"); // compute sample values (linear interpolation across domain) const scaleDomain = scales.width.domain(); // still [1, max] const domain0 = minCount; // override just for legend const domain1 = scaleDomain[1]; const sampleVals = []; for (let i = 0; i < segments; i++) { const t = segments === 1 ? 0.5 : i / (segments - 1); sampleVals.push(domain0 + t * (domain1 - domain0)); } const fmt = d3.format(".2s"); const strokeWidths = sampleVals.map((v) => Math.max(0.5, scales.width(v))); const maxStroke = Math.max(...strokeWidths); // layout: reserve pad so stroke doesn't overflow visual bounds // We will partition innerWidth into `segments` adjacent slabs. const pad = 0; // you can increase if you want breathing room at ends const innerStart = x + pad; const innerEnd = x + totalWidth - pad; const innerWidth = Math.max(0, innerEnd - innerStart); const slabWidth = innerWidth / segments; // each slab width (adjacent, not overlapping) const lineY = y - 8; // title g.append("text") .attr("x", x + titleOffsetX) .attr("y", y - 44) .attr("fill", "#333") .attr("font-weight", 600) .text(title); // baseline (visual guide) g.append("line") .attr("x1", innerStart) .attr("x2", innerEnd) .attr("y1", lineY) .attr("y2", lineY) .attr("stroke", "#eee") .attr("stroke-width", 1); // draw slabs that exactly meet: slab i runs [s, e) sampleVals.forEach((val, i) => { const s = innerStart + i * slabWidth; // ensure the last slab reaches the innerEnd exactly const e = i === segments - 1 ? innerEnd : innerStart + (i + 1) * slabWidth; const sw = strokeWidths[i]; // draw the slab as a line with butt caps so they meet exactly g.append("line") .attr("x1", s) .attr("x2", e) .attr("y1", lineY) .attr("y2", lineY) .attr("stroke", "#000") .attr("stroke-opacity", 0.8) .attr("stroke-width", sw) .attr("stroke-linecap", "butt"); // ensure no overhang // label centered on the slab const cx = (s + e) / 2; g.append("text") .attr("x", cx) .attr("y", lineY - labelOffset) .attr("text-anchor", "middle") .attr("fill", "#111") .text(fmt(val)); }); // captions for min/max aligned with baseline ends g.append("text") .attr("x", innerStart) .attr("y", lineY + maxStroke + 6) .attr("fill", "#666") .attr("text-anchor", "start") .text(d3.format(",")(Math.round(minCount))); g.append("text") .attr("x", innerEnd) .attr("y", lineY + maxStroke + 6) .attr("fill", "#666") .attr("text-anchor", "end") .text(d3.format(",")(Math.round(maxCount))); return g; }36:T470,function runParticles(ctx, paths) { const particles = []; const spawnScale = d3 .scaleSqrt() .domain(d3.extent(paths, (d) => d._flight?.count || 0)) .range([0.05, 2.5]); // dots per second const SPEED = 140; // px / second (constant!) let last = performance.now(); function frame(now) { const dt = (now - last) / 1000; last = now; ctx.clearRect(-1e6, -1e6, 2e6, 2e6); // spawn particles paths.forEach((p) => { if (!p._flight || !p._length) return; if (Math.random() < spawnScale(p._flight.count) * dt) { particles.push({ path: p, dist: 0 }); } }); // advance + draw for (let i = particles.length - 1; i >= 0; i--) { const d = particles[i]; d.dist += SPEED * dt; if (d.dist >= d.path._length) { particles.splice(i, 1); continue; } const p = d.path._pointAt(d.dist); ctx.beginPath(); ctx.arc(p.x, p.y, 1.5, 0, Math.PI * 2); ctx.fillStyle = "rgba(0,0,0,0.7)"; ctx.fill(); } requestAnimationFrame(frame); } requestAnimationFrame(frame); }37:T8eb,filteredFlights = { const flights = data.flights || []; // no limit or invalid value → return all flights if (!showTopN || showTopN <= 0) return flights; // -------------------------------------------------- // 1. Filter valid flights // -------------------------------------------------- let filtered = flights.filter((d) => { if (selectedAirport) { const sel = selectedAirport.toUpperCase(); return ( (d.origin === sel || d.destination === sel) && +d.count && d.availableCount ); } return +d.count && d.availableCount; }); // -------------------------------------------------- // 2. OPTIONAL: merge bidirectional flows // -------------------------------------------------- if (mergeFlows) { const merged = new Map(); for (const d of filtered) { const a = d.origin; const b = d.destination; // order-independent key (A|B == B|A) const key = a < b ? `${a}|${b}` : `${b}|${a}`; if (!merged.has(key)) { merged.set(key, { origin: a < b ? a : b, destination: a < b ? b : a, // summed values count: +d.count || 0, availableCount: +d.availableCount || 0, // keep references for geometry source: a < b ? d.source : d.target, target: a < b ? d.target : d.source, // optional: track originals if you need them later _flows: [d] }); } else { const m = merged.get(key); m.count += +d.count || 0; m.availableCount += +d.availableCount || 0; m._flows.push(d); } } filtered = Array.from(merged.values()); } // -------------------------------------------------- // 3. Sort // -------------------------------------------------- filtered.sort((a, b) => { if (theme === "Passengers carried") { return (+b.count || 0) - (+a.count || 0); } if (theme === "Empty seats") { return ( (+b.availableCount - +b.count || 0) - (+a.availableCount - +a.count || 0) ); } return 0; }); // -------------------------------------------------- // 4. Top-N // -------------------------------------------------- return filtered.slice(0, showTopN); }38:T128b,data = { // shallow copy of arrays so we can mutate safely let airports = eurostatData.airports.map((a) => Object.assign({}, a)); let flights = [...eurostatData.flights]; // Build fast lookup maps keyed by airport.code (or iata/icao) and by airport.iata (if present) const normKey = (a) => String(a && (a.code || a.iata || a.icao || "")).toUpperCase(); let codeMap = new Map(airports.map((a) => [normKey(a), a])); let iataMap = new Map( airports.filter((a) => a.iata).map((a) => [String(a.iata).toUpperCase(), a]) ); // Helper to resolve a flight endpoint token to an airport object. function resolveAirport(token) { if (!token && token !== 0) return null; const t = String(token).toUpperCase().trim(); // direct code match (try exact code/iata/icao) let a = codeMap.get(t) || iataMap.get(t); if (a) return a; // if token contains underscores, try last part (often the ICAO/IATA) if (t.includes("_")) { const last = t.split("_").pop(); a = codeMap.get(last) || iataMap.get(last); if (a) return a; } return null; } // --- First pass: attach source/target and filter flights --- flights = flights .map((f) => { const src = resolveAirport(f.origin); const tgt = resolveAirport(f.destination); return { ...f, source: src, target: tgt }; }) .filter((f) => f.source && f.target); // --- Reset airport counters --- for (const a of airports) { a.outgoing = 0; a.incoming = 0; a.availableOutgoing = 0; // NEW a.availableIncoming = 0; // NEW a.flightKeys = []; } // --- Recompute metrics from flights --- for (const f of flights) { if (!f.source || !f.target) continue; f.source.outgoing += f.count || 0; f.target.incoming += f.count || 0; f.source.availableOutgoing += f.availableCount || 0; // NEW f.target.availableIncoming += f.availableCount || 0; // NEW const key = `${String( f.source.code || f.source.iata || "" ).toUpperCase()}|${String( f.target.code || f.target.iata || "" ).toUpperCase()}`; f.source.flightKeys.push(key); f.target.flightKeys.push(key); } // --- Remove airports out of bounds or invalid --- airports = airports.filter( (a) => Number.isFinite(a.x) && Number.isFinite(a.y) && a.x >= 0 && a.y >= 0 ); airports = airports.filter((a) => (a.state || "") !== "NA"); airports = airports.filter( (a) => (a.outgoing || 0) > 0 && (a.incoming || 0) > 0 ); // --- Sort and limit --- airports.sort((a, b) => d3.descending(a.outgoing || 0, b.outgoing || 0)); const TOP_N = 50; airports = airports.slice(0, TOP_N); // --- Rebuild lookup maps --- codeMap = new Map(airports.map((a) => [normKey(a), a])); iataMap = new Map( airports.filter((a) => a.iata).map((a) => [String(a.iata).toUpperCase(), a]) ); // --- Filter flights between remaining airports --- flights = flights.filter((f) => { const sKey = String( f.origin || f.source?.code || f.source?.iata || "" ).toUpperCase(); const tKey = String( f.destination || f.target?.code || f.target?.iata || "" ).toUpperCase(); const s = codeMap.get(sKey) || iataMap.get(sKey); const t = codeMap.get(tKey) || iataMap.get(tKey); if (!s || !t) return false; f.source = s; f.target = t; f.origin = s.code || s.iata || s.icao || f.origin; f.destination = t.code || t.iata || t.icao || f.destination; return true; }); // --- Final recomputation of totals --- for (const a of airports) { a.outgoing = 0; a.incoming = 0; a.availableOutgoing = 0; // NEW a.availableIncoming = 0; // NEW a.flightKeys = []; } for (const f of flights) { const key = `${String( f.origin || f.source?.code || "" ).toUpperCase()}|${String( f.destination || f.target?.code || "" ).toUpperCase()}`; f.source.outgoing += f.count || 0; f.target.incoming += f.count || 0; f.source.availableOutgoing += f.availableCount || 0; // NEW f.target.availableIncoming += f.availableCount || 0; // NEW f.source.flightKeys.push(key); f.target.flightKeys.push(key); } // --- Compute airport totals --- for (const a of airports) { a.total = (a.incoming || 0) + (a.outgoing || 0); a.availableTotal = (a.availableIncoming || 0) + (a.availableOutgoing || 0); // NEW } // --- Clean extraneous runtime fields --- const stripAirport = (a) => { delete a.bubble; delete a.__on; delete a.__data__; delete a.vx; delete a.vy; delete a.fx; delete a.fy; for (const k of Object.keys(a)) if (typeof a[k] === "function") delete a[k]; }; airports.forEach(stripAirport); return { airports, flights }; }39:Tab1,kosovo60M = ({ type: "Topology", arcs: [ [ [235, 156], [-13, 46] ], [ [222, 202], [-96, 84] ], [ [117, 293], [-21, 42] ], [ [96, 335], [-58, -129] ], [ [126, 286], [-9, 7] ], [ [38, 206], [-38, -17] ], [ [287, 145], [-52, 11] ], [ [253, 0], [34, 145] ] ], transform: { scale: [0.004879722822299564, 0.0030138772626866006], translate: [20.352928393000074, 42.26281764300006] }, objects: { nutsbn_1: { type: "GeometryCollection", geometries: [ { type: "LineString", arcs: [0], properties: { eu: "F", efta: "F", cc: "T", lvl: 0, id: 1000002, co: "F", oth: "F" } }, { type: "LineString", arcs: [1], properties: { eu: "F", efta: "F", cc: "T", lvl: 0, id: 1000003, co: "F", oth: "F" } }, { type: "LineString", arcs: [2], properties: { eu: "F", efta: "F", cc: "T", lvl: 0, id: 1000004, co: "F", oth: "F" } }, { type: "LineString", arcs: [3], properties: { eu: "F", efta: "F", cc: "T", lvl: 0, id: 1000005, co: "F", oth: "F" } }, { type: "LineString", arcs: [4], properties: { eu: "F", efta: "F", cc: "T", lvl: 0, id: 1000006, co: "F", oth: "F" } }, { type: "LineString", arcs: [5], properties: { eu: "F", efta: "F", cc: "T", lvl: 0, id: 1000001, co: "F", oth: "F" } }, { type: "LineString", arcs: [6], properties: { eu: "F", efta: "F", cc: "T", lvl: 0, id: 1000007, co: "F", oth: "F" } }, { type: "LineString", arcs: [7], properties: { eu: "F", efta: "F", cc: "T", lvl: 0, id: 1000008, co: "F", oth: "F" } } ] } } })3a:T19dc,// fetch multiple Eurostat country datasets, build and merge into one network async function loadAndMergeEurostatCountries(countryCodes) { const passengersFilters = `format=JSON&tra_meas=PAS_CRD&unit=PAS&TIME=2024&freq=A`; const availableSeatsFilters = `format=JSON&tra_meas=ST_PAS&unit=SEAT&TIME=2024&freq=A`; const urlFor = (cc, filters) => `https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/avia_par_${cc}?${filters}`; // --- Fetch passengers and seats in parallel for all countries --- const [passengerFetches, availableFetches] = await Promise.all([ Promise.allSettled( countryCodes.map((cc) => d3.json(urlFor(cc, passengersFilters))) ), Promise.allSettled( countryCodes.map((cc) => d3.json(urlFor(cc, availableSeatsFilters))) ) ]); const okPassenger = []; const okAvailable = []; passengerFetches.forEach((r, i) => { if (r.status === "fulfilled" && r.value) okPassenger.push({ code: countryCodes[i], json: r.value }); else console.warn("failed passenger fetch for", countryCodes[i], r.reason); }); availableFetches.forEach((r, i) => { if (r.status === "fulfilled" && r.value) okAvailable.push({ code: countryCodes[i], json: r.value }); else console.warn( "failed available seats fetch for", countryCodes[i], r.reason ); }); // --- Combine both datasets per country --- const perCountry = countryCodes .map((cc) => { const p = okPassenger.find((d) => d.code === cc); const a = okAvailable.find((d) => d.code === cc); if (!p && !a) return null; try { const passengersBuilt = p ? buildFromEurostat(p.json, ourAirports, "passengers") : null; const availableBuilt = a ? buildFromEurostat(a.json, ourAirports, "available") : null; // Merge per-country passenger & available-seat data const flightsMap = new Map(); const collectFlights = (flights, type) => { if (!flights) return; for (const f of flights) { const key = `${f.origin}|${f.destination}`; if (!flightsMap.has(key)) { flightsMap.set(key, { origin: f.origin, destination: f.destination, count: 0, availableCount: 0 }); } const entry = flightsMap.get(key); if (type === "passengers") { entry.count += f.count || 0; } else if (type === "available") { // FIX: pull from f.availableCount, not f.count entry.availableCount += f.availableCount || f.count || 0; } } }; collectFlights(passengersBuilt?.flightsData, "passengers"); collectFlights(availableBuilt?.flightsData, "available"); const mergedFlights = Array.from(flightsMap.values()); const mergedAirports = passengersBuilt ? passengersBuilt.airportsData : availableBuilt?.airportsData || []; return { code: cc, built: { flightsData: mergedFlights, airportsData: mergedAirports } }; } catch (err) { console.error("buildFromEurostat failed for", cc, err); return null; } }) .filter(Boolean); // --- Merge airports across all countries --- const airportMap = new Map(); for (const { built } of perCountry) { for (const a of built.airportsData) { const key = (a.code || a.icao || a.iata || "").toString().toUpperCase(); if (!key) continue; if (!airportMap.has(key)) { airportMap.set( key, Object.assign({}, a, { flights: [], incoming: 0, availableIncoming: 0, outgoing: 0, availableOutgoing: 0 }) ); } else { const existing = airportMap.get(key); existing.name = existing.name || a.name; existing.iata = existing.iata || a.iata; existing.icao = existing.icao || a.icao; existing.city = existing.city || a.city; existing.country = existing.country || a.country; existing.latitude = existing.latitude ?? a.latitude; existing.longitude = existing.longitude ?? a.longitude; } } } // --- Merge all flights --- const flightMap = new Map(); for (const { built } of perCountry) { for (const f of built.flightsData) { const o = (f.origin || "").toString().toUpperCase(); const t = (f.destination || "").toString().toUpperCase(); if (!o || !t) continue; if (!airportMap.has(o) || !airportMap.has(t)) continue; const key = `${o}|${t}`; if (!flightMap.has(key)) { flightMap.set(key, { origin: o, destination: t, count: f.count || 0, availableCount: f.availableCount || 0 }); } else { const entry = flightMap.get(key); entry.count += f.count || 0; entry.availableCount += f.availableCount || 0; } } } // --- Finalize airports array --- const airportsArr = Array.from(airportMap.values()); const airportsByCode = new Map( airportsArr.map((a) => [ (a.code || a.icao || a.iata).toString().toUpperCase(), a ]) ); const flightsArr = Array.from(flightMap.values()) .map((f) => { const s = airportsByCode.get(f.origin); const t = airportsByCode.get(f.destination); if (!s || !t) return null; const edge = { origin: f.origin, destination: f.destination, count: f.count, availableCount: f.availableCount, source: s, target: t }; s.flights.push(edge); t.flights.push(edge); s.outgoing += f.count || 0; s.availableOutgoing += f.availableCount || 0; t.incoming += f.count || 0; t.availableIncoming += f.availableCount || 0; return edge; }) .filter(Boolean); // --- Compute totals --- airportsArr.forEach((a) => { a.total = (a.incoming || 0) + (a.outgoing || 0); a.availableTotal = (a.availableIncoming || 0) + (a.availableOutgoing || 0); }); airportsArr.sort((a, b) => b.total - a.total); airportsArr.forEach((a, i) => { a.index = i; }); return { airports: airportsArr, flights: flightsArr, perCountrySummary: perCountry.map((pc) => ({ code: pc.code, nAirports: pc.built.airportsData.length, nFlights: pc.built.flightsData.length })), fetched: countryCodes }; }3b:T515,function stripForExport(graph) { // graph can be canonical or runtime; this returns canonical form {airports, flights} const airports = (graph.airports || []).map((a) => { return { code: a.code, iata: a.iata, icao: a.icao, name: a.name, city: a.city, country: a.country, latitude: a.latitude, longitude: a.longitude, x: a.x, y: a.y, incoming: a.incoming || 0, outgoing: a.outgoing || 0, total: a.total || (a.incoming || 0) + (a.outgoing || 0), index: a.index, flightKeys: Array.isArray(a.flightKeys) ? [...a.flightKeys] : [] }; }); const flights = (graph.flights || []).map((f) => { const origin = typeof f.origin === "string" ? f.origin : f.source && (f.source.code || f.source.iata || f.source.icao); const destination = typeof f.destination === "string" ? f.destination : f.target && (f.target.code || f.target.iata || f.target.icao); return { key: f.key || `${String(origin).toUpperCase()}|${String(destination).toUpperCase()}`, origin: String(origin || "").toUpperCase(), destination: String(destination || "").toUpperCase(), count: f.count || 0 }; }); return { airports, flights }; }3c:T1fdd,function buildFromEurostat(json, ourAirports, mode = null) { if (!json || !json.id || !json.size || !json.dimension || !json.value) { throw new Error("Invalid Eurostat SDMX JSON input"); } const ids = json.id; const size = json.size; const dims = json.dimension; const values = json.value; const idxAirpPr = ids.indexOf("airp_pr"); const idxTime = ids.indexOf("time"); const idxTraMeas = ids.indexOf("tra_meas"); if (idxAirpPr === -1) throw new Error("SDMX JSON has no airp_pr dimension"); const multipliers = new Array(size.length); for (let i = 0; i < size.length; i++) { let m = 1; for (let j = i + 1; j < size.length; j++) m *= size[j]; multipliers[i] = m; } const buildIndexToKey = (dimMeta) => { const map = {}; if (!dimMeta || !dimMeta.category || !dimMeta.category.index) return map; for (const k of Object.keys(dimMeta.category.index)) { const idx = dimMeta.category.index[k]; map[idx] = k; } return map; }; const airpPrMap = buildIndexToKey(dims.airp_pr); const timeMap = idxTime !== -1 ? buildIndexToKey(dims.time) : null; const traMeasMap = idxTraMeas !== -1 ? buildIndexToKey(dims.tra_meas) : null; const routeAgg = new Map(); for (const flatKey in values) { const flatIndex = Number(flatKey); const v = values[flatKey]; let r = flatIndex; const coords = new Array(size.length); for (let i = 0; i < multipliers.length; i++) { const idx = Math.floor(r / multipliers[i]); coords[i] = idx; r = r % multipliers[i]; } const pairIdx = coords[idxAirpPr]; const pairKey = airpPrMap[pairIdx]; if (!pairKey) continue; let timeKey = null; if (timeMap && idxTime !== -1) { const tIdx = coords[idxTime]; timeKey = timeMap[tIdx] || String(tIdx); } // determine measurement type let traMeasKey = null; if (traMeasMap && idxTraMeas !== -1) { const tIdx = coords[idxTraMeas]; traMeasKey = traMeasMap[tIdx] || String(tIdx); } else if (mode) { // <-- NEW: fallback when tra_meas is filtered out traMeasKey = mode === "available" ? "ST_PAS" : "PAS_CRD"; } const parts = String(pairKey).split("_").map((s) => s.trim()); if (parts.length < 4) continue; const originTok = parts[1]; const destTok = parts[3]; const routeKey = `${originTok}|${destTok}`; const label = dims.airp_pr?.category?.label?.[pairKey] || pairKey; if (!routeAgg.has(routeKey)) { routeAgg.set(routeKey, { origin: originTok, destination: destTok, count: 0, availableCount: 0, times: timeKey ? {} : null, label }); } const entry = routeAgg.get(routeKey); if (traMeasKey === "ST_PAS") { entry.availableCount += v; if (timeKey) { if (!entry.times) entry.times = {}; entry.times[`${timeKey}_avail`] = (entry.times[`${timeKey}_avail`] || 0) + v; } } else { entry.count += v; if (timeKey) entry.times[timeKey] = (entry.times[timeKey] || 0) + v; } } // --- token -> human name best-effort from labels --- const tokenName = {}; for (const route of routeAgg.values()) { const lbl = route.label || ""; const p = lbl.split(/\s*-\s*/); if (p.length >= 2) { if (!tokenName[route.origin]) tokenName[route.origin] = p[0].trim(); if (!tokenName[route.destination]) tokenName[route.destination] = p[1].trim(); } else { if (!tokenName[route.origin]) tokenName[route.origin] = lbl; if (!tokenName[route.destination]) tokenName[route.destination] = lbl; } } // --- build OurAirports lookup maps --- const icaoMap = new Map(); const iataMap = new Map(); for (const r of ourAirports) { const icao = (r.icao_code || r.ident || "").trim().toUpperCase(); const iata = (r.iata_code || "").trim().toUpperCase(); const lat = r.latitude_deg !== "" ? +r.latitude_deg : null; const lon = r.longitude_deg !== "" ? +r.longitude_deg : null; const meta = { icao: icao || null, iata: iata || null, name: r.name || null, city: r.municipality || null, country: r.iso_country || null, latitude: Number.isFinite(lat) ? lat : null, longitude: Number.isFinite(lon) ? lon : null, raw: r }; if (icao) icaoMap.set(icao, meta); if (iata) iataMap.set(iata, meta); } // --- create airports map --- const airportsMap = new Map(); for (const route of routeAgg.values()) { const codes = [route.origin, route.destination]; for (const tokRaw of codes) { const tok = (tokRaw || "").toString().trim().toUpperCase(); if (airportsMap.has(tok)) continue; let meta = icaoMap.get(tok) || iataMap.get(tok); if (!meta && tok.includes("_")) { const last = tok.split("_").pop(); meta = icaoMap.get(last) || iataMap.get(last); } const nameFromLabel = tokenName[tok] || tok; const airport = { code: tok, iata: meta?.iata || null, icao: meta?.icao || null, name: meta?.name || nameFromLabel, city: meta?.city || null, country: meta?.country || null, latitude: meta?.latitude ?? null, longitude: meta?.longitude ?? null, x: null, y: null, outgoing: 0, availableOutgoing: 0, // <-- NEW incoming: 0, availableIncoming: 0, // <-- NEW flights: [], index: null, vx: 0, vy: 0, fx: null, fy: null }; airportsMap.set(tok, airport); } } // compute x,y for (const a of airportsMap.values()) { if (a.longitude != null && a.latitude != null) { try { const [x, y] = projection([a.longitude, a.latitude]); a.x = x; a.y = y; a.fx = x; a.fy = y; } catch (e) { a.x = a.y = null; } } } // --- build flights list --- const flights = []; for (const route of Array.from(routeAgg.values()).sort( (a, b) => b.count - a.count )) { const src = airportsMap.get(route.origin) || null; const dst = airportsMap.get(route.destination) || null; if (!src || src.latitude == null) continue; if (src) { src.outgoing += route.count; src.availableOutgoing += route.availableCount; } if (dst) { dst.incoming += route.count; dst.availableIncoming += route.availableCount; } const flight = { origin: route.origin, destination: route.destination, count: route.count, availableCount: route.availableCount, // <-- NEW label: route.label, times: route.times || undefined, source: src, target: dst }; flights.push(flight); if (src) src.flights.push(flight); if (dst) dst.flights.push(flight); } // --- finalize airports --- let airportsArr = Array.from(airportsMap.values()).map((a) => { a.total = (a.incoming || 0) + (a.outgoing || 0); a.availableTotal = (a.availableIncoming || 0) + (a.availableOutgoing || 0); // <-- NEW return a; }); airportsArr.sort((a, b) => b.total - a.total); airportsArr.forEach((a, i) => { a.index = i; }); const codeSet = new Set(airportsArr.map((a) => a.code)); const finalFlights = flights.filter( (f) => codeSet.has(f.origin) && codeSet.has(f.destination) ); // recompute totals for (const a of airportsArr) { a.incoming = 0; a.availableIncoming = 0; a.outgoing = 0; a.availableOutgoing = 0; a.flights = []; } for (const f of finalFlights) { const s = airportsArr.find((a) => a.code === f.origin); const t = airportsArr.find((a) => a.code === f.destination); if (!s || !t) continue; s.outgoing += f.count; s.availableOutgoing += f.availableCount; t.incoming += f.count; t.availableIncoming += f.availableCount; s.flights.push(f); t.flights.push(f); f.source = s; f.target = t; } return { airportsData: airportsArr, flightsData: finalFlights, meta: { totalRoutes: routeAgg.size, parsedValues: Object.keys(values).length } }; }3d:T9aa,// robust Eurostat multi-dimension TSV parser async function fetchEurostatMultiDimTSV(url) { const txt = await d3.text(url); // parse as rows (arrays) using tab as delimiter const rows = d3 .dsvFormat("\t") .parseRows(txt) .filter((r) => r.length > 0); if (rows.length === 0) return []; // header first row const headerRow = rows[0].map((c) => (typeof c === "string" ? c.trim() : c)); // the first header cell contains dimension names separated by commas, // with a trailing "\TIME_PERIOD" indicating the remaining headers are time periods // Example: "freq,unit,tra_meas,airp_pr\\TIME_PERIOD" const firstHeaderParts = headerRow[0].split(",").map((s) => s.trim()); // Remove a trailing backslash + TIME_PERIOD marker from the last part if present const last = firstHeaderParts[firstHeaderParts.length - 1]; const cleanedLast = last.replace(/\\?TIME_PERIOD$/i, "").trim(); firstHeaderParts[firstHeaderParts.length - 1] = cleanedLast; // time period headers are the rest of the headerRow (from index 1 onward) const timeHeaders = headerRow.slice(1).map((s) => s.trim()); // final header order: [dim1, dim2, ..., dimK, time1, time2, ...] const finalHeaders = firstHeaderParts.concat(timeHeaders); // Now parse data rows const data = []; for (let i = 1; i < rows.length; i++) { const row = rows[i]; // skip empty rows if (!row || row.length === 0) continue; // split first cell (dimension values) by comma const firstCellParts = (row[0] || "").split(",").map((s) => s.trim()); // combine with the rest of the row (time values) const rest = row .slice(1) .map((s) => (typeof s === "string" ? s.trim() : s)); const combined = firstCellParts.concat(rest); // If a row has fewer cells than finalHeaders, pad with nulls while (combined.length < finalHeaders.length) combined.push(null); // Build object const obj = {}; for (let j = 0; j < finalHeaders.length; j++) { const key = finalHeaders[j]; let val = combined[j]; // convert numeric-looking values (integer or decimal) to numbers if (typeof val === "string" && /^-?\d+(\.\d+)?$/.test(val)) { val = +val; } else if (typeof val === "string") { // trim extra whitespace val = val.trim(); // convert empty strings to null if (val === "") val = null; } obj[key] = val; } data.push(obj); } return data; }3e:[{"id":"ff213a64d327f8ea945f45b2a935019ef5a554b081b0b41238b07525299ddbf6bdbaa40c1a8be89d6ac3f2432271d6f9c76d622dddcf3365fe818da9fab06165","href":"https://static.observableusercontent.com/files/ff213a64d327f8ea945f45b2a935019ef5a554b081b0b41238b07525299ddbf6bdbaa40c1a8be89d6ac3f2432271d6f9c76d622dddcf3365fe818da9fab06165","name":"airports.csv","type":"text/csv","lastModified":1765279318148.608,"size":210365},{"id":"c7e17d7affec7080072517d0f3f5579d4d9aced9ff43b7c53ffef9fd8ec18102f42db55f617d3162407d374213b9447ab083a45612fe462a3037e3ded76b8764","href":"https://static.observableusercontent.com/files/c7e17d7affec7080072517d0f3f5579d4d9aced9ff43b7c53ffef9fd8ec18102f42db55f617d3162407d374213b9447ab083a45612fe462a3037e3ded76b8764","name":"flights.csv","type":"text/csv","lastModified":1765279318148.608,"size":65572},{"id":"c3651f06c35a5a186447b192bdbb36319d48a4a8dcca0d9f7735946490812e9a013bbb97bb2792a96bd74b03d7207c880bdddd822c45c7c1bb6d0bfd3d61206a","href":"https://static.observableusercontent.com/files/c3651f06c35a5a186447b192bdbb36319d48a4a8dcca0d9f7735946490812e9a013bbb97bb2792a96bd74b03d7207c880bdddd822c45c7c1bb6d0bfd3d61206a","name":"CNTR_RG_60M_2024_4326.geojson","type":"application/geo+json","lastModified":1765288943638.072,"size":878123},{"id":"c9bd9c5b1c8892f1c14407c49a3f51135538cd0e87b632654bd8a4257d05297a9689cf476f8c57a62d60b584a93cc97d87b39ad3fd206e6fe2a4fab5af23c615","href":"https://static.observableusercontent.com/files/c9bd9c5b1c8892f1c14407c49a3f51135538cd0e87b632654bd8a4257d05297a9689cf476f8c57a62d60b584a93cc97d87b39ad3fd206e6fe2a4fab5af23c615","name":"our-airports.csv","type":"text/csv","lastModified":1765287627487.265,"size":12453230}] 2e:{"title":"Passenger flights map","cells":[{"id":0,"value":"# Passenger flights map","pinned":false,"hidden":false,"mode":"md"},{"id":548,"value":"Visualising Eurostat's passenger flight data, directly from it's API.","pinned":false,"hidden":false,"mode":"md"},{"id":450,"value":"viewof selectedAirport = Inputs.select(\n new Map([\n [\"All airports\", null],\n ...data.airports.map((a) => [\n `${a.code || a.iata} — ${a.name}`,\n (a.code || a.iata).toUpperCase()\n ])\n ]),\n {\n label: \"Airport\",\n value: null\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"viewof theme = Inputs.select(\n [\n \"Passengers carried\",\n \"Empty seats\"\n //\"Empty seats x distance\"\n ],\n {\n label: \"Line width means...\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"viewof animate = Inputs.toggle({ label: \"Animate\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":701,"value":"viewof showTopN = Inputs.range([0, 1600], {\n label: \"Show top N flights\",\n step: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"viewof showEmptySeats = Inputs.toggle({\n label: \"Colour lines by empty seats\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"viewof edgeBundling = Inputs.toggle({ label: \"Edge bundling\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"viewof maxWidth = Inputs.range([0.5, 20], {\n label: \"Max line width\",\n step: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"viewof opacity = Inputs.range([0.1, 1], {\n label: \"Line opacity\",\n step: 0.1,\n value: 0.2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"viewof voronoi = Inputs.toggle({label: \"Voronoi\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"projection = d3\n .geoAzimuthalEqualArea()\n .rotate([-10, -52]) // EPSG:3035 center lon=10E, lat=52N\n .center([0, 0]) // after rotation, center must be 0,0\n .scale(1200) // adjust until EU fits your SVG\n .translate([580, 250]) // center of a 960×600 SVG","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"hypotenuse = Math.sqrt(width * width + height * height)","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"scales = ({\n // used to scale airport bubbles\n airports: d3.scaleSqrt().range([4, 18]),\n\n // used to scale number of segments per line in edge bundling\n segments: d3.scaleLinear().domain([0, hypotenuse]).range([1, 10]),\n\n //scale line widths\n width: d3.scaleLinear().domain([minCount, maxCount]).range([0.1, maxWidth]),\n\n //empty seats\n color: d3\n .scaleSequential()\n .domain(emptyExtent)\n .clamp(true)\n .interpolator(d3.interpolateReds)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"// draws the underlying map\nfunction drawMap(svg, map) {\n const basemap = svg.append(\"g\").attr(\"id\", \"basemap\");\n\n // use null projection; data is already projected\n const path = d3.geoPath().projection(projection);\n\n // draw base map\n let c = { ...countries };\n c.features = c.features.filter((f) =>\n countryCodes.includes(f.properties.CNTR_ID.toLowerCase())\n );\n basemap.append(\"path\").datum(c).attr(\"class\", \"land\").attr(\"d\", path);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"function drawColorLegend(svg, opts) {\n const x = opts.x || 10;\n const y = opts.y || 90;\n const legendNode = Legend(scales.color, {\n title: \"Share of seats that are empty (%)\",\n width: 150\n });\n\n svg\n .append(\"g\")\n .attr(\"class\", \"width-legend\")\n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", \"11px\")\n .style(\"pointer-events\", \"none\")\n .attr(\"transform\", `translate(${x},${y})`)\n .append(() => legendNode);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"function drawTitle(svg, text, opts = {}) {\n const {\n x = 10,\n y = 20,\n className = \"map-title\",\n fontFamily = \"sans-serif\",\n fontSize = \"17px\",\n fontWeight = 600\n } = opts;\n\n return svg\n .append(\"g\")\n .attr(\"class\", className)\n .attr(\"fill\", \"#333\")\n .style(\"pointer-events\", \"none\")\n .attr(\"transform\", `translate(${x},${y})`)\n .append(\"text\")\n .style(\"font-family\", fontFamily)\n .style(\"font-size\", fontSize)\n .style(\"font-weight\", fontWeight)\n .attr(\"dy\", \"0.8em\")\n .text(text);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"function startFlightAnimation(ctx, zoomLayer) {\n const bundle = generateSegments(data.airports, filteredFlights);\n\n // attach flights + length-based samplers\n bundle.paths.forEach((path) => {\n const first = path[0];\n const last = path.at(-1);\n if (!first || !last) return;\n\n const key = `${(first.code || \"\").toUpperCase()}|${(\n last.code || \"\"\n ).toUpperCase()}`;\n const f = flightByKey?.get?.(key);\n if (!f) return;\n\n path._flight = f;\n\n // temporary SVG path for geometry sampling\n const temp = zoomLayer\n .append(\"path\")\n .attr(\n \"d\",\n d3\n .line()\n .curve(d3.curveBundle)\n .x((d) => d.x)\n .y((d) => d.y)(path)\n )\n .node();\n\n const length = temp.getTotalLength();\n\n path._length = length;\n path._pointAt = (dist) => temp.getPointAtLength(Math.min(dist, length));\n\n temp.remove();\n });\n\n runParticles(ctx, bundle.paths);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"function createFlightCanvas(container, width, height) {\n const canvas = document.createElement(\"canvas\");\n canvas.width = width;\n canvas.height = height;\n canvas.style.position = \"absolute\";\n canvas.style.top = 0;\n canvas.style.left = 0;\n canvas.style.pointerEvents = \"none\";\n\n container.appendChild(canvas);\n\n return { canvas, ctx: canvas.getContext(\"2d\") };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"### CSS","pinned":false,"hidden":false,"mode":"md"},{"id":191,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":160,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":808,"value":"viewof mergeFlows = Inputs.toggle({\n label: \"Merge flows (to and from)\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"{\n const div = DOM.element(\"div\");\n const jsonBtn = button(data, \"data.json\");\n div.appendChild(jsonBtn);\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"maxCount = d3.max(filteredFlights, (d) => {\n if (theme === \"Passengers carried\") return d.count || null;\n if (theme === \"Empty seats\") {\n const seats = d.availableCount || 0;\n const passengers = d.count || 0;\n if (!seats) return null;\n return seats - passengers;\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"minCount = d3.min(filteredFlights, (d) => {\n if (theme === \"Passengers carried\") return d.count || null;\n if (theme === \"Empty seats\") {\n const seats = d.availableCount || 0;\n const passengers = d.count || 0;\n if (!seats) return null;\n return seats - passengers;\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"emptyExtent = d3.extent(filteredFlights, (d) => {\n const seats = d.availableCount || 0;\n const passengers = d.count || 0;\n\n if (seats <= 0) return null; // exclude invalid flights\n\n return ((seats - passengers) / seats) * 100; // 0 → 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"countries = await FileAttachment(\"CNTR_RG_60M_2024_4326.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"### Eurostat API","pinned":false,"hidden":false,"mode":"md"},{"id":261,"value":"Source: AVIA_PAR_XX","pinned":false,"hidden":false,"mode":"md"},{"id":383,"value":"countryCodes = [\n \"be\",\n \"bg\",\n \"dk\",\n \"de\",\n \"ee\",\n \"ie\",\n \"el\",\n \"es\",\n \"fr\",\n \"hr\",\n \"it\",\n \"cy\",\n \"lv\",\n \"lt\",\n \"lu\",\n \"hu\",\n \"mt\",\n \"nl\",\n \"at\",\n \"pl\",\n \"pt\",\n \"ro\",\n \"si\",\n \"sk\",\n \"se\",\n \"cz\",\n \"fi\",\n \"uk\",\n \"no\",\n \"ch\",\n \"tr\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"// usage in notebook\neurostatData = await loadAndMergeEurostatCountries(countryCodes) // returns merged {airports, flights, ...}","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"### Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":839,"value":"getAirportName = {\n // build lookup once per reactive update\n const map = new Map(\n (data.airports || []).flatMap((a) => {\n const entries = [];\n if (a.iata) entries.push([a.iata.toUpperCase(), a.name]);\n if (a.icao) entries.push([a.icao.toUpperCase(), a.name]);\n if (a.code) entries.push([a.code.toUpperCase(), a.name]);\n return entries;\n })\n );\n\n // return lookup function\n return function (code) {\n if (!code) return null;\n return map.get(String(code).toUpperCase()) || null;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"function contrastBadge(text, color, opts = {}) {\n const {\n padding = \"2px 6px\",\n radius = \"4px\",\n fontWeight = 600,\n lightThreshold = 0.6,\n lightText = \"#fff\",\n darkText = \"#000\"\n } = opts;\n\n const c = d3.color(color);\n if (!c) return text;\n\n // relative luminance (good enough for sRGB)\n const luminance = (0.299 * c.r + 0.587 * c.g + 0.114 * c.b) / 255;\n\n const textColor = luminance > lightThreshold ? darkText : lightText;\n\n return `\n \n ${text}\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"flightByKey = {\n return new Map(\n (filteredFlights || []).map((f) => {\n const origin = (\n f.origin ||\n f.source?.code ||\n f.source?.iata ||\n f.source?.icao ||\n \"\"\n )\n .toString()\n .toUpperCase();\n\n const dest = (\n f.destination ||\n f.target?.code ||\n f.target?.iata ||\n f.target?.icao ||\n \"\"\n )\n .toString()\n .toUpperCase();\n\n return [`${origin}|${dest}`, f];\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"format = (n) => n.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \" \")","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"ourAirports = FileAttachment(\"our-airports.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"// calculates the distance between two nodes\n// sqrt( (x2 - x1)^2 + (y2 - y1)^2 )\nfunction distance(source, target) {\n const dx2 = Math.pow(target.x - source.x, 2);\n const dy2 = Math.pow(target.y - source.y, 2);\n\n return Math.sqrt(dx2 + dy2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":141,"value":"geoVoronoi = require(\"d3-geo-voronoi\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"button = (data, filename = \"data.csv\") => {\n if (!data) throw new Error(\"Array of data required as first argument\");\n\n let downloadData;\n if (filename.includes(\".csv\")) {\n downloadData = new Blob([d3.csvFormat(data)], { type: \"text/csv\" });\n } else {\n const json = JSON.stringify(stripForExport(data), null, 2);\n downloadData = new Blob([json], {\n type: \"application/json\"\n });\n }\n\n const size = (downloadData.size / 1024).toFixed(0);\n const button = DOM.download(\n downloadData,\n filename,\n `Download ${filename} (~${size.toLocaleString(\"en-US\")} KB)`\n );\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}