chart = { // ─── 1) INITIALIZATION LAYER ───────────────────────────────────────── const width = 2400, height = 1560; // Updated to your height setting const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // Color mapping for different energy types const gen_color = { Hydro: ["#5AC8D8", "#208898"], Coal: ["#4D4D4D", "#2A2A2A"], Solar: ["#FCE27D", "#D4AE32"], 'Natural Gas': ["#6BAED6", "#2E5E6D"], Petroleum: ["#2B3E50", "#1A2733"], Biofuel: ["#6BA539", "#3F7229"], Geothermal: ["#A9745F", "#6F473A"], Wind: ["#B9E1DF", "#8BA7B2"], Nuclear: ["#A4C400", "#6F8A00"] }; const bird_color = { "Whooping Crane": ["#C82333", "#F5D0D3","#691218"], "Blue Heron": ["#3F76C3", "#D3E3F7","#002F57"], "Golden Eagle": ["#D9A441", "#FBEAC7","#864E00"], "Canada Goose": ["#2F2F2F", "#E0E0E0","#000000"] }; // Add interaction handlers let activeLabel = null; // geoMercator with proper centering for our focus region const projection = d3.geoMercator() .center([-95, 37]) // Center on central US .scale(1800) .translate([width / 2, height / 2]); // functions to process raw data let parse_Date = d3.utcParse("%Y-%m"); const geoPath = d3.geoPath().projection(projection); // Filter for North American + Caribbean countries within our focus area const northAmericaAndCaribbean = { type: "FeatureCollection", features: topojson.feature(world, world.objects.countries).features .filter(d => { // North America + Caribbean country codes const includedCountries = [ "840", // United States "124", // Canada "484", // Mexico "192", // Cuba "214", // Dominican Republic "332", // Haiti "388", // Jamaica ]; return includedCountries.includes(d.id); }) .map(feature => { // Filter out remote islands and clip to focus region if (feature.geometry.type === "MultiPolygon") { const filteredCoordinates = feature.geometry.coordinates.filter(polygon => { const coords = polygon[0]; const lons = coords.map(c => c[0]); const lats = coords.map(c => c[1]); const minLon = Math.min(...lons); const maxLon = Math.max(...lons); const minLat = Math.min(...lats); const maxLat = Math.max(...lats); // Keep only polygons that intersect with our focus region return ( maxLon >= -130 && minLon <= -60 && // Within longitude bounds maxLat >= 15 && minLat <= 55 // Within latitude bounds ); }); if (filteredCoordinates.length > 0) { return { ...feature, geometry: { ...feature.geometry, coordinates: filteredCoordinates } }; } return null; } return feature; }) .filter(f => f !== null) }; // ─── 2) MAP LAYER ───────────────────────────────────────── // Create a group for all map content const mapGroup = svg.append("g"); // Draw the map const mapPath = mapGroup.append("path") .datum(northAmericaAndCaribbean) .attr("d", geoPath) .attr("fill", "#f2f2f2") .attr("stroke", "DarkGray") .attr("stroke-width", 1); // ─── 3) GENERATION LAYER ───────────────────────────── // add a new layer to the mapgroup for generator data const g = mapGroup.append("g") .attr("fill", "none") .attr("stroke", "#3F76C3"); // reference the generator data processed in python and format it correctly for d3 const G = Object.keys(rawGen.date).length; const gen_data = d3.range(G) .map(i => { // only include rows where lon/lat are numbers if (!isNaN(rawGen.longitude[i]) && !isNaN(rawGen.latitude[i])) { return { x: +rawGen.longitude[i], y: +rawGen.latitude[i], date: parse_Date(rawGen.date[i]), capacity: parseFloat(rawGen.capacity[i]), plantid: rawGen.plantid[i], plantName: rawGen.plantName[i], type: rawGen.Category[i] }; } // otherwise return null so it can be filtered out return null; }) .filter(d => d !== null); // Create tooltip div const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0) .style("position", "absolute") .style("background", "rgba(0, 0, 0, 0.8)") .style("color", "white") .style("border-radius", "5px") .style("padding", "10px") .style("font-size", "14px") .style("pointer-events", "none"); // Create generator dots with tooltip functionality const dot = g.selectAll("circle") .data(gen_data) .join("circle") .attr("cx", d => projection([d.x, d.y])[0]) .attr("cy", d => projection([d.x, d.y])[1]) .attr("r", 0) // Start with radius 0 .attr("stroke", d => gen_color[d.type] ? gen_color[d.type][1] : "#333") .attr("fill", d => gen_color[d.type] ? gen_color[d.type][0] : "#666") .attr("opacity", 0.75) .style("cursor", "pointer") // tooltip interaction .on("mouseover", function(event, d) { // Show tooltip tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html(` Plant Name: ${d.plantName}
Type: ${d.type}
Capacity: ${d.capacity.toFixed(2)} MW `) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 28) + "px"); // Highlight the dot d3.select(this) .transition() .duration(200) .attr("r", d => Math.max(5, d.capacity / 45)) .attr("opacity", 1); }) .on("mouseout", function(event, d) { // Hide tooltip tooltip.transition() .duration(500) .style("opacity", 0); // Return dot to normal size d3.select(this) .transition() .duration(200) .attr("r", d => Math.max(3, d.capacity / 55)) .attr("opacity", 0.75); }); // ─── 4) MIGRATION LAYER ───────────────────────────────────────── // reference the flight segment data processed in python and format it correctly for d3 const N = Object.keys(rawSegs.date).length; const migration = d3.range(N).map(i => ({ coords: rawSegs.coords[i], // [[lon1,lat1],[lon2,lat2]] date: new Date(rawSegs.date[i]), // Convert string to Date fossilCount: rawSegs.fossilCount[i], windCount: rawSegs.windCount[i], hydroCount: rawSegs.hydroCount[i], borderCount: rawSegs.borderCount[i], distanceCount: rawSegs.distanceCount[i], species: rawSegs.species[i], flock: rawSegs.flock[i] })); // Line generator for flight paths const lineGen = d3.line() .curve(d3.curveCardinal) .x(d => projection(d)[0]) .y(d => projection(d)[1]) .defined(d => { const projected = projection(d); return projected !== null && !isNaN(projected[0]) && !isNaN(projected[1]); }); // Create flight path lines const migrationGroup = mapGroup.append("g").attr("class", "migration-lines"); //call the line Gen function to project the coordinate data to the map points const flight = migrationGroup.selectAll("path.mig-line") .data(_flock === "All" ? migration : migration.filter(d => d.flock === _flock)) .join("path") .attr("class", "mig-line") .attr("fill", "none") .attr("stroke", d => bird_color[d.species.replace(/_/g, ' ')] ? bird_color[d.species.replace(/_/g, ' ')][0] : "#666") .attr("stroke-width", 2) .attr("d", d => { // Check if coords are valid before generating the line if (!d.coords || d.coords.length !== 2) { console.warn("Invalid coords:", d.coords); return null; } return lineGen(d.coords); }) .style("opacity", 0); // Start invisible // Pre-calculate path lengths for animation flight.each(function(d) { const path = this; if (path.getTotalLength) { // Check if path is valid const length = path.getTotalLength(); d3.select(path) .attr("stroke-dasharray", `${length} ${length}`) .attr("stroke-dashoffset", length); } }); // ─── 5) LEGEND LAYER ───────────────────────────────────────── // Generator Legend // Create legend container in bottom right const colorLegendContainer = svg.append("g") .attr("class", "color-legend-container") .attr("transform", `translate(${width - 265}, ${height - 420})`); // Position in bottom right // Add semi-transparent background for legend colorLegendContainer.append("rect") .attr("x", -20) .attr("y", -20) .attr("width", 235) .attr("height", 400) .attr("fill", "white") .attr("fill-opacity", 0.8) .attr("stroke", "#ccc") .attr("stroke-width", 2) .attr("rx", 10); // Add legend title colorLegendContainer.append("text") //.attr("x", 1) .attr("y", 8) .attr("font-family", "monospace") .attr("font-size", "24px") .attr("font-weight", "bold") .text("Generation Type"); // Get the generation types and colors const genTypes = Object.keys(gen_color); // Create legend items const colorLegend = colorLegendContainer.selectAll(".colorLegend") .data(genTypes) .enter().append("g") .attr("class", "colorLegend") .attr("transform", (_, i) => `translate(0, ${37 + i * 39})`) // Adjusted spacing and start position .style("cursor", "pointer"); // Add colored circles colorLegend.append("circle") .attr("cx", 20) .attr("cy", 0) .attr("r", 12) .attr("fill", d => gen_color[d][0]) .attr("stroke", d => gen_color[d][1]) .attr("stroke-width", 2); // Add horizontal separator lines between legend items (not after the last one) colorLegendContainer.selectAll(".separator-line") .data(genTypes.slice(0, -1)) // All birds except the last one .enter().append("line") .attr("class", "separator-line") .attr("x1", 30) // Start from left side .attr("x2", 160) // End at right side .attr("y1", (_, i) => 37 + (i + 1) * 39 - 19.5) // Position halfway between items .attr("y2", (_, i) => 37 + (i + 1) * 39 - 19.5) .attr("stroke", "#BFBFBF") // Light gray color .attr("stroke-width", 1) .attr("stroke-dasharray", "5,5"); // Dashed pattern // Add generation type labels colorLegend.append("text") .attr("x", 45) .attr("y", 7.5) .attr("font-family", "monospace") .attr("font-size", "22px") .text(d => d); // Add custom SVG icons as defs svg.append("defs").html(` ` ); // Bird species names and setup const birdNames = ["Blue Heron", "Whooping Crane", "Golden Eagle","Canada Goose"]; // Create legend container in bottom left const legendContainer = svg.append("g") .attr("class", "legend-container") .attr("transform", `translate(100, ${height - 400})`); // Position in bottom left // Add semi-transparent background for legend legendContainer.append("rect") .attr("x", -20) .attr("y", -20) .attr("width", 300) .attr("height", 355) .attr("fill", "white") .attr("fill-opacity", 0.8) .attr("stroke", "#ccc") .attr("stroke-width", 2) .attr("rx", 10); // Add legend title legendContainer.append("text") .attr("x", 20) .attr("y", 25) .attr("font-family", "monospace") .attr("font-size", "32px") .attr("font-weight", "bold") .text("Species Type"); // Create legend items const lineLegend = legendContainer.selectAll(".lineLegend") .data(birdNames) .enter().append("g") .attr("class", "lineLegend") .attr("transform", (_, i) => `translate(0, ${(i * 75)+55})`) .style("cursor", "pointer"); // Icon ID mapping const iconId = d3.scaleOrdinal() .domain(birdNames) .range(["#icon-blue-heron", "#icon-whooping-crane", "#icon-golden-eagle", "#icon-canada-goose"]); // Add bird icons lineLegend.append("use") .attr("href", d => iconId(d)) .attr("transform", "translate(0, 0) scale(2)"); // Add horizontal separator lines between legend items legendContainer.selectAll(".separator-line") .data(birdNames.slice(0, -1)) // All birds except the last one .enter().append("line") .attr("class", "separator-line") .attr("x1", -2.5) .attr("x2", 270) .attr("y1", (_, i) => (i + 1) * 75 + 37.5) // Position halfway between items .attr("y2", (_, i) => (i + 1) * 75 + 37.5) .attr("stroke", "#BFBFBF") .attr("stroke-width", 1) .attr("stroke-dasharray", "5,5"); // Add bird names lineLegend.append("text") .attr("x", 50) .attr("y", 33) .attr("font-family", "monospace") .attr("font-size", "28px") .text(d => d); // click handler lineLegend.on("click", function(event, clickedName) { activeLabel = (activeLabel === clickedName) ? null : clickedName; // 1) Change the map fill/stroke mapPath .transition().duration(100) .attr("fill", d => activeLabel === null ? "#f2f2f2" : bird_color[activeLabel][1]) .attr("stroke", d => activeLabel === null ? "DarkGray" : bird_color[activeLabel][2]); // 2) For each flight path, update opacity & stroke flight.each(function(d) { const path = d3.select(this); const normalizedSpecies = d.species.replace(/_/g, ' '); const newOpacity = (activeLabel === null) ? ((() => { const timeDiff = previousDate - d.date; const fadeTime = 10 * 365 * 24 * 60 * 60 * 1000; //10 years in ms return timeDiff < fadeTime ? 0.3 : 0.1; })()) : (normalizedSpecies === activeLabel ? 1 : 0.1); const newStroke = (normalizedSpecies === activeLabel) ? bird_color[activeLabel][0] : "#666"; path.style("opacity", newOpacity) .attr("stroke", newStroke); }); // 3) fade icons activeBirdIcons.forEach((icon, speciesKey) => { const norm = speciesKey.replace(/_/g, " "); const targetOpacity = (activeLabel === null || norm === activeLabel) ? 1 : 0.1; icon.transition("icon‐fade") .duration(200) .style("opacity", targetOpacity); }); // 4) Bold the selected legend text lineLegend.selectAll("text") .style("font-weight", d => d === activeLabel ? "bold" : "normal"); // 5) Update any stats cards updateStats(previousDate, 0); }); // mouseover/mouseout handlers for text decoration(underlining) lineLegend.on("mouseover", function() { d3.select(this).select("text") .style("text-decoration", "underline"); }) .on("mouseout", function() { d3.select(this).select("text") .style("text-decoration", "none"); }); // ─── 6) STATS CARDS LAYER ───────────────────────────────────────── // Create stats container in top right const statsContainer = svg.append("g") .attr("class", "stats-container") .attr("transform", `translate(${width - (300*4)}, 50)`); // Card configuration const cardConfig = [ { label: "Fossil Fuel Plants", key: "fossil", icon: "🏭", color: "darkgray" }, { label: "Wind Farms", key: "wind", icon: "🍃", color: "lightblue" }, { label: "Borders Crossed", key: "border", icon: "🛂", color: "lightgrey" }, { label: "Km Traveled", key: "distance", icon: "📏", color: "#add1f9" } ]; // Create individual cards const cards = statsContainer.selectAll(".stat-card") .data(cardConfig) .enter().append("g") .attr("class", "stat-card") .attr("transform", (_, i) => `translate(${i * 290}, 0)`); // Add card backgrounds cards.append("rect") .attr("width", 270) .attr("height", 100) .attr("rx", 15) .attr("fill", "white") .attr("stroke", d => d.color) .attr("stroke-width", 3) .attr("fill-opacity", 0.9); // Add icons cards.append("text") .attr("x", 27.5) .attr("y", 57.5) .attr("font-size", "40px") .text(d => d.icon); // Add labels cards.append("text") .attr("x", 92.5) .attr("y", 35) .attr("font-family", "sans-serif") .attr("font-size", "18px") .attr("fill", "#666") .text(d => d.label); // Add count values (initially 0) const countTexts = cards.append("text") .attr("class", "count-text") .attr("x", 90) .attr("y", 70) .attr("font-family", "monospace") .attr("font-size", "36px") .attr("font-weight", "bold") .attr("fill", d => d.color) .text("0"); // Function to update stats based on visible flights function updateStats(currentDate, timing) { let fossilSum = 0, windSum = 0, borderSum = 0, distSum = 0; // Fade logic const totalDuration = 10 * 365 * 24 * 60 * 60 * 1000; //10 years in ms if (activeLabel === null) { // No species selected - aggregate all species // sum ALL visible segments (those with date <= currentDate) migration.forEach(d => { if (d.date <= currentDate) { const age = currentDate - d.date; if (age <= totalDuration) { // Count all segments for all species that have been flown so far (are visible) distSum += (d.distanceCount/2) || 0; fossilSum += d.fossilCount || 0; windSum += d.windCount || 0; borderSum += d.borderCount || 0; } } }); } else { // Species selected - only count that species migration.forEach(d => { const normalizedSpecies = d.species.replace(/_/g, ' '); if (normalizedSpecies === activeLabel && d.date <= currentDate) { const age = currentDate - d.date; if (age <= totalDuration) { // Count all segments that have been flown so far (are visible) distSum += (d.distanceCount/2) || 0; fossilSum += d.fossilCount || 0; windSum += d.windCount || 0; borderSum += d.borderCount || 0; } } }); } // Reusable interpolation function const createInterpolator = function(d) { const current = isNaN(+this.textContent) ? 0 : +this.textContent; const target = isNaN(d) ? 0 : d; const i = d3.interpolateNumber(current, target); return t => this.textContent = Math.round(i(t)); }; countTexts.data([fossilSum, windSum, borderSum, distSum]) .transition().duration(timing) .tween("text", createInterpolator); } // ─── 7) "Animation Loop" ───────────────────────────────────────── // Initialize with earliest date let previousDate = -Infinity; let speciesQueues = new Map(); // Animation queue for each species let currentlyAnimating = new Map(); // Currently animating flight for each species let activeBirdIcons = new Map(); // Track active bird icons by species // Create a group for bird icons const birdIconGroup = mapGroup.append("g").attr("class", "bird-icons"); // Rercursive function to process the next flight in a species' queue function processSpeciesQueue(species) { if (!speciesQueues.has(species) || speciesQueues.get(species).length === 0) { currentlyAnimating.delete(species); return; } const queue = speciesQueues.get(species); const flightData = queue.shift(); // Remove first item from queue // Find the flight element const flightElement = flight.filter(d => d === flightData); // Check if this flight should be visible based on filter const normalizedSpecies = species.replace(/_/g, ' '); const shouldShow = activeLabel === null || normalizedSpecies === activeLabel; if (!shouldShow) { flightElement.style("opacity", 0); // Process next in queue processSpeciesQueue(species); return; } // Set initial visibility and color flightElement .style("opacity", 1) .attr("stroke", bird_color[normalizedSpecies] ? bird_color[normalizedSpecies][0] : "#666"); // Handle bird icon const birdIconId = iconId(normalizedSpecies); const startPoint = projection(flightData.coords[0]); const endPoint = projection(flightData.coords[1]); // Remove existing icon for this species if continuous flight if (activeBirdIcons.has(species)) { const existingIcon = activeBirdIcons.get(species); const existingPos = existingIcon.attr("transform"); // Check if this is a continuous flight (start point near previous end point) const prevEndMatch = existingPos.match(/translate$([\d.-]+),\s*([\d.-]+)$/); if (prevEndMatch) { const prevX = parseFloat(prevEndMatch[1]); const prevY = parseFloat(prevEndMatch[2]); const distance = Math.sqrt(Math.pow(startPoint[0] - prevX, 2) + Math.pow(startPoint[1] - prevY, 2)); if (distance < 25) { // Continuous flight threshold // Immediately remove old icon for seamless transition existingIcon.interrupt().remove(); } else { // Not continuous - fade out old icon existingIcon .transition() .duration(200) .style("opacity", 0) .remove(); } } } // Add new bird icon at start position const birdIcon = birdIconGroup.append("use") .attr("href", birdIconId) .attr("transform", `translate(${startPoint[0]}, ${startPoint[1]}) scale(1.5)`) .style("opacity", shouldShow ? 1 : 0); // Track this as the active icon for the species activeBirdIcons.set(species, birdIcon); // Get the path node for position calculation const pathNode = flightElement.node(); const pathLength = pathNode.getTotalLength(); // Animate the path drawing const transition = flightElement .transition() .duration(2000) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .on("interrupt", function() { // If interrupted (paused), keep bird where it is const currentTransform = birdIcon.attr("transform"); birdIcon.interrupt(); birdIcon.attr("transform", currentTransform); }) .on("end", function() { // Process next flight in queue when this one finishes processSpeciesQueue(species); }); // Animate the bird icon along the path const birdTransition = birdIcon .transition() .duration(2000) .ease(d3.easeLinear) .attrTween("transform", function() { return function(t) { // Get the position along the path at time t const distance = pathLength * t; const point = pathNode.getPointAtLength(distance); // Calculate rotation angle if desired (optional) let angle = 0; if (t < 0.99) { // Avoid edge case at the end const futurePoint = pathNode.getPointAtLength(Math.min(distance + 1, pathLength)); angle = Math.atan2(futurePoint.y - point.y, futurePoint.x - point.x) * 180 / Math.PI; } return `translate(${point.x}, ${point.y}) rotate(${angle}) scale(1.5)`; }; }); // Track current animation currentlyAnimating.set(species, {path: transition, bird: birdTransition}); } // ─── updated `update(date)` ─────────────────────────────────────────── return Object.assign(svg.node(), { update(date) { try { // Check if date is being scrubbed forward, backward, or stopped const isMovingForward = date > previousDate; const isMovingBackward = date < previousDate; const isStopped = date === previousDate && previousDate !== -Infinity; // Update stats cards (always update, even when stopped) updateStats(date, 300); // Handle generator dots if (isMovingForward) { dot.filter(d => d.date > previousDate && d.date <= date) .transition() .duration(250) .attr("r", d => Math.max(3, d.capacity / 55)); } if (isMovingBackward) { dot.filter(d => d.date <= previousDate && d.date > date) .transition() .duration(250) .attr("r", 0); } // Define fade durations const boldDuration = 5 * 365 * 24 * 60 * 60 * 1000; // 5 years const fadeDuration = 5 * 365 * 24 * 60 * 60 * 1000; // Additional 5 years to fade const totalDuration = boldDuration + fadeDuration; // 10 years total // Handle pause - interrupt all animations if (isStopped) { currentlyAnimating.forEach((animations, species) => { if (animations && animations.path) animations.path.interrupt(); if (animations && animations.bird) animations.bird.interrupt(); }); return; // Exit early on pause } // Handle backward scrubbing if (isMovingBackward) { // Interrupt all current animations currentlyAnimating.forEach((animations, species) => { if (animations && animations.path) animations.path.interrupt(); if (animations && animations.bird) animations.bird.interrupt(); }); currentlyAnimating.clear(); speciesQueues.clear(); // Remove all bird icons birdIconGroup.selectAll("*").remove(); activeBirdIcons.clear(); // Set all paths to their correct state for the new date flight.each(function(d) { const path = d3.select(this); const normalizedSpecies = d.species.replace(/_/g, ' '); if (d.date <= date) { // This flight should be visible const age = date - d.date; let targetOpacity; if (age <= boldDuration) { targetOpacity = 1; } else if (age <= totalDuration) { const fadeProgress = (age - boldDuration) / fadeDuration; targetOpacity = 1 - (fadeProgress * 0.95); } else { targetOpacity = 0.05; } // Apply species filter if (activeLabel !== null) { if (normalizedSpecies === activeLabel) { targetOpacity = targetOpacity; path.attr("stroke", bird_color[normalizedSpecies][0]); } else { targetOpacity = targetOpacity * 0.2; path.attr("stroke", "#999"); } } else { path.attr("stroke", bird_color[normalizedSpecies] ? bird_color[normalizedSpecies][0] : "#666"); } // Instantly set the path to drawn state path .attr("stroke-dashoffset", 0) .style("opacity", targetOpacity); } else { // This flight should be hidden path .style("opacity", 0) .attr("stroke-dashoffset", function() { return this.getTotalLength ? this.getTotalLength() : 0; }); } }); } // Handle forward scrubbing/animation if (isMovingForward) { // First, update existing visible paths flight.filter(d => d.date <= previousDate && d.date <= date) .each(function(d) { const path = d3.select(this); const normalizedSpecies = d.species.replace(/_/g, ' '); // Skip if currently animating const animations = currentlyAnimating.get(d.species); if (animations && animations.path && animations.path.node() === this) return; const age = date - d.date; let targetOpacity; if (age <= boldDuration) { targetOpacity = 1; } else if (age <= totalDuration) { const fadeProgress = (age - boldDuration) / fadeDuration; targetOpacity = 1 - (fadeProgress * 0.95); } else { targetOpacity = 0.05; } // Apply species filter if (activeLabel !== null) { if (normalizedSpecies === activeLabel) { targetOpacity = targetOpacity; path.attr("stroke", bird_color[normalizedSpecies][0]); } else { targetOpacity = targetOpacity * 0.2; path.attr("stroke", "#999"); } } else { path.attr("stroke", bird_color[normalizedSpecies] ? bird_color[normalizedSpecies][0] : "#666"); } path.transition().duration(300).style("opacity", targetOpacity); }); // Find NEW flight paths that should start animating const enteringFlights = flight.filter(d => d.date > previousDate && d.date <= date); const newFlights = enteringFlights.data(); // Group new flights by species and add to queues const flightsBySpecies = d3.group(newFlights, d => d.species); flightsBySpecies.forEach((speciesFlights, species) => { // Sort flights by date const sortedFlights = speciesFlights.sort((a, b) => a.date - b.date); // Initialize queue if needed if (!speciesQueues.has(species)) { speciesQueues.set(species, []); } // Add new flights to the species queue speciesQueues.get(species).push(...sortedFlights); // If nothing is currently animating for this species, start processing if (!currentlyAnimating.has(species)) { processSpeciesQueue(species); } }); } // Hide paths that are in the future flight.filter(d => d.date > date) .each(function(d) { const path = d3.select(this); // Stop any animation for this species if it's this path const animations = currentlyAnimating.get(d.species); if (animations && animations.path && animations.path.node() === this) { if (animations.path) animations.path.interrupt(); if (animations.bird) animations.bird.interrupt(); currentlyAnimating.delete(d.species); } // Remove from queue if present if (speciesQueues.has(d.species)) { const queue = speciesQueues.get(d.species); const index = queue.indexOf(d); if (index > -1) { queue.splice(index, 1); } } path .transition() .duration(500) .style("opacity", 0) .attr("stroke-dashoffset", function() { return this.getTotalLength ? this.getTotalLength() : 0; }); }); // Update previousDate for next iteration previousDate = date; } catch (error) { console.error("Error in update function:", error); // Continue updating previousDate even if there's an error previousDate = date; } } }); }