viewof chart1 = {
// Dimensiones del gráfico
const width = 928;
const height = width;
const margin = 1;
// Filtrar datos y agregar la variable co2PerCapita
const filteredData = data
.filter(d => d.iso_code && !isNaN(d.co2) && !isNaN(d.population) && d.co2 > 0 && d.population > 0)
.map(d => ({
country: d.country,
year: d.year,
co2: +d.co2, // Asegurarse de que sea numérico
population: +d.population, // Asegurarse de que sea numérico
iso_code: d.iso_code,
co2PerCapita: +d.co2 / +d.population // Calcular CO₂ per capita
}));
// Mostrar datos procesados en la consola
console.log("Datos procesados:", filteredData);
// Crear contenedor principal
const container = d3.create("div");
// Crear botones para seleccionar variable
const co2Button = document.createElement("button");
co2Button.textContent = "CO₂ Total";
co2Button.style.marginRight = "10px";
co2Button.style.borderRadius = "20px";
co2Button.style.backgroundColor = "#4CAF50";
co2Button.style.color = "white";
const co2PerCapitaButton = document.createElement("button");
co2PerCapitaButton.textContent = "CO₂ Per Cápita";
co2PerCapitaButton.style.marginRight = "10px";
co2PerCapitaButton.style.borderRadius = "20px";
co2PerCapitaButton.style.backgroundColor = "#2196F3";
co2PerCapitaButton.style.color = "white";
// Crear el slider de tiempo
const uniqueYears = Array.from(new Set(filteredData.map(d => d.year))).sort((a, b) => a - b);
const yearSlider = document.createElement("input");
yearSlider.type = "range";
yearSlider.min = 0;
yearSlider.max = uniqueYears.length - 1;
yearSlider.value = 0;
yearSlider.style.marginRight = "10px";
yearSlider.style.marginLeft = "20px";
const yearLabel = document.createElement("span");
yearLabel.textContent = uniqueYears[0]; // Año inicial
const playButton = document.createElement("button");
playButton.textContent = "Play";
playButton.style.marginLeft = "20px";
playButton.style.borderRadius = "20px";
playButton.style.backgroundColor = "#f44336";
playButton.style.color = "white";
// Crear título del gráfico
const chartTitle = document.createElement("h3");
chartTitle.textContent = `Distribución de CO₂ Total (toneladas) por País (Año: ${uniqueYears[0]})`;
chartTitle.style.textAlign = "center";
chartTitle.style.marginTop = "20px";
container.append(() => co2Button);
container.append(() => co2PerCapitaButton);
container.append(() => playButton);
container.append(() => yearSlider);
container.append(() => yearLabel);
container.append(() => chartTitle);
// Crear SVG para el gráfico
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-margin, -margin, width, height])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;")
.attr("text-anchor", "middle");
container.append(() => svg.node());
// Escala de colores
const color = d3.scaleOrdinal(d3.schemeTableau10);
// Función para actualizar el gráfico
function updateChart(selectedYear, variable) {
const dataForSelectedYear = filteredData.filter(
d => d.year === selectedYear && d.population > 0 && d.co2 > 0
);
console.log(`Datos del año ${selectedYear}:`, dataForSelectedYear);
const pack = d3.pack()
.size([width - margin * 2, height - margin * 2])
.padding(3);
const root = pack(d3.hierarchy({ children: dataForSelectedYear })
.sum(d => variable === 'co2PerCapita' ? d[variable] * 1000000 : d[variable]));
svg.selectAll("*").remove();
const node = svg.append("g")
.selectAll()
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x},${d.y})`);
const label = variable === 'co2PerCapita' ? 'CO₂ Per Cápita' : 'CO₂ Total';
const unit = variable === 'co2PerCapita' ? 'kg' : 'toneladas';
node.append("title")
.text(d => `${d.data.country}\n${label}: ${d3.format(",.0f")(d.value)} ${unit}`);
node.append("circle")
.attr("fill-opacity", 0.7)
.attr("fill", d => color(d.data.country))
.attr("r", d => d.r);
node.append("text")
.attr("clip-path", d => `circle(${d.r})`)
.selectAll("tspan")
.data(d => [d.data.country, `${d3.format(",.0f")(d.value)} ${unit}`])
.join("tspan")
.attr("x", 0)
.attr("y", (d, i) => `${i - 0.5}em`)
.text(d => d);
chartTitle.textContent = `Distribución de ${label} (${unit}) por País (Año: ${selectedYear})`;
}
updateChart(uniqueYears[0], "co2");
let isPlaying = false;
let interval;
function togglePlay() {
if (isPlaying) {
clearInterval(interval);
playButton.textContent = "Play";
} else {
playButton.textContent = "Pause";
interval = setInterval(() => {
let nextValue = +yearSlider.value + 1;
if (nextValue >= uniqueYears.length) nextValue = 0;
yearSlider.value = nextValue;
const selectedYear = uniqueYears[nextValue];
yearLabel.textContent = selectedYear;
updateChart(selectedYear, co2PerCapitaButton.disabled ? 'co2PerCapita' : 'co2');
}, 500);
}
isPlaying = !isPlaying;
}
playButton.addEventListener("click", togglePlay);
yearSlider.addEventListener("input", () => {
const selectedYear = uniqueYears[yearSlider.value];
yearLabel.textContent = selectedYear;
updateChart(selectedYear, co2PerCapitaButton.disabled ? 'co2PerCapita' : 'co2');
});
co2Button.addEventListener("click", () => {
co2Button.disabled = true;
co2PerCapitaButton.disabled = false;
const selectedYear = uniqueYears[yearSlider.value];
updateChart(selectedYear, 'co2');
});
co2PerCapitaButton.addEventListener("click", () => {
co2Button.disabled = false;
co2PerCapitaButton.disabled = true;
const selectedYear = uniqueYears[yearSlider.value];
updateChart(selectedYear, 'co2PerCapita');
});
return container.node();
}
countryData = co2_data.filter(d => d.iso_code != "");
owid-co2-data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.