const amplada = 1200;

const alçada = 500;

const marge = { superior: 50, dreta: 300, inferior: 70, esquerra: 80 };

const contenidor = d3.create("div");

const controles = contenidor

.append("div")

.style("display", "flex")

.style("gap", "10px")

.style("margin-bottom", "10px");

const inputAñoInicio = document.createElement("input");

inputAñoInicio.type = "number";

inputAñoInicio.placeholder = "Start Year";

const inputAñoFin = document.createElement("input");

inputAñoFin.type = "number";

inputAñoFin.placeholder = "End Year";

const botonSlider = document.createElement("button");

botonSlider.textContent = "Start Slider";

let sliderInterval = null;

// Crear el elemento SVG del gráfico

const svg = d3

.create("svg")

.attr("width", amplada)

.attr("height", alçada);

contenidor.node().appendChild(svg.node());

// Agregar título al gráfico

svg

.append("text")

.attr("x", amplada / 2)

.attr("y", 20)

.attr("text-anchor", "middle")

.attr("font-size", 20)

.attr("font-weight", "bold")

.text("Temperature Anomalies Over Time");

// --------------------------------------------------------------------

// Función para generar el band chart con anomalías positivas (rojo) y negativas (azul)

// --------------------------------------------------------------------

function generarBandChart(data) {

const añoInicio = Math.max(

+inputAñoInicio.value || d3.min(data, d => d.year),

d3.min(data, d => d.year)

);

const añoFin = Math.min(

+inputAñoFin.value || d3.max(data, d => d.year),

d3.max(data, d => d.year)

);

const datosFiltrados = data.filter(d => d.year >= añoInicio && d.year <= añoFin);

const escalaX = d3

.scaleLinear()

.domain([añoInicio, añoFin])

.range([marge.esquerra, amplada - marge.dreta]);

const escalaY = d3

.scaleLinear()

.domain([

d3.min(datosFiltrados, d => d.anomaly),

d3.max(datosFiltrados, d => d.anomaly)

])

.range([alçada - marge.inferior, marge.superior]);

svg.selectAll("path").remove();

svg.selectAll("g.axis").remove();

svg.selectAll(".band-line").remove();

svg.selectAll(".legend").remove();

const eixX = d3.axisBottom(escalaX).tickFormat(d3.format("d"));

svg

.append("g")

.attr("class", "axis")

.attr("transform", `translate(0,${alçada - marge.inferior})`)

.call(eixX);

svg

.append("text")

.attr("x", amplada / 2)

.attr("y", alçada - 10)

.attr("text-anchor", "middle")

.attr("font-size", 12)

.text("Year");

const eixY = d3.axisLeft(escalaY);

svg

.append("g")

.attr("class", "axis")

.attr("transform", `translate(${marge.esquerra},0)`)

.call(eixY);

svg

.append("text")

.attr("x", -(alçada / 2))

.attr("y", 20)

.attr("text-anchor", "middle")

.attr("font-size", 12)

.attr("transform", "rotate(-90)")

.text("Temperature Anomaly (°C)");

const dataBelow = datosFiltrados.map(d => ({

year: d.year,

anomaly: d.anomaly < 0 ? d.anomaly : 0

}));

const dataAbove = datosFiltrados.map(d => ({

year: d.year,

anomaly: d.anomaly > 0 ? d.anomaly : 0

}));

const areaBelow = d3

.area()

.x(d => escalaX(d.year))

.y0(escalaY(0))

.y1(d => escalaY(d.anomaly));

const areaAbove = d3

.area()

.x(d => escalaX(d.year))

.y0(escalaY(0))

.y1(d => escalaY(d.anomaly));

svg

.append("path")

.datum(dataBelow)

.attr("fill", "blue")

.attr("opacity", 0.5)

.attr("d", areaBelow);

svg

.append("path")

.datum(dataAbove)

.attr("fill", "red")

.attr("opacity", 0.5)

.attr("d", areaAbove);

const linea = d3

.line()

.x(d => escalaX(d.year))

.y(d => escalaY(d.anomaly));

svg

.append("path")

.datum(datosFiltrados)

.attr("class", "band-line")

.attr("fill", "none")

.attr("stroke", "#333")

.attr("stroke-width", 1.5)

.attr("d", linea);

// Agregar leyenda

const legend = svg.append("g").attr("class", "legend").attr("transform", `translate(${amplada - 280}, ${marge.superior})`);

legend

.append("rect")

.attr("x", 0)

.attr("y", 0)

.attr("width", 15)

.attr("height", 15)

.attr("fill", "red");

legend

.append("text")

.attr("x", 20)

.attr("y", 12)

.text("Above Average Temperature")

.attr("font-size", 12);

legend

.append("rect")

.attr("x", 0)

.attr("y", 20)

.attr("width", 15)

.attr("height", 15)

.attr("fill", "blue");

legend

.append("text")

.attr("x", 20)

.attr("y", 32)

.text("Below Average Temperature")

.attr("font-size", 12);

}

