2b:null 2c:["$","title",null,{"children":"Final Visual Test | Bill White's Workspace | Observable"}] 31:T9676,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; } } }); }32:T61aa,sineChart = { // ─── 1) INITIALIZATION & SETUP ───────────────────────────────────────── const margin = { top: 40, right: 120, bottom: 60, left: 80 }; const width = 1200 - margin.left - margin.right; const height = 600 - margin.top - margin.bottom; const curveType = d3.curveCardinal.tension(.75); const tooltip = d3.select("body") .append("div") .attr("class", "bar-tooltip") .style("position", "absolute") .style("pointer-events", "none") .style("padding", "4px 8px") .style("background", "rgba(0,0,0,0.7)") .style("color", "#fff") .style("font-size", "12px") .style("border-radius", "4px") .style("opacity", 0); const svg = d3.create("svg") .attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom]); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Color schema matching the main chart const bird_color = { "Whooping Crane": ["#C82333", "#F5D0D3", "#691218"], "Blue Heron": ["#3F76C3", "#D3E3F7", "#002F57"], "Golden Eagle": ["#D9A441", "#FBEAC7", "#864E00"], "Canada Goose": ["#2F2F2F", "#E0E0E0", "#000000"] }; // Chart state let currentMode = 'line'; // 'line' or 'bar' let selectedSpecies = null; let barData = null; // ─── 2) DATA PROCESSING ───────────────────────────────────────── // Extract latitude points from segment data function extractLatitudePoints(rawSegs, flockFilter = "All", maxYear = null) { const N = Object.keys(rawSegs.date).length; const points = []; for (let i = 0; i < N; i++) { const species = rawSegs.species[i]; const normalizedSpecies = species.replace(/_/g, ' '); const flock = rawSegs.flock[i]; const date = new Date(rawSegs.date[i]); const coords = rawSegs.coords[i]; // Apply flock filter if (flockFilter !== "All" && flock !== flockFilter) continue; // Apply year filter - exclude data after specified year if (maxYear !== null && date.getFullYear() > maxYear) continue; // Extract start and end latitudes from coordinate pairs if (coords && coords.length === 2) { const [startCoord, endCoord] = coords; // Add start point points.push({ species: normalizedSpecies, date: date, latitude: startCoord[1], // latitude is the second element longitude: startCoord[0], type: 'start', segmentIndex: i }); // Add end point with a slight time offset to show movement const endDate = new Date(date.getTime() + (24 * 60 * 60 * 1000)); // Add 1 day points.push({ species: normalizedSpecies, date: endDate, latitude: endCoord[1], longitude: endCoord[0], type: 'end', segmentIndex: i }); } } return points; } // Process distance data for bar chart function processDistanceData(rawSegs, targetSpecies, flockFilter = "All", maxYear = null) { const N = Object.keys(rawSegs.date).length; const monthlyData = new Map(); // key: "decade-month", value: {decade, month, distance, counts} for (let i = 0; i < N; i++) { const species = rawSegs.species[i]; const normalizedSpecies = species.replace(/_/g, ' '); const flock = rawSegs.flock[i]; const date = new Date(rawSegs.date[i]); const distance = rawSegs.distanceCount[i] || 0; // Remove this line: const counts = 1 || 0; (this was always 1) // Apply filters if (flockFilter !== "All" && flock !== flockFilter) continue; if (maxYear !== null && date.getFullYear() > maxYear) continue; if (normalizedSpecies !== targetSpecies) continue; // Calculate decade and month const year = date.getFullYear(); const decade = Math.floor(year / 10) * 10; // e.g., 1990, 1980, etc. const month = date.getMonth(); // 0-11 const key = `${decade}-${month}`; // Accumulate distance and count if (!monthlyData.has(key)) { monthlyData.set(key, { decade, month, distance: 0, counts: 0 }); // Initialize counts to 0 } monthlyData.get(key).distance += distance; monthlyData.get(key).counts += 1; // Increment count by 1 for each data point } // Convert to array, normalize distances, and sort const result = Array.from(monthlyData.values()) .map(d => ({ decade: d.decade, month: d.month, distance: d.counts > 0 ? d.distance / d.counts : 0 // Normalize: total distance / count })) .sort((a, b) => { if (a.month !== b.month) return a.month - b.month; return a.decade - b.decade; }); return result; } // Process the line chart data - filter out data after 1996 const latitudePoints = extractLatitudePoints(rawSegs, _flock || "All", 1996); // Group points by species and sort by date const speciesData = d3.group(latitudePoints, d => d.species); // Sort each species' points by date and remove duplicates speciesData.forEach((points, species) => { points.sort((a, b) => a.date - b.date); // Remove points that are too close in time and location (optional smoothing) const filtered = []; let lastPoint = null; points.forEach(point => { if (!lastPoint || point.date - lastPoint.date > 12 * 60 * 60 * 1000 || // 12 hours apart Math.abs(point.latitude - lastPoint.latitude) > 0.1) { // or significant lat change filtered.push(point); lastPoint = point; } }); speciesData.set(species, filtered); }); // ─── 3) SCALES & AXES ───────────────────────────────────────── // Calculate domains for line chart const allPoints = Array.from(speciesData.values()).flat(); const dateExtent = d3.extent(allPoints, d => d.date); const latExtent = d3.extent(allPoints, d => d.latitude); // Add padding to latitude range const latPadding = (latExtent[1] - latExtent[0]) * 0.1; const latRange = [latExtent[0] - latPadding, latExtent[1] + latPadding]; // Scales (will be updated based on mode) let xScale = d3.scaleTime().domain(dateExtent).range([0, width - 43]); let yScale = d3.scaleLinear().domain(latRange).range([height, 0]); // Create line generator const line = d3.line() .x(d => xScale(d.date)) .y(d => yScale(d.latitude)) .curve(curveType) .defined(d => !isNaN(d.latitude) && !isNaN(d.date)); // ─── 4) DRAW AXES ───────────────────────────────────────── // X-axis const xAxis = g.append("g") .attr("class", "x-axis") .attr("transform", `translate(0, ${height})`); // X-axis label const xLabel = g.append("text") .attr("class", "x-label") .attr("x", width / 2) .attr("y", height + margin.bottom - 10) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "14px") .attr("fill", "#666") .text("Date"); // Y-axis const yAxis = g.append("g") .attr("class", "y-axis"); // Y-axis label const yLabel = g.append("text") .attr("class", "y-label") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", -margin.left + 20) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "14px") .attr("fill", "#666") .text("Latitude (°N)"); // Grid container const gridContainer = g.append("g").attr("class", "grid-container"); // ─── 5) CHART CONTENT CONTAINERS ───────────────────────────────────────── const lineContainer = g.append("g").attr("class", "line-container"); const barContainer = g.append("g").attr("class", "bar-container"); // ─── 6) DRAW INITIAL LINE CHART ───────────────────────────────────────── function drawLineChart() { updateAxes(); const speciesNames = Array.from(speciesData.keys()).filter(name => bird_color[name]); // Create line paths for each species const speciesLines = lineContainer.selectAll(".species-line") .data(speciesNames) .join("path") .attr("class", "species-line") .attr("fill", "none") .attr("stroke", d => bird_color[d][0]) .attr("stroke-width", 3) .attr("stroke-opacity", 0.8) .attr("d", d => { const points = speciesData.get(d); return points && points.length > 1 ? line(points) : null; }) .style("cursor", "pointer"); // Add dots for individual data points speciesNames.forEach(species => { const points = speciesData.get(species); if (!points) return; lineContainer.selectAll(`.point-${species.replace(/\s+/g, '-')}`) .data(points) .join("circle") .attr("class", `point-${species.replace(/\s+/g, '-')}`) .attr("cx", d => xScale(d.date)) .attr("cy", d => yScale(d.latitude)) .attr("r", 2) .attr("fill", bird_color[species][0]) .attr("stroke", "white") .attr("stroke-width", 1) .style("opacity", 0.7); }); // Add click handlers for species lines speciesLines.on("click", function(event, species) { event.stopPropagation(); selectedSpecies = species; transitionToBarChart(species); }); // Add hover effects speciesLines .on("mouseover", function(event, species) { d3.select(this) .attr("stroke-width", 5) .attr("stroke-opacity", 1); speciesLines.filter(d => d !== species) .attr("stroke-opacity", 0.3); lineContainer.selectAll(`.point-${species.replace(/\s+/g, '-')}`) .style("opacity", 1) .attr("r", 3); }) .on("mouseout", function() { if (currentMode === 'line') { speciesLines .attr("stroke-width", 3) .attr("stroke-opacity", 0.8); speciesNames.forEach(species => { lineContainer.selectAll(`.point-${species.replace(/\s+/g, '-')}`) .style("opacity", 0.7) .attr("r", 2); }); } }); } // ─── 7) BAR CHART FUNCTIONS ───────────────────────────────────────── function transitionToBarChart(species) { currentMode = 'bar'; // Process distance data for selected species barData = processDistanceData(rawSegs, species, _flock || "All", 1996); if (barData.length === 0) { console.warn("No distance data found for species:", species); return; } // Hide line chart elements lineContainer.transition().duration(500).style("opacity", 0); // Clear any existing bar chart content barContainer.selectAll("*").remove(); barContainer.style("opacity", 1); // Ensure container is visible // Update scales for bar chart const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; xScale = d3.scaleBand() .domain(months) .range([0, width]) .padding(0.1); const maxDistance = d3.max(barData, d => d.distance); yScale = d3.scaleLinear() .domain([0, maxDistance]) .range([height, 0]); // Get unique decades and create color scale based on bird color const decades = [...new Set(barData.map(d => d.decade))].sort(); const baseColor = bird_color[species][0]; // Get the main bird color // Create varying intensities of the bird color const decadeColors = d3.scaleOrdinal() .domain(decades) .range(decades.map((decade, i) => { const intensity = 0.3 + (0.7 * i / (decades.length - 1)); // Range from 30% to 100% return d3.interpolate("white", baseColor)(intensity); })); // Group data by month const dataByMonth = d3.group(barData, d => d.month); // Create nested bar groups const monthGroups = barContainer.selectAll(".month-group") .data(months.map((month, i) => ({ month: month, monthIndex: i, data: dataByMonth.get(i) || [] }))) .join("g") .attr("class", "month-group") .attr("transform", d => `translate(${xScale(d.month)}, 0)`); const barWidth = xScale.bandwidth() / Math.max(decades.length, 1); // Create bars for each decade within each month monthGroups.each(function(monthData) { const group = d3.select(this); group.selectAll(".decade-bar") .data(monthData.data) .join("rect") .attr("class", "decade-bar") .attr("x", (d, i) => i * barWidth) .attr("y", height) // Start from bottom .attr("width", barWidth - 1) .attr("height", 0) // Start with no height .attr("fill", d => decadeColors(d.decade)) .attr("opacity", 0.8) // ── TOOLTIP EVENTS ───────────────────────────────────────────────────── .on("mouseover", function(event, d) { tooltip .style("opacity", 1) .html(`Avg Distance: ${d.distance.toFixed(1)} km`); }) .on("mousemove", function(event) { // Move the tooltip to follow the mouse, offset to avoid covering the bar tooltip .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function() { tooltip.style("opacity", 0); }) .transition() .duration(800) .delay((d, i) => i * 100) .attr("y", d => yScale(d.distance)) .attr("height", d => height - yScale(d.distance)); // Add decade labels on bars group.selectAll(".decade-label") .data(monthData.data) .join("text") .attr("class", "decade-label") .attr("x", (d, i) => i * barWidth + barWidth/2) .attr("y", d => yScale(d.distance) - 5) .attr("text-anchor", "middle") .attr("font-size", "10px") .attr("fill", "#333") .style("opacity", 0) .text(d => `${d.decade}s`) .transition() .duration(800) .delay((d, i) => i * 100 + 400) .style("opacity", 1); }); // Update axes and legend updateAxes(); updateLegend(species); // Update title updateTitle(`${species} - Distance Traveled by Month and Decade`); // Show back button backButton.transition().duration(300).style("opacity", 1); } function transitionToLineChart() { currentMode = 'line'; // Hide bar chart with proper cleanup barContainer.transition().duration(500).style("opacity", 0) .on("end", () => { barContainer.selectAll("*").remove(); // Reset bar container opacity for next use barContainer.style("opacity", 1); }); // Reset scales xScale = d3.scaleTime().domain(dateExtent).range([0, width]); yScale = d3.scaleLinear().domain(latRange).range([height, 0]); // Show line chart lineContainer.style("opacity", 0); // Reset opacity first lineContainer.transition().duration(500).style("opacity", 1); // Redraw line chart (clear and rebuild) lineContainer.selectAll("*").remove(); drawLineChart(); // Update axes and legend updateAxes(); updateLegend(); // Reset title updateTitle("Bird Migration Latitude Over Time"); selectedSpecies = null; barData = null; // Clear bar data reference } // ─── 8) AXIS UPDATE FUNCTIONS ───────────────────────────────────────── function updateAxes() { // Clear existing grid gridContainer.selectAll("*").remove(); if (currentMode === 'line') { // Line chart axes xAxis.transition().duration(500) .call(d3.axisBottom(xScale) .tickFormat(d3.timeFormat("%Y-%m")) .ticks(8)); yAxis.transition().duration(500) .call(d3.axisLeft(yScale) .tickFormat(d => `${d.toFixed(1)}°`) .ticks(8)); xLabel.text("Date"); yLabel.text("Latitude (°N)"); // Add vertical grid lines gridContainer.selectAll(".grid-line-x") .data(xScale.ticks(8)) .join("line") .attr("class", "grid-line-x") .attr("x1", d => xScale(d)) .attr("x2", d => xScale(d)) .attr("y1", 0) .attr("y2", height) .attr("stroke", "#f0f0f0") .attr("stroke-width", 1); // Add horizontal grid lines gridContainer.selectAll(".grid-line-y") .data(yScale.ticks(8)) .join("line") .attr("class", "grid-line-y") .attr("x1", 0) .attr("x2", width-43) .attr("y1", d => yScale(d)) .attr("y2", d => yScale(d)) .attr("stroke", "#f0f0f0") .attr("stroke-width", 1); } else { // Bar chart axes xAxis.transition().duration(500) .call(d3.axisBottom(xScale)); yAxis.transition().duration(500) .call(d3.axisLeft(yScale) .tickFormat(d => `${d.toFixed(0)} km`) .ticks(8)); xLabel.text("Month"); yLabel.text("Distance Traveled (km)"); // Add grid lines for bar chart gridContainer.selectAll(".grid-line-y") .data(yScale.ticks(8)) .join("line") .attr("class", "grid-line-y") .attr("x1", 0) .attr("x2", width) .attr("y1", d => yScale(d)) .attr("y2", d => yScale(d)) .attr("stroke", "#f0f0f0") .attr("stroke-width", 1); } } // ─── 9) LEGEND & TITLE ───────────────────────────────────────── const legend = g.append("g") .attr("class", "legend") .attr("transform", `translate(${width - 7}, ${height - 120})`); function updateLegend(species) { legend.selectAll("*").remove(); if (currentMode === 'line') { const speciesNames = Array.from(speciesData.keys()).filter(name => bird_color[name]); const legendItems = legend.selectAll(".legend-item") .data(speciesNames) .join("g") .attr("class", "legend-item") .attr("transform", (d, i) => `translate(0, ${i * 30})`); legendItems.append("line") .attr("x1", 0).attr("x2", 20).attr("y1", 0).attr("y2", 0) .attr("stroke", d => bird_color[d][0]) .attr("stroke-width", 3); legendItems.append("circle") .attr("cx", 10).attr("cy", 0).attr("r", 3) .attr("fill", d => bird_color[d][0]) .attr("stroke", "white") .attr("stroke-width", 1); legendItems.append("text") .attr("x", 30).attr("y", 5) .attr("font-family", "sans-serif") .attr("font-size", "12px") .attr("fill", "#333") .text(d => d); } else if (currentMode === 'bar' && barData) { // Get unique decades and create color scale based on bird color const decades = [...new Set(barData.map(d => d.decade))].sort(); const baseColor = bird_color[species][0]; // Get the main bird color // Create varying intensities of the bird color const decadeColors = d3.scaleOrdinal() .domain(decades) .range(decades.map((decade, i) => { const intensity = 0.3 + (0.7 * i / (decades.length - 1)); // Range from 30% to 100% return d3.interpolate("white", baseColor)(intensity); })); const legendItems = legend.selectAll(".legend-item") .data(decades) .join("g") .attr("class", "legend-item") .attr("transform", (d, i) => `translate(0, ${i * 25})`); legendItems.append("rect") .attr("x", 0).attr("y", -8) .attr("width", 15).attr("height", 15) .attr("fill", d => decadeColors(d)); legendItems.append("text") .attr("x", 25).attr("y", 5) .attr("font-family", "sans-serif") .attr("font-size", "12px") .attr("fill", "#333") .text(d => `${d}s`); } } const chartTitle = svg.append("text") .attr("class", "chart-title") .attr("x", (width + margin.left + margin.right) / 2) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "18px") .attr("font-weight", "bold") .attr("fill", "#333") .text("Bird Migration Latitude Over Time"); function updateTitle(text) { chartTitle.transition().duration(300).text(text); } // ─── 10) DATE TRACKING LINE ───────────────────────────────────────── const dateLine = g.append("line") .attr("class", "date-line") .attr("y1", 25) .attr("y2", height) .attr("stroke", "red") .attr("stroke-width", 2) .attr("stroke-dasharray", "5,5") .style("opacity", 0); const dateLabel = g.append("text") .attr("class", "date-label") .attr("y", 10) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("fill", "red") .style("opacity", 0); // ─── 11) BACK BUTTON ───────────────────────────────────────── const backButton = g.append("g") .attr("class", "back-button") .attr("transform", "translate(10, 10)") .style("cursor", "pointer") .style("opacity", 0); backButton.append("rect") .attr("x", 0).attr("y", 0) .attr("width", 80).attr("height", 30) .attr("rx", 5) .attr("fill", "#007bff") .attr("stroke", "#0056b3") .attr("stroke-width", 1); backButton.append("text") .attr("x", 40).attr("y", 20) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "12px") .attr("fill", "white") .text("← Back"); backButton.on("click", () => { backButton.transition().duration(300).style("opacity", 0); transitionToLineChart(); }); // ─── 12) INITIALIZATION ───────────────────────────────────────── drawLineChart(); updateLegend(); // ─── 13) PUBLIC API ───────────────────────────────────────── return Object.assign(svg.node(), { updateDateLine(date) { if (currentMode === 'line' && date && dateExtent[0] <= date && date <= dateExtent[1]) { const x = xScale(date); dateLine .attr("x1", x) .attr("x2", x) .style("opacity", 1); dateLabel .attr("x", x) .text(d3.timeFormat("%Y-%m-%d")(date)) .style("opacity", 1); } else { dateLine.style("opacity", 0); dateLabel.style("opacity", 0); } }, filterSpecies(activeSpecies) { if (currentMode === 'line') { lineContainer.selectAll(".species-line").each(function(species) { const line = d3.select(this); const shouldShow = !activeSpecies || species === activeSpecies; line.transition().duration(200) .attr("stroke-opacity", shouldShow ? 0.8 : 0.2); lineContainer.selectAll(`.point-${species.replace(/\s+/g, '-')}`) .transition().duration(200) .style("opacity", shouldShow ? 0.7 : 0.2); }); } }, get dateRange() { return dateExtent; }, get currentMode() { return currentMode; }, get selectedSpecies() { return selectedSpecies; }, // Method to programmatically switch to bar chart showBarChart(species) { if (currentMode === 'line') { transitionToBarChart(species); backButton.transition().duration(300).style("opacity", 1); } }, // Method to programmatically switch back to line chart showLineChart() { if (currentMode === 'bar') { transitionToLineChart(); } } }); }33:T4b7,rawSegs = { // Read both JSON files const [mainData, additionalData] = await Promise.all([ FileAttachment("merged_migration_final@4.json").json(), FileAttachment("G&Emerged_migration_final.json").json() ]); // Add 1 to every Blue Heron flock number in the main data Object.keys(mainData.flock).forEach(key => { if (mainData.species[key] === "Blue_Heron") { const currentFlock = parseInt(mainData.flock[key]); mainData.flock[key] = currentFlock + 1; } }); // Get the number of existing entries in mainData const mainDataLength = Object.keys(mainData.index).length; // Create a combined object with all the same structure const combinedData = {}; // Copy all fields from mainData Object.keys(mainData).forEach(field => { combinedData[field] = { ...mainData[field] }; }); // Append additionalData entries Object.keys(additionalData.index).forEach(key => { const newIndex = mainDataLength + parseInt(key); // Add each field from additionalData with the new index Object.keys(additionalData).forEach(field => { combinedData[field][newIndex] = additionalData[field][key]; }); }); return combinedData; }34:[{"id":"e0c1519aa9486b2c8e405694b7f7bd9c2ce0eccf1fc2d4b80bbdc2ad67e496a22d9bfaf9fb26a4d762fe38a1d7ddd993dbfb204276bbc5bb252ea3e9b23c3f8e","href":"https://static.observableusercontent.com/files/e0c1519aa9486b2c8e405694b7f7bd9c2ce0eccf1fc2d4b80bbdc2ad67e496a22d9bfaf9fb26a4d762fe38a1d7ddd993dbfb204276bbc5bb252ea3e9b23c3f8e","name":"merged_migration_final@5.json","type":"application/json","lastModified":1749065371769.612,"size":60789},{"id":"3c86dc37acc6bebb952ae61785f0d186f073881ad4a61549fc9c3de0cd8074162f5d65b1a51795d632a7f6c34b4d419f5ce456fdd281c8c9e04ac4dcb781ccd7","href":"https://static.observableusercontent.com/files/3c86dc37acc6bebb952ae61785f0d186f073881ad4a61549fc9c3de0cd8074162f5d65b1a51795d632a7f6c34b4d419f5ce456fdd281c8c9e04ac4dcb781ccd7","name":"merged_migration_final@6.json","type":"application/json","lastModified":1749065630554.645,"size":60804},{"id":"10ba3db84adddb27b6e02a32f87cd3cb5f962293c76d1ece1883be3ba481edabeda0871e886cc5b5957eb8ec9ff1a46fb8920de95fa999d3912615003602020d","href":"https://static.observableusercontent.com/files/10ba3db84adddb27b6e02a32f87cd3cb5f962293c76d1ece1883be3ba481edabeda0871e886cc5b5957eb8ec9ff1a46fb8920de95fa999d3912615003602020d","name":"merged_migration_final@7.json","type":"application/json","lastModified":1749065790618.275,"size":60804},{"id":"bb9d7059f9693c2f828958829b1dba6729123333fe3575f2cd3fa1a8eec52b91aa1a41aadb758b4bf2653c2a927ab8b1eda3e009457ecd75d77f9778d6f0833b","href":"https://static.observableusercontent.com/files/bb9d7059f9693c2f828958829b1dba6729123333fe3575f2cd3fa1a8eec52b91aa1a41aadb758b4bf2653c2a927ab8b1eda3e009457ecd75d77f9778d6f0833b","name":"merged_migration_final@8.json","type":"application/json","lastModified":1749066213666.319,"size":58186},{"id":"07e27a2af1c42b5987a1590f33d146a79b466d06f4e11f82ffe0c320c9c0980cb911d1312ef81404862343998421a3d1ae79b389b18d9a9224183064b9c991cf","href":"https://static.observableusercontent.com/files/07e27a2af1c42b5987a1590f33d146a79b466d06f4e11f82ffe0c320c9c0980cb911d1312ef81404862343998421a3d1ae79b389b18d9a9224183064b9c991cf","name":"G&Emerged_migration_final.json","type":"application/json","lastModified":1749066745003.842,"size":2153},{"id":"5e4ae01dd3607030f6fcd80536a4ce114b4a1d8f38c0ab80e8fb6ec9f0c8d29715cb47f669ecefbab0d20ca96dd546febc161b1bae3ae9838b87cefc69849ff4","href":"https://static.observableusercontent.com/files/5e4ae01dd3607030f6fcd80536a4ce114b4a1d8f38c0ab80e8fb6ec9f0c8d29715cb47f669ecefbab0d20ca96dd546febc161b1bae3ae9838b87cefc69849ff4","name":"generatorData@1.json","type":"application/json","lastModified":1748987752799.285,"size":535936},{"id":"2a9dc10da43bd4532e2f5e3a3ef44b2f34f141266878dfef5ce26e41ded46b1967eb82fde1e3144501ec52d6b1eca67c1bf9a228734ce238f6d145275a556bb4","href":"https://static.observableusercontent.com/files/2a9dc10da43bd4532e2f5e3a3ef44b2f34f141266878dfef5ce26e41ded46b1967eb82fde1e3144501ec52d6b1eca67c1bf9a228734ce238f6d145275a556bb4","name":"merged_migration_final@3.json","type":"application/json","lastModified":1748990455161.52,"size":53467},{"id":"304c6731ed6f93b9b3ebdb00496f2e68a9e64867e7875a5022ba9be43d581153de43c766e0f9edcdd93ec17c4dbdc53e720a94545a82f007b3ddf4b4f7a0eeef","href":"https://static.observableusercontent.com/files/304c6731ed6f93b9b3ebdb00496f2e68a9e64867e7875a5022ba9be43d581153de43c766e0f9edcdd93ec17c4dbdc53e720a94545a82f007b3ddf4b4f7a0eeef","name":"merged_migration_final@4.json","type":"application/json","lastModified":1748991532500.68,"size":53467}] 2f:{"id":"33932507daed5631","slug":null,"title":"Final Visual Test","thumbnail":"0b4af523b83f2e936744c9ffaddfeb18edb9759f5a1c1c4dc6dfb1cc6c2a7f14","access_level":"public","create_time":"$D2025-05-28T20:41:17.850Z","update_time":"$D2025-06-04T22:18:21.001Z","view_time":null,"first_public_time":"$D2025-07-15T18:03:59.329Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9f19e48362eaf88f","login":"bill-white-ws","name":"Bill White's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/76e03ecc8b6a89e9745443e702bac1ee1256915d1fc340d769c749ced0f4df45","tier":"starter_2024","bio":""},"version":669,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"be1fa205e6547a94","login":"bill-white","name":"Bill White","avatar_url":"https://avatars-next.observableusercontent.com/183c0626578de99f9801435b3f6187e7e619f85385ff09369122803174853794","tier":null,"bio":""}],"members":[{"type":"individual","id":"be1fa205e6547a94","login":"bill-white","name":"Bill White","avatar_url":"https://avatars-next.observableusercontent.com/183c0626578de99f9801435b3f6187e7e619f85385ff09369122803174853794","tier":null,"role":"editor"},{"type":"team","id":"9f19e48362eaf88f","login":"bill-white-ws","name":"Bill White's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/76e03ecc8b6a89e9745443e702bac1ee1256915d1fc340d769c749ced0f4df45","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Final Visual Test","cells":[{"id":0,"value":"# Final Visual Test","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"viewof date = Scrubber(\n d3.utcDay.every(15).range(\n new Date('1975-5-15'),\n new Date('2025-1-1')\n ),\n {\n format: d3.utcFormat(\"%Y %b %-d\"),\n loop: true,\n delay: 500\n }\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"update = chart.update(date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"sineupdate = sineChart.updateDateLine(date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"// Load both datasets\nworld = await d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-50m.json\");\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"viewof _flock = Inputs.select([1,2,3,4,5,\"All\"], {label: \"flock\", value: 2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"rawGen = await FileAttachment(\"generatorData@1.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"//import {Scrubber} from \"@mbostock/scrubber\"\nimport {Scrubber} from \"c1fb0a7e4b4d775d\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"