data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
{
// ---------------------------
// CONFIGURACIÓN DEL CONTENEDOR
// ---------------------------
// Se crea un contenedor <div> que contendrá el canvas y los controles.
const container = d3.select(DOM.element("div"))
.style("position", "relative")
.style("width", width + "px")
.style("height", "720px"); // altura fija para el gráfico
// ---------------------------
// 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);
// -------------------------------------
// CREACIÓN DEL SLIDER PARA SELECCIONAR EL AÑO
// -------------------------------------
let currentYear = 2022; // Valor 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%)");
// -------------------------------------
// 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"}`);
});
// -------------------------------------
// CREACIÓN DE LA LEYENDA DE COLORES
// -------------------------------------
const legendWidth = 300, legendHeight = 60;
const legendSVG = container.append("svg")
.attr("width", 300)
.attr("height", 300)
.style("position", "absolute")
.style("bottom", "60px")
.style("left", "50%")
.style("transform", "translateX(-50%)");
// 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%");
let legendScale; // Escala para el eje de la leyenda (se actualizará en updateData)
// ---------------------------------------------------
// 2. VARIABLES GLOBALES PARA LOS DATOS Y ESCALAS
// ---------------------------------------------------
let dataYear, co2ByCountry, maxCo2, colorScale;
// Función que actualiza los datos filtrados y la escala de color para el año indicado
function updateData(year) {
dataYear = data
.map(d => ({ ...d, year: +d.year, co2: +d.co2 }))
.filter(d =>
d.year === +year &&
!isNaN(d.co2) &&
d.country && d.country !== "" &&
d.co2 > 0
);
// Mapa: país en minúsculas → valor CO₂
co2ByCountry = new Map(dataYear.map(d => [d.country.toLowerCase().trim(), d.co2]));
// Escala de color con scaleSequentialLog y d3.interpolateInferno.
maxCo2 = d3.max(dataYear, d => d.co2);
colorScale = d3.scaleSequentialLog(d3.interpolateInferno)
.domain([1, maxCo2]);
// Actualizar gradiente de la leyenda (usamos 10 paradas)
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 => {
// Se interpola en el espacio logarítmico
const value = Math.exp(Math.log(1) + d * (Math.log(maxCo2) - Math.log(1)));
return colorScale(value);
});
// Escala para el eje de la leyenda
legendScale = d3.scaleLog()
.domain([1, maxCo2])
.range([0, legendWidth]);
}
// Inicializar datos para el año por defecto
updateData(currentYear);
// ---------------------------------------------------
// 3. CONFIGURAR LA PROYECCIÓN Y EL PATH
// ---------------------------------------------------
// Se deja espacio en la parte superior (fitExtent comienza en y = 80) para el título.
const projection = d3.geoOrthographic()
.fitExtent([[10, 80], [width - 10, height - 10]], { type: "Sphere" });
const path = d3.geoPath(projection, context);
// ---------------------------------------------------
// 4. INTERACCIÓN: ROTACIÓN AUTOMÁTICA Y MOVIMIENTO MANUAL (DRAG)
// ---------------------------------------------------
let rotationAngle = 0;
let autoRotate = true;
let initialRotation, dragStartPos;
d3.select(canvas.node())
.call(d3.drag()
.on("start", function(event) {
autoRotate = false; // Desactivar auto-rotación al iniciar drag
initialRotation = projection.rotate();
dragStartPos = [event.x, event.y];
})
.on("drag", function(event) {
const dx = event.x - dragStartPos[0],
dy = event.y - dragStartPos[1];
const sensitivity = 0.5;
let newLambda = initialRotation[0] + dx * sensitivity,
newPhi = initialRotation[1] - dy * sensitivity;
newPhi = Math.max(-90, Math.min(90, newPhi)); // Limitar latitud
projection.rotate([newLambda, newPhi]);
rotationAngle = newLambda; // Actualizar para reanudar la auto-rotación desde esta posición
draw();
})
.on("end", function() {
// Reanudar auto-rotación después de 3 segundos
setTimeout(() => { autoRotate = true; }, 100);
})
);
// ---------------------------------------------------
// 5. FUNCIÓN DE DIBUJO DEL GLOBO
// ---------------------------------------------------
function draw() {
context.clearRect(0, 0, width, height);
if (autoRotate) {
rotationAngle = (performance.now() / 50) % 360;
projection.rotate([rotationAngle, -15]);
}
// DIBUJO DE LA TIERRA BASE
context.beginPath();
path(land);
context.fillStyle = "#ccc";
context.fill();
// DIBUJO DE LOS PAÍSES
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();
}
// DIBUJO DE LAS FRONTERAS
context.beginPath();
path(borders);
context.strokeStyle = "#fff";
context.lineWidth = 0.5;
context.stroke();
// DIBUJO DEL CONTORNO DE LA ESFERA
context.beginPath();
path({ type: "Sphere" });
context.strokeStyle = "#000";
context.lineWidth = 1.5;
context.stroke();
// DIBUJO DEL AÑO
context.save();
context.font = "bold 48px sans-serif";
context.fillStyle = "black";
context.fillText(String(currentYear), 30, 60);
context.restore();
// DIBUJO DEL TÍTULO (por 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();
}
// ---------------------------------------------------
// 6. ACTUALIZAR LA VISUALIZACIÓN CUANDO CAMBIA EL AÑO MEDIANTE EL SLIDER
// ---------------------------------------------------
slider.on("input", function() {
currentYear = +this.value;
updateData(currentYear);
draw();
});
// ---------------------------------------------------
// 7. AUTO-PLAY: CAMBIAR EL AÑO AUTOMÁTICAMENTE CADA SEGUNDO
// ---------------------------------------------------
setInterval(() => {
if (autoPlay) {
currentYear = +currentYear + 1;
// Reiniciar al alcanzar el máximo
if (currentYear > +slider.attr("max")) {
currentYear = +slider.attr("min");
}
slider.property("value", currentYear);
updateData(currentYear);
draw();
}
}, 1000); // cada 1000 ms (1 segundo)
// ---------------------------------------------------
// 8. ANIMACIÓN: ROTACIÓN AUTOMÁTICA DEL GLOBO
// ---------------------------------------------------
d3.timer(elapsed => {
if (autoRotate) {
rotationAngle = (elapsed / 50) % 360;
projection.rotate([rotationAngle, -15]);
}
draw();
});
// Retornar el contenedor completo para que Observable lo muestre
return container.node();
}
canvas = {
// Specify the chart’s dimensions.
const height = Math.min(width, 720); // Observable sets a responsive *width*
// Prepare a canvas.
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);
// Create a projection and a path generator.
const projection = d3.geoOrthographic().fitExtent([[10, 10], [width - 10, height - 10]], {type: "Sphere"});
const path = d3.geoPath(projection, context);
const tilt = 20;
function render(country, arc) {
context.clearRect(0, 0, width, height);
context.beginPath(), path(land), context.fillStyle = "#ccc", context.fill();
context.beginPath(), path(country), context.fillStyle = "#f00", 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];
for (const country of countries) {
mutable name = country.properties.name;
yield render(country);
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)]});
})
.transition()
.tween("render", () => t => {
render(country, {type: "LineString", coordinates: [ip(t), p2]});
})
.end();
}
}
class Versor {
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;
};
}
}
mutable name = ""
countries = topojson.feature(world, world.objects.countries).features
borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
land = topojson.feature(world, world.objects.land)
world = FileAttachment("countries-110m.json").json()
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.