// --------------------------------------------------------------------

// Función para iniciar/detener el slider

// --------------------------------------------------------------------

botonSlider.addEventListener("click", () => {

if (sliderInterval) {

clearInterval(sliderInterval);

sliderInterval = null;

botonSlider.textContent = "Start Slider";

} else {

const añoInicio = d3.min(temperature_historic21, d => d.year);

const añoFinMax = d3.max(temperature_historic21, d => d.year);

let añoActual = +inputAñoFin.value || añoInicio;

sliderInterval = setInterval(() => {

if (añoActual > añoFinMax) {

clearInterval(sliderInterval);

sliderInterval = null;

botonSlider.textContent = "Start Slider";

return;

}

inputAñoFin.value = añoActual;

generarBandChart(temperature_historic21);

if (añoActual >= 1980) {

añoActual++;

clearInterval(sliderInterval);

sliderInterval = setInterval(() => {

if (añoActual > añoFinMax) {

clearInterval(sliderInterval);

sliderInterval = null;

botonSlider.textContent = "Start Slider";

return;

}

inputAñoFin.value = añoActual;

generarBandChart(temperature_historic21);

añoActual++;

}, 500);

} else {

añoActual=añoActual+1;

}

}, 1);

botonSlider.textContent = "Stop Slider";

}

});

// --------------------------------------------------------------------

// Llamar a la función con el dataset por defecto

// --------------------------------------------------------------------

inputAñoInicio.value = d3.min(temperature_historic21, d => d.year);

inputAñoFin.value = d3.max(temperature_historic21, d => d.year);

generarBandChart(temperature_historic21);

inputAñoInicio.addEventListener("change", () => generarBandChart(temperature_historic21));

inputAñoFin.addEventListener("change", () => generarBandChart(temperature_historic21));

// --------------------------------------------------------------------

// Devolvemos el contenedor completo

// --------------------------------------------------------------------

return contenidor.node();

}

// ---------------------------

// 1. CONFIGURACIÓN DEL CONTENEDOR

// ---------------------------

const container = d3.select(DOM.element("div"))

.style("position", "relative")

.style("width", width + "px")

.style("height", "720px"); // altura fija para el gráfico

// ---------------------------

// 2. CONFIGURACIÓN DEL CANVAS

// ---------------------------

const dpr = window.devicePixelRatio || 1;

const height = Math.min(width, 680);

const canvas = d3.create("canvas")

.attr("width", dpr * width)

.attr("height", dpr * height)

.style("width", width + "px")

.style("height", height + "px");

container.node().appendChild(canvas.node());

const context = canvas.node().getContext("2d");

context.scale(dpr, dpr);

// ---------------------------

// 3. CREACIÓN DEL SLIDER PARA SELECCIONAR EL AÑO

// ---------------------------

let currentYear = 2022; // Año inicial

const slider = container.append("input")

.attr("type", "range")

.attr("min", 1960)

.attr("max", 2022)

.attr("step", 1)

.property("value", currentYear)

.style("position", "absolute")

.style("bottom", "10px")

.style("left", "50%")

.style("transform", "translateX(-50%)");

// ---------------------------

// 4. BOTÓN DE AUTO-PLAY

// ---------------------------

let autoPlay = false;

const autoPlayButton = container.append("button")

.text("Auto-play: OFF")

.style("position", "absolute")

.style("bottom", "10px")

.style("right", "10px")

.on("click", function() {

autoPlay = !autoPlay;

d3.select(this).text(`Auto-play: ${autoPlay ? "ON" : "OFF"}`);

});

// ---------------------------

// 5. CREACIÓN DE LA LEYENDA DE COLORES

// ---------------------------

const legendWidth = 150, legendHeight = 10, legendMargin = 10;

const legendSVG = container.append("svg")

.attr("width", legendWidth + 2 * legendMargin)

.attr("height", 60)

.style("position", "absolute")

.style("top", `50px`)

.style("left", "3%");

// Se crea el <defs> y el gradiente una única vez

const defs = legendSVG.append("defs");

const gradient = defs.append("linearGradient")

.attr("id", "legend-gradient")

.attr("x1", "0%")

.attr("x2", "100%")

.attr("y1", "0%")

.attr("y2", "0%");

// Rectángulo que muestra el gradiente

legendSVG.append("rect")

.attr("class", "legend-rect")

.attr("x", 0)

.attr("y", 0)

.attr("width", legendWidth)

.attr("height", 15) // Altura del rectángulo de colores

.style("fill", "url(#legend-gradient)");

// Grupo para el eje de la leyenda

const legendAxisGroup = legendSVG.append("g")

.attr("class", "legend-axis")

.attr("transform", `translate(0, ${15})`);

// ---------------------------

// 6. VARIABLES GLOBALES PARA LOS DATOS Y ESCALAS

// ---------------------------

let dataYear, co2ByCountry, maxCo2, colorScale;

// Escala para la leyenda (inicial; se actualizará luego)

let legendScale = d3.scaleLog()

.domain([1, 100])

.range([0, legendWidth]);

// ---------------------------

// FUNCIÓN PARA ACTUALIZAR LA LEYENDA DE COLORES

// ---------------------------

function updateLegend(maxCo2) {

// Actualizar dominio de la escala logarítmica según el máximo de CO₂

legendScale.domain([1, maxCo2]).range([0, legendWidth]);

// Definimos las paradas (stops) del gradiente

const stops = d3.range(0, 1.01, 0.1);

const stopsSelection = gradient.selectAll("stop")

.data(stops);

stopsSelection.enter().append("stop")

.merge(stopsSelection)

.attr("offset", d => (d * 100) + "%")

.attr("stop-color", d => {

// Interpolación logarítmica entre 1 y maxCo2

const value = Math.exp(Math.log(1) + d * (Math.log(maxCo2) - Math.log(1)));

return colorScale(value);

});

stopsSelection.exit().remove();

// Eje para mostrar los valores de la leyenda

const legendAxis = d3.axisBottom(legendScale)

.ticks(4)

.tickFormat(d3.format(".2s"));

legendAxisGroup.call(legendAxis);

}

// ---------------------------

// FUNCIÓN PARA FILTRAR LOS DATOS Y ACTUALIZAR LA ESCALA DE COLOR

// ---------------------------

function updateData(year) {

// Filtrar datos por año y limpiar la información

// Se asume que "data_temp" es la variable global que contiene los datos originales.

dataYear = data_temp

.map(d => ({

...d,

year: +d.year,

co2: +d.co2

}))

.filter(d =>

d.year === +year &&

!isNaN(d.co2) &&

d.country && d.country.trim() !== "" &&

d.co2 > 0

);

// Crear mapa: país (en minúsculas) → CO₂

co2ByCountry = new Map(dataYear.map(d => [d.country.toLowerCase().trim(), d.co2]));

// Calcular el valor máximo de CO₂

maxCo2 = d3.max(dataYear, d => d.co2);

// Escala de color (logarítmica) usando d3.interpolateInferno

colorScale = d3.scaleSequentialLog(d3.interpolateInferno)

.domain([1, maxCo2]);

// Actualizar la leyenda con el nuevo valor máximo

updateLegend(maxCo2);

}

// Inicializar datos para el año por defecto

updateData(currentYear);

// ---------------------------

// 7. CONFIGURAR LA PROYECCIÓN Y EL PATH

// ---------------------------

const projection = d3.geoOrthographic()

.fitExtent([[10, 80], [width - 10, height - 10]], { type: "Sphere" });

const path = d3.geoPath(projection, context);

// ---------------------------

// 8. INTERACCIÓN: ROTACIÓN AUTOMÁTICA Y MOVIMIENTO MANUAL (DRAG)

// ---------------------------

let rotationAngle = 0;

let autoRotate = true; // Controla la rotación automática

let initialRotation, dragStartPos;

d3.select(canvas.node())

.call(d3.drag()

.on("start", function(event) {

autoRotate = false; // Desactivar auto-rotación al iniciar el drag

initialRotation = projection.rotate();

dragStartPos = [event.x, event.y];

})

.on("drag", function(event) {

const dx = event.x - dragStartPos[0];

const dy = event.y - dragStartPos[1];

const sensitivity = 0.5; // Sensibilidad de la rotación con el drag

// Ajustamos la rotación en longitud y latitud

let newLambda = initialRotation[0] + dx * sensitivity;

let newPhi = initialRotation[1] - dy * sensitivity;

newPhi = Math.max(-90, Math.min(90, newPhi)); // Limitar la latitud

projection.rotate([newLambda, newPhi]);

rotationAngle = newLambda; // Actualizar para reanudar la auto-rotación desde esta posición

draw(); // Redibujar

})

.on("end", function() {

// Reanudar auto-rotación después de un breve intervalo

setTimeout(() => { autoRotate = true; }, 100);

})

);

// ---------------------------

// 9. FUNCIÓN DE DIBUJO DEL GLOBO Y LOS PAÍSES

// ---------------------------

function draw() {

// Limpiar el canvas

context.clearRect(0, 0, width, height);

// Si está activa la rotación automática, actualizar el ángulo según el tiempo

if (autoRotate) {

rotationAngle = (performance.now() / 50) % 360;

projection.rotate([rotationAngle, -15]); // Pequeña inclinación en latitud

}

// DIBUJAR LA TIERRA (base)

context.beginPath();

path(land);

context.fillStyle = "#ccc";

context.fill();

// DIBUJAR LOS PAÍSES CON SU COLOR (según CO₂)

for (const feature of countries) {

context.beginPath();

path(feature);

const countryName = feature.properties.name?.toLowerCase().trim();

const co2Value = co2ByCountry.get(countryName);

const fillColor = (co2Value != null) ? colorScale(co2Value) : "#eee";

context.fillStyle = fillColor;

context.fill();

}

// DIBUJAR FRONTERAS DE LOS PAÍSES

context.beginPath();

path(borders);

context.strokeStyle = "#fff";

context.lineWidth = 0.5;

context.stroke();

// DIBUJAR EL CONTORNO DE LA ESFERA

context.beginPath();

path({ type: "Sphere" });

context.strokeStyle = "#000";

context.lineWidth = 1.5;

context.stroke();

// DIBUJAR TÍTULO ENCIMA DEL GLOBO

context.save();

context.font = "bold 24px sans-serif";

context.textAlign = "center";

context.fillStyle = "black";

context.fillText("Country by CO₂ " + currentYear, width / 2, 30);

context.restore();

}

// ---------------------------

// 10. ACTUALIZAR LA VISUALIZACIÓN CUANDO CAMBIA EL AÑO (SLIDER)

// ---------------------------

slider.on("input", function() {

currentYear = +this.value;

updateData(currentYear);

draw();

});

// ---------------------------

// 11. AUTO-PLAY: CAMBIAR EL AÑO AUTOMÁTICAMENTE CADA 1s

// ---------------------------

setInterval(() => {

if (autoPlay) {

currentYear = currentYear + 1;

if (currentYear > +slider.attr("max")) {

currentYear = +slider.attr("min");

}

slider.property("value", currentYear);

updateData(currentYear);

draw();

}

}, 10);

// ---------------------------

// 12. ANIMACIÓN: ROTACIÓN AUTOMÁTICA DEL GLOBO (TIMER)

// ---------------------------

d3.timer(elapsed => {

if (autoRotate) {

rotationAngle = (elapsed / 50) % 360;

projection.rotate([rotationAngle, -15]);

}

draw();

});

// Retornamos el contenedor para que se muestre en Observable

return container.node();

}

// ---------------------------

// 1. CONFIGURACIÓN DEL CONTENEDOR

// ---------------------------

const container = d3.select(DOM.element("div"))

.style("position", "relative")

.style("width", width + "px")

.style("height", "720px"); // altura fija para el gráfico

// ---------------------------

// 2. CONFIGURACIÓN DEL CANVAS

// ---------------------------

const dpr = window.devicePixelRatio || 1;

const height = Math.min(width, 680);

const canvas = d3.create("canvas")

.attr("width", dpr * width)

.attr("height", dpr * height)

.style("width", width + "px")

.style("height", height + "px");

container.node().appendChild(canvas.node());

const context = canvas.node().getContext("2d");

context.scale(dpr, dpr);

// -------------------------------------

// 3. CREACIÓN DEL SLIDER PARA SELECCIONAR EL AÑO

// -------------------------------------

let currentYear = 2022; // Año inicial para el slider

const slider = container.append("input")

.attr("type", "range")

.attr("min", 1960)

.attr("max", 2022)

.attr("step", 1)

.property("value", currentYear)

.style("position", "absolute")

.style("bottom", "10px")

.style("left", "50%")

.style("transform", "translateX(-50%)");

// -------------------------------------

// 4. BOTÓN DE AUTO-PLAY (Cambia año automáticamente cada segundo)

// -------------------------------------

let autoPlay = false;

const autoPlayButton = container.append("button")

.text("Auto-play: OFF")

.style("position", "absolute")

.style("bottom", "10px")

.style("right", "10px")

.on("click", function() {

autoPlay = !autoPlay;

d3.select(this).text(`Auto-play: ${autoPlay ? "ON" : "OFF"}`);

});

// -------------------------------------

// 5. CREACIÓN DE LA LEYENDA DE COLORES

// -------------------------------------

// Dimensiones del SVG para la leyenda

const legendWidth = 300;

const legendHeight = 60;

// Se crea un <svg> para la leye

const legendSVG = container.append("svg")

.attr("width", legendWidth)

.attr("height", legendHeight + 30) // un poco más alto para acomodar el eje

.style("position", "absolute")

.style("top", "10px") // Se mueve a la parte superior

.style("right", "10px") // Se alinea hacia la derecha

.style("transform", "translateY(0)"); // Sin transformación adicional

// Definir el gradiente en <defs>

const defs = legendSVG.append("defs");

const gradient = defs.append("linearGradient")

.attr("id", "legend-gradient")

.attr("x1", "0%")

.attr("x2", "100%")

.attr("y1", "0%")

.attr("y2", "0%");

// Escala para la leyenda (inicialmente con valores de ejemplo que luego se actualizan)

let legendScale = d3.scaleLog()

.domain([1, 100])

.range([0, legendWidth]);

// Función que dibuja o actualiza la leyenda de colores

function updateLegend(maxCo2) {

// Se actualiza el dominio de la escala logarítmica según el máximo de CO₂

legendScale

.domain([1, maxCo2])

.range([0, legendWidth]);

// Creación / actualización de las paradas de color en el gradiente

const stops = d3.range(0, 1.01, 0.1);

gradient.selectAll("stop")

.data(stops)

.join("stop")

.attr("offset", d => (d * 100) + "%")

.attr("stop-color", d => {

// Interpolación logarítmica entre 1 y maxCo2

const value = Math.exp(Math.log(1) + d * (Math.log(maxCo2) - Math.log(1)));

return colorScale(value);

});

// Rectángulo que muestra el gradiente

legendSVG.selectAll("rect.legend-rect")

.data([null]) // Forzamos un único elemento

.join("rect")

.attr("class", "legend-rect")

.attr("x", 0)

.attr("y", 0)

.attr("width", legendWidth)

.attr("height", 15) // altura del rectángulo de colores

.style("fill", "url(#legend-gradient)");

// Eje para mostrar los valores de la escala

const legendAxis = d3.axisBottom(legendScale)

.ticks(4) // Cantidad de ticks

.tickFormat(d3.format(".2s")); // Formato (k, M, etc.)

legendSVG.selectAll("g.legend-axis")

.data([null])

.join("g")

.attr("class", "legend-axis")

.attr("transform", `translate(0, ${15})`) // El eje se coloca debajo del rectángulo

.call(legendAxis);

}

// ---------------------------------------------------

// 6. VARIABLES GLOBALES PARA LOS DATOS Y ESCALAS

// ---------------------------------------------------

let dataYear, co2ByCountry, maxCo2, colorScale;

// Función para filtrar los datos por año y actualizar la escala de color

function updateData(year) {

// Filtrar datos por año y limpiar

dataYear = data_temp

.map(d => ({

...d,

year: +d.year,

co2: +d.co2

}))

.filter(d =>

d.year === +year &&

!isNaN(d.co2) &&

d.country && d.country !== "" &&

d.co2 > 0

);

// Crear mapa país (en minúsculas) → valor CO₂

co2ByCountry = new Map(dataYear.map(d => [d.country.toLowerCase().trim(), d.co2]));

// Calcular el valor máximo de CO₂

maxCo2 = d3.max(dataYear, d => d.co2);

// Escala de color (logarítmica) usando d3.interpolateInferno

colorScale = d3.scaleSequentialLog(d3.interpolateInferno)

.domain([1, maxCo2]);

// Actualizar la leyenda con el nuevo valor máximo

updateLegend(maxCo2);

}

// Inicializar datos para el año por defecto

updateData(currentYear);

// ---------------------------------------------------

// 7. CONFIGURAR LA PROYECCIÓN Y EL PATH

// ---------------------------------------------------

const projection = d3.geoOrthographic()

.fitExtent([[10, 80], [width - 10, height - 10]], { type: "Sphere" });

const path = d3.geoPath(projection, context);

// ---------------------------------------------------

// 8. INTERACCIÓN: ROTACIÓN AUTOMÁTICA Y MOVIMIENTO MANUAL (DRAG)

// ---------------------------------------------------

let rotationAngle = 0;

let autoRotate = true; // Controla si el globo se rota automáticamente

let initialRotation, dragStartPos;

d3.select(canvas.node())

.call(d3.drag()

.on("start", function(event) {

autoRotate = false; // Desactivar auto-rotación al iniciar el drag

initialRotation = projection.rotate();

dragStartPos = [event.x, event.y];

})

.on("drag", function(event) {

const dx = event.x - dragStartPos[0];

const dy = event.y - dragStartPos[1];

const sensitivity = 0.5; // sensibilidad de la rotación con el drag

// Ajustamos la rotación en coordenadas λ (longitud) y φ (latitud)

let newLambda = initialRotation[0] + dx * sensitivity;

let newPhi = initialRotation[1] - dy * sensitivity;

newPhi = Math.max(-90, Math.min(90, newPhi)); // Limitar la latitud para no voltear el globo

// Aplicamos la nueva rotación a la proyección

projection.rotate([newLambda, newPhi]);

rotationAngle = newLambda; // Actualizar para reanudar la auto-rotación desde esta posición

draw(); // Redibujar

})

.on("end", function() {

// Reanudar auto-rotación después de un breve intervalo

setTimeout(() => {

autoRotate = true;

}, 100);

})

);

// ---------------------------------------------------

// 9. FUNCIÓN DE DIBUJO DEL GLOBO Y LOS PAÍSES

// ---------------------------------------------------

function draw() {

// Limpiar el canvas

context.clearRect(0, 0, width, height);

// Si está activa la rotación automática, actualizar el ángulo en función del tiempo

if (autoRotate) {

rotationAngle = (performance.now() / 50) % 360;

projection.rotate([rotationAngle, -15]); // pequeña inclinación en latitud

}

// DIBUJAR LA TIERRA (base)

context.beginPath();

path(land);

context.fillStyle = "#ccc";

context.fill();

// DIBUJAR LOS PAÍSES CON SU COLOR (según CO₂)

for (const feature of countries) {

context.beginPath();

path(feature);

const countryName = feature.properties.name?.toLowerCase().trim();

const co2Value = co2ByCountry.get(countryName);

const fillColor = (co2Value != null)

? colorScale(co2Value)

: "#eee"; // color gris claro si no hay datos

context.fillStyle = fillColor;

context.fill();

}

// DIBUJAR FRONTERAS DE LOS PAÍSES

context.beginPath();

path(borders);

context.strokeStyle = "#fff";

context.lineWidth = 0.5;

context.stroke();

// DIBUJAR EL CONTORNO DE LA ESFERA

context.beginPath();

path({ type: "Sphere" });

context.strokeStyle = "#000";

context.lineWidth = 1.5;

context.stroke();

// DIBUJAR TÍTULO ENCIMA DEL GLOBO

context.save();

context.font = "bold 24px sans-serif";

context.textAlign = "center";

context.fillStyle = "black";

context.fillText("Country by CO₂ " + currentYear, width / 2, 30);

context.restore();

}

// ---------------------------------------------------

// 10. ACTUALIZAR LA VISUALIZACIÓN CUANDO CAMBIA EL AÑO (SLIDER)

// ---------------------------------------------------

slider.on("input", function() {

currentYear = +this.value;

updateData(currentYear);

draw();

});

// ---------------------------------------------------

// 11. AUTO-PLAY: CAMBIAR EL AÑO AUTOMÁTICAMENTE CADA 1s

// ---------------------------------------------------

setInterval(() => {

if (autoPlay) {

currentYear = +currentYear + 1;

// Si se pasa del máximo, volver al mínimo

if (currentYear > +slider.attr("max")) {

currentYear = +slider.attr("min");

}

slider.property("value", currentYear);

updateData(currentYear);

draw();

}

}, 1000);

// ---------------------------------------------------

// 12. ANIMACIÓN: ROTACIÓN AUTOMÁTICA DEL GLOBO (TIMER)

// ---------------------------------------------------

d3.timer(elapsed => {

if (autoRotate) {

rotationAngle = (elapsed / 50) % 360;

projection.rotate([rotationAngle, -15]);

}

draw();

});

// Retornamos el contenedor completo para que Observable lo muestre

return container.node();

}

const height = Math.min(width, 720); // Observable ajusta un ancho *responsivo*

const dpr = window.devicePixelRatio ?? 1;

const canvas = d3.create("canvas")

.attr("width", dpr * width)

.attr("height", dpr * height)

.style("width", `${width}px`);

const context = canvas.node().getContext("2d");

context.scale(dpr, dpr);

.insert("h2", ":first-child") // Insertar antes del canvas

.style("text-align", "center")

.style("margin", "20px 0")

.text("Visualización de Emisiones de CO₂ y Datos Económicos por País");

const tooltip = d3.select("body").append("div")

.style("position", "absolute")

.style("visibility", "hidden")

.style("background", "rgba(0, 0, 0, 0.7)")

.style("color", "#fff")

.style("padding", "8px")

.style("border-radius", "4px")

.style("font-size", "20px");

const allowedCountries = [

"Bangladesh", "Pakistan", "Honduras", "Peru", "Colombia", "Panama",

"Venezuela", "Ukraine", "Portugal", "Chile", "Spain", "Russia",

"United States of America"

const tooltipData = [

{ country: "Bangladesh", population: 169384890, gdp_per_capita: 5067.96, gdp: 858143916032.0, co2: 113.863, co2_per_capita: 0.672 },

{ country: "Pakistan", population: 243700667, gdp_per_capita: 5412.89, gdp: 1318834929664.0, co2: 223.834, co2_per_capita: 0.918 },

{ country: "Honduras", population: 10463881, gdp_per_capita: 4755.21, gdp: 49738256384.0, co2: 10.482, co2_per_capita: 1.002 },

{ country: "Peru", population: 33475435, gdp_per_capita: 10205.64, gdp: 341677637632.0, co2: 54.793, co2_per_capita: 1.637 },

{ country: "Colombia", population: 51737944, gdp_per_capita: 14356.01, gdp: 742716997632.0, co2: 98.293, co2_per_capita: 1.9 },

{ country: "Panama", population: 4400772, gdp_per_capita: 21527.38, gdp: 94762123264.0, co2: 11.356, co2_per_capita: 2.58 },

{ country: "Venezuela", population: 28213016, gdp_per_capita: 5306.85, gdp: 149682061312.0, co2: 87.515, co2_per_capita: 3.102 },

{ country: "Ukraine", population: 41048767, gdp_per_capita: 7529.63, gdp: 309166669824.0, co2: 141.126, co2_per_capita: 3.438 },

{ country: "Portugal", population: 10417075, gdp_per_capita: 28386.33, gdp: 295712915456.0, co2: 40.687, co2_per_capita: 3.906 },

{ country: "Chile", population: 19553032, gdp_per_capita: 22925.68, gdp: 448338100224.0, co2: 82.537, co2_per_capita: 4.221 },

{ country: "Spain", population: 47828386, gdp_per_capita: 33979.78, gdp: 1625139970048.0, co2: 234.657, co2_per_capita: 4.906 },

{ country: "Russia", population: 145579890, gdp_per_capita: 25633.35, gdp: 3731440795648.0, co2: 1802.19, co2_per_capita: 12.379 },

{ country: "United States of America", population: 341534041, gdp_per_capita: 57065.98, gdp: 19493170446336.0, co2: 5078.871, co2_per_capita: 14.871 }

];

// Crear una proyección y un generador de rutas

const projection = d3.geoOrthographic().fitExtent([[10, 10], [width - 10, height - 10]], {type: "Sphere"});

const path = d3.geoPath(projection, context);

const tilt = 20;

// Calcular la escala de colores para los niveles de CO2

const co2Values = tooltipData.map(d => d.co2);

const colorScaleOrdinal = d3.scaleOrdinal()

.domain(allowedCountries)

.range([

"#d4f8d4", "#bdecb6", "#9fd89e", "#7fbf7f", "#5fa65f", "#387038",

"#ffe4b2", "#ffd29a", "#ffc080", "#ff9c4d", "#ff7a2e", "#ff4d4d", "#8b0000"

]);

function renderLegend() {

const legendWidth = 200;

const legendHeight = 20;

const gradientId = "co2-gradient";

// Crear un gradiente para la leyenda

const defs = d3.select(canvas.node().parentNode).append("svg")

.attr("width", legendWidth)

.attr("height", legendHeight + 30)

.append("defs");

const gradient = defs.append("linearGradient")

.attr("id", gradientId)

.attr("x1", "0%")

.attr("x2", "100%")

.attr("y1", "0%")

.attr("y2", "0%");

gradient.append("stop")

.attr("offset", "0%")

.attr("stop-color", "#add8e6");

gradient.append("stop")

.attr("offset", "100%")

.attr("stop-color", "#8b0000");

// Añadir la leyenda

const legendSvg = d3.select(canvas.node().parentNode).select("svg")

.append("g")

.attr("transform", `translate(10, 10)`);

legendSvg.append("rect")

.attr("width", legendWidth)

.attr("height", legendHeight)

.style("fill", `url(#${gradientId})`);

// Añadir etiquetas

legendSvg.append("text")

.attr("x", 0)

.attr("y", legendHeight + 15)

.style("fill", "#000")

.style("font-size", "12px")

.text(`Low CO2`);

legendSvg.append("text")

.attr("x", legendWidth)

.attr("y", legendHeight + 15)

.style("fill", "#000")

.style("font-size", "12px")

.style("text-anchor", "end")

.text(`High CO2`);

}

function render(country, arc, color) {

context.clearRect(0, 0, width, height);

context.beginPath(), path(land), context.fillStyle = "#ccc", context.fill();

context.beginPath(), path(country), context.fillStyle = color, context.fill();

context.beginPath(), path(borders), context.strokeStyle = "#fff", context.lineWidth = 0.5, context.stroke();

context.beginPath(), path({type: "Sphere"}), context.strokeStyle = "#000", context.lineWidth = 1.5, context.stroke();

context.beginPath(), path(arc), context.stroke();

return context.canvas;

}

let p1, p2 = [0, 0], r1, r2 = [0, 0, 0];

// Ordenar países según allowedCountries

const orderedCountries = allowedCountries.map(name =>

countries.find(country => country.properties.name === name)

).filter(Boolean); // Filtrar cualquier país no encontrado

renderLegend(); // Renderizar la leyenda

for (const country of orderedCountries) {

mutable name = country.properties.name;

const countryData = tooltipData.find(d => d.country === country.properties.name);

if (countryData) {

const color = colorScaleOrdinal(countryData.co2); // Asignar color basado en el nivel de CO2

tooltip.style("visibility", "visible")

.html(

`<strong>Country:</strong> ${countryData.country}<br>` +

`<strong>Population:</strong> ${countryData.population.toLocaleString()}<br>` +

`<strong>GDP:</strong> $${(countryData.gdp / 1e9).toFixed(2)}B<br>` +

`<strong>GDP per capita:</strong> $${countryData.gdp_per_capita.toLocaleString()}<br>` +

`<strong>CO2:</strong> ${countryData.co2.toFixed(2)} Mt<br>` +

`<strong>CO2 per capita:</strong> ${countryData.co2_per_capita.toFixed(3)} t`)

.style("top", `${height + 20}px`)

.style("left", `${width / 2}px`);

yield render(country, null, color); // Usar el color calculado

p1 = p2, p2 = d3.geoCentroid(country);

r1 = r2, r2 = [-p2[0], tilt - p2[1], 0];

const ip = d3.geoInterpolate(p1, p2);

const iv = Versor.interpolateAngles(r1, r2);

await d3.transition()

.duration(1250)

.tween("render", () => t => {

projection.rotate(iv(t));

render(country, {type: "LineString", coordinates: [p1, ip(t)]}, color);

})

.transition()

.tween("render", () => t => {

render(country, {type: "LineString", coordinates: [ip(t), p2]}, color);

})

.end();

tooltip.style("visibility", "hidden");

}

}

}

static fromAngles([l, p, g]) {

l *= Math.PI / 360;

p *= Math.PI / 360;

g *= Math.PI / 360;

const sl = Math.sin(l), cl = Math.cos(l);

const sp = Math.sin(p), cp = Math.cos(p);

const sg = Math.sin(g), cg = Math.cos(g);

return [

cl * cp * cg + sl * sp * sg,

sl * cp * cg - cl * sp * sg,

cl * sp * cg + sl * cp * sg,

cl * cp * sg - sl * sp * cg

];

}

static toAngles([a, b, c, d]) {

return [

Math.atan2(2 * (a * b + c * d), 1 - 2 * (b * b + c * c)) * 180 / Math.PI,

Math.asin(Math.max(-1, Math.min(1, 2 * (a * c - d * b)))) * 180 / Math.PI,

Math.atan2(2 * (a * d + b * c), 1 - 2 * (c * c + d * d)) * 180 / Math.PI

];

}

static interpolateAngles(a, b) {

const i = Versor.interpolate(Versor.fromAngles(a), Versor.fromAngles(b));

return t => Versor.toAngles(i(t));

}

static interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]) {

a2 -= a1, b2 -= b1, c2 -= c1, d2 -= d1;

const x = new Array(4);

return t => {

const l = Math.hypot(x[0] = a1 + a2 * t, x[1] = b1 + b2 * t, x[2] = c1 + c2 * t, x[3] = d1 + d2 * t);

x[0] /= l, x[1] /= l, x[2] /= l, x[3] /= l;

return x;

};

}

static interpolate([a1, b1, c1, d1], [a2, b2, c2, d2]) {

let dot = a1 * a2 + b1 * b2 + c1 * c2 + d1 * d2;

if (dot < 0) a2 = -a2, b2 = -b2, c2 = -c2, d2 = -d2, dot = -dot;

if (dot > 0.9995) return Versor.interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]);

const theta0 = Math.acos(Math.max(-1, Math.min(1, dot)));

const x = new Array(4);

const l = Math.hypot(a2 -= a1 * dot, b2 -= b1 * dot, c2 -= c1 * dot, d2 -= d1 * dot);

a2 /= l, b2 /= l, c2 /= l, d2 /= l;

return t => {

const theta = theta0 * t;

const s = Math.sin(theta);

const c = Math.cos(theta);

x[0] = a1 * c + a2 * s;

x[1] = b1 * c + b2 * s;

x[2] = c1 * c + c2 * s;

x[3] = d1 * c + d2 * s;

return x;

};

}