{ const rows = data .filter(d => Number.isFinite(d.year) && Number.isFinite(d.pop) && Number.isFinite(d.lifeExp) && Number.isFinite(d.gdpPercap) && d.gdpPercap > 0 ) .slice() .sort((a, b) => d3.ascending(a.year, b.year) || d3.ascending(a.country, b.country) ); const years = [...new Set(rows.map(d => d.year))] .sort(d3.ascending); const byYear = d3.group(rows, d => d.year); const byCountry = d3.group(rows, d => d.country); for (const values of byCountry.values()) { values.sort((a, b) => d3.ascending(a.year, b.year)); } const continentOf = new Map( rows.map(d => [d.country, d.continent]) ); const ANALYSIS_COUNTRIES = ["Egypt", "Zambia"]; const MAX_SELECTION = 4; const selected = new Set(ANALYSIS_COUNTRIES); let currentYear = years[0]; let currentMetric = "lifeExp"; let yearIndex = 0; let running = true; const color = d3.scaleOrdinal() .domain(["Africa", "Americas", "Asia", "Europe", "Oceania"]) .range(d3.schemeTableau10.slice(0, 5)); // Países del mismo continente conservan el mismo color. // Se distinguen mediante patrón de línea y símbolo. const countryDash = d3.scaleOrdinal() .range([ null, "8 4", "2 3", "10 3 2 3" ]); const countrySymbol = d3.scaleOrdinal() .range([ d3.symbolCircle, d3.symbolSquare, d3.symbolTriangle, d3.symbolDiamond ]); ANALYSIS_COUNTRIES.forEach(country => { countryDash(country); countrySymbol(country); }); const fmtInteger = new Intl.NumberFormat("es-CL", { maximumFractionDigits: 0 }); const fmtOne = new Intl.NumberFormat("es-CL", { minimumFractionDigits: 1, maximumFractionDigits: 1 }); const fmtGDP = value => `US$ ${fmtInteger.format(value)}`; const fmtPop = value => fmtInteger.format(value); const app = html`

Gapminder · Divergencia intra-regional

Pregunta: dentro de un mismo continente, ¿hay países que se separan visiblemente del resto de sus pares regionales, a pesar de partir de una posición similar en 1952?
Haz clic en las burbujas para seleccionar o eliminar países. La segunda vista muestra su trayectoria histórica completa.

PIB per cápita vs. esperanza de vida · 1952–2007

Trayectoria histórica de los países seleccionados

Métrica: Esperanza de vida PIB per cápita

Países analizados: Egipto y Zambia · África

`; const W_B = 720; const H_B = 500; const W_L = 720; const H_L = 500; const mB = { top: 24, right: 22, bottom: 58, left: 72 }; const mL = { top: 24, right: 110, bottom: 58, left: 72 }; const iwB = W_B - mB.left - mB.right; const ihB = H_B - mB.top - mB.bottom; const iwL = W_L - mL.left - mL.right; const ihL = H_L - mL.top - mL.bottom; const x = d3.scaleLog() .domain( d3.extent(rows, d => d.gdpPercap) ) .nice() .range([0, iwB]); const y = d3.scaleLinear() .domain( d3.extent(rows, d => d.lifeExp) ) .nice() .range([ihB, 0]); // Área de burbuja proporcional a población. const r = d3.scaleSqrt() .domain([ 0, d3.max(rows, d => d.pop) ]) .range([2, 38]); const bubbleContainer = app.querySelector("#gm-bubble"); const svgB = d3 .select(bubbleContainer) .append("svg") .attr( "viewBox", `0 0 ${W_B} ${H_B}` ) .attr( "aria-label", "PIB per cápita versus esperanza de vida" ); const gB = svgB .append("g") .attr( "transform", `translate(${mB.left},${mB.top})` ); // Grid horizontal. gB.append("g") .attr("class", "gm-gridline") .call( d3.axisLeft(y) .ticks(7) .tickSize(-iwB) .tickFormat("") ); // Eje X. gB.append("g") .attr("class", "gm-axis") .attr( "transform", `translate(0,${ihB})` ) .call( d3.axisBottom(x) .ticks(7, "~s") ); // Eje Y. gB.append("g") .attr("class", "gm-axis") .call( d3.axisLeft(y) .ticks(7) ); // Etiqueta X. gB.append("text") .attr("class", "gm-axis-label") .attr("x", iwB / 2) .attr("y", ihB + 46) .attr("text-anchor", "middle") .text( "PIB per cápita (USD · escala logarítmica)" ); // Etiqueta Y. gB.append("text") .attr("class", "gm-axis-label") .attr( "transform", "rotate(-90)" ) .attr("x", -ihB / 2) .attr("y", -50) .attr("text-anchor", "middle") .text( "Esperanza de vida (años)" ); // Año. const yearLabel = gB .append("text") .attr("x", iwB - 6) .attr("y", 40) .attr("text-anchor", "end") .attr("font-size", 40) .attr("font-weight", 700) .attr("fill", "#e2e8f0") .text(currentYear); const bubblesG = gB .append("g") .attr("class", "bubbles"); const tooltip = d3 .select(bubbleContainer) .append("div") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style( "background", "rgba(255,255,255,.98)" ) .style( "border", "1px solid #cbd5e1" ) .style( "border-radius", "6px" ) .style( "padding", "8px 10px" ) .style( "font", "12px/1.5 sans-serif" ) .style( "box-shadow", "0 4px 14px rgba(0,0,0,.10)" ) .style( "z-index", 20 ); function selectedContinents() { return new Set( [...selected] .map(country => continentOf.get(country) ) .filter(Boolean) ); } function opacityFor(d) { if (selected.size === 0) { return 0.78; } if (selected.has(d.country)) { return 0.96; } if ( selectedContinents() .has(d.continent) ) { return 0.23; } return 0.045; } function styleBubbles() { bubblesG .selectAll("circle.bubble") .interrupt("focus") .transition("focus") .duration(180) .attr( "opacity", opacityFor ) .attr( "stroke", d => selected.has(d.country) ? "#111827" : "#ffffff" ) .attr( "stroke-width", d => selected.has(d.country) ? 2.2 : 0.8 ); } function showTooltip(event, d) { const [px, py] = d3.pointer( event, bubbleContainer ); const width = bubbleContainer .getBoundingClientRect() .width; const left = Math.max( 4, Math.min( px + 14, width - 205 ) ); tooltip .style("opacity", 1) .html( ` ${d.country}
${d.continent} · ${d.year}
PIB per cápita: ${fmtGDP(d.gdpPercap)}
Esperanza de vida: ${fmtOne.format(d.lifeExp)} años
Población: ${fmtPop(d.pop)} ` ) .style( "left", `${left}px` ) .style( "top", `${Math.max(py - 32, 4)}px` ); d3.select( event.currentTarget ) .interrupt("focus") .raise() .attr( "stroke", "#111827" ) .attr( "stroke-width", 2.2 ); } function hideTooltip() { tooltip.style( "opacity", 0 ); styleBubbles(); } const lineContainer = app.querySelector("#gm-line"); const svgL = d3 .select(lineContainer) .append("svg") .attr( "viewBox", `0 0 ${W_L} ${H_L}` ) .attr( "aria-label", "Evolución histórica de los países seleccionados" ); const gL = svgL .append("g") .attr( "transform", `translate(${mL.left},${mL.top})` ); const xL = d3.scaleLinear() .domain( d3.extent(years) ) .range([ 0, iwL ]); const yLife = d3.scaleLinear() .domain( d3.extent( rows, d => d.lifeExp ) ) .nice() .range([ ihL, 0 ]); const yGDP = d3.scaleLog() .domain( d3.extent( rows, d => d.gdpPercap ) ) .nice() .range([ ihL, 0 ]); function activeYScale() { return currentMetric === "gdpPercap" ? yGDP : yLife; } // Eje X. gL.append("g") .attr("class", "gm-axis") .attr( "transform", `translate(0,${ihL})` ) .call( d3.axisBottom(xL) .tickValues( years.filter( (d, i) => i % 2 === 0 ) ) .tickFormat( d3.format("d") ) ); // Eje Y. const yAxisL = gL .append("g") .attr("class", "gm-axis"); // Etiqueta X. gL.append("text") .attr( "class", "gm-axis-label" ) .attr( "x", iwL / 2 ) .attr( "y", ihL + 46 ) .attr( "text-anchor", "middle" ) .text("Año"); // Etiqueta Y. const yLabelL = gL .append("text") .attr( "class", "gm-axis-label" ) .attr( "transform", "rotate(-90)" ) .attr( "x", -ihL / 2 ) .attr( "y", -50 ) .attr( "text-anchor", "middle" ); // Indicador de año sincronizado. const yearGuide = gL .append("line") .attr("y1", 0) .attr("y2", ihL) .attr( "stroke", "#94a3b8" ) .attr( "stroke-dasharray", "3 3" ) .attr( "pointer-events", "none" ) .attr( "opacity", 0 ); const gLines = gL.append("g"); const gPoints = gL.append("g"); const gCurrent = gL.append("g"); const gLabels = gL.append("g"); const emptyMessage = gL .append("text") .attr( "x", iwL / 2 ) .attr( "y", ihL / 2 ) .attr( "text-anchor", "middle" ) .attr( "fill", "#94a3b8" ) .attr( "font-size", 12 ) .text( "Selecciona uno o más países en el bubble chart" ); function selectedSeries() { return [...selected] .map(country => { const values = ( byCountry.get(country) || [] ) .filter(d => Number.isFinite( d[currentMetric] ) ); return { country, continent: continentOf.get(country), values, last: values[ values.length - 1 ] }; }) .filter(d => d.values.length ); } function updateYearLink() { const yScale = activeYScale(); if ( selected.size === 0 ) { yearGuide .attr( "opacity", 0 ); gCurrent .selectAll("*") .remove(); return; } yearGuide .attr( "x1", xL(currentYear) ) .attr( "x2", xL(currentYear) ) .attr( "opacity", 0.65 ); const currentData = selectedSeries() .map(series => { const value = series.values.find( d => d.year === currentYear ); return value ? { country: series.country, continent: series.continent, value } : null; }) .filter(Boolean); gCurrent .selectAll( "path.current-point" ) .data( currentData, d => d.country ) .join( enter => enter .append("path") .attr( "class", "current-point" ) .attr( "stroke", "#111827" ) .attr( "stroke-width", 1.4 ), update => update, exit => exit.remove() ) .attr( "d", d => d3.symbol() .type( countrySymbol( d.country ) ) .size(105)() ) .attr( "fill", d => color( d.continent ) ) .attr( "transform", d => `translate( ${xL(currentYear)}, ${yScale( d.value[ currentMetric ] )} )` ); } function renderLines() { const yScale = activeYScale(); const series = selectedSeries(); const axisY = currentMetric === "gdpPercap" ? d3.axisLeft(yScale) .ticks(6, "~s") : d3.axisLeft(yScale) .ticks(7); yAxisL .interrupt("axis") .transition("axis") .duration(350) .call(axisY); yLabelL.text( currentMetric === "gdpPercap" ? "PIB per cápita (USD · escala logarítmica)" : "Esperanza de vida (años)" ); const line = d3.line() .defined(d => Number.isFinite( d[currentMetric] ) ) .x(d => xL(d.year) ) .y(d => yScale( d[currentMetric] ) ) .curve( d3.curveLinear ); // ---------------------------------------------------------- // LÍNEAS // ---------------------------------------------------------- const lineSelection = gLines .selectAll( "path.country-line" ) .data( series, d => d.country ); lineSelection .exit() .transition() .duration(180) .attr( "opacity", 0 ) .remove(); const lineEnter = lineSelection .enter() .append("path") .attr( "class", "country-line" ) .attr( "fill", "none" ) .attr( "stroke-width", 2.5 ) .attr( "stroke-linecap", "round" ) .attr( "stroke-linejoin", "round" ) .attr( "opacity", 0 ); lineEnter .merge( lineSelection ) .attr( "stroke", d => color( d.continent ) ) .attr( "stroke-dasharray", d => countryDash( d.country ) ) .transition( "line-update" ) .duration(450) .attr( "d", d => line(d.values) ) .attr( "opacity", 1 ); // ---------------------------------------------------------- // PUNTOS // ---------------------------------------------------------- const pointGroups = gPoints .selectAll( "g.country-points" ) .data( series, d => d.country ); pointGroups .exit() .remove(); const pointGroupsEnter = pointGroups .enter() .append("g") .attr( "class", "country-points" ); pointGroupsEnter .merge(pointGroups) .each( function(seriesData) { const symbol = d3.symbol() .type( countrySymbol( seriesData.country ) ) .size(30); d3.select(this) .selectAll( "path.observation" ) .data( seriesData.values, d => d.year ) .join("path") .attr( "class", "observation" ) .attr( "d", symbol ) .attr( "fill", color( seriesData.continent ) ) .attr( "stroke", "#ffffff" ) .attr( "stroke-width", 0.7 ) .transition( "point-update" ) .duration(450) .attr( "transform", d => `translate( ${xL(d.year)}, ${yScale( d[currentMetric] )} )` ); } ); // ---------------------------------------------------------- // ETIQUETAS DIRECTAS // ---------------------------------------------------------- const labels = gLabels .selectAll( "g.end-label" ) .data( series, d => d.country ); labels .exit() .remove(); const labelsEnter = labels .enter() .append("g") .attr( "class", "end-label" ); labelsEnter .append("line") .attr( "x1", iwL + 5 ) .attr( "x2", iwL + 23 ) .attr( "stroke-width", 2.4 ); labelsEnter .append("text") .attr( "x", iwL + 29 ) .attr( "dy", "0.35em" ) .attr( "font-size", 10.5 ) .attr( "font-weight", 600 ) .attr( "fill", "#334155" ); const labelsMerge = labelsEnter.merge( labels ); labelsMerge .select("line") .attr( "stroke", d => color( d.continent ) ) .attr( "stroke-dasharray", d => countryDash( d.country ) ); labelsMerge .select("text") .text( d => d.country ); labelsMerge .transition( "label-update" ) .duration(450) .attr( "transform", d => `translate( 0, ${yScale( d.last[ currentMetric ] )} )` ); emptyMessage .style( "display", series.length ? "none" : null ); updateYearLink(); updateSelectionStatus(); } function onClickBubble( event, d ) { event.stopPropagation(); if ( selected.has( d.country ) ) { selected.delete( d.country ); } else { if ( selected.size >= MAX_SELECTION ) { const status = app.querySelector( "#gm-selection-status" ); status.classList.add( "warning" ); status.textContent = `Máximo ${MAX_SELECTION} países simultáneos.`; return; } selected.add( d.country ); countryDash( d.country ); countrySymbol( d.country ); } styleBubbles(); renderLines(); } function updateSelectionStatus() { const status = app.querySelector( "#gm-selection-status" ); status.classList .remove("warning"); if ( selected.size === 0 ) { status.textContent = "Haz clic en las burbujas para comparar países."; return; } const countries = [...selected]; const continents = new Set( countries.map( country => continentOf.get( country ) ) ); if ( continents.size === 1 ) { status.textContent = `Seleccionados: ${countries.join(", ")} · ${ [...continents][0] }`; } else { status.classList .add("warning"); status.textContent = `Seleccionados: ${countries.join(", ")}. ` + `Para responder la pregunta asignada, compara países del mismo continente.`; } } function updateBubbles( year, animate = true ) { currentYear = year; yearLabel.text(year); const frame = (byYear.get(year) || []) .slice() .sort( (a, b) => d3.descending( a.pop, b.pop ) ); const circles = bubblesG .selectAll( "circle.bubble" ) .data( frame, d => d.country ) .join( enter => enter .append("circle") .attr( "class", "bubble" ) .attr( "cx", d => x( d.gdpPercap ) ) .attr( "cy", d => y( d.lifeExp ) ) .attr( "r", 0 ) .attr( "fill", d => color( d.continent ) ) .attr( "stroke", "#ffffff" ) .attr( "stroke-width", 0.8 ) .style( "cursor", "pointer" ) .on( "mouseover", showTooltip ) .on( "mouseout", hideTooltip ) .on( "click", onClickBubble ), update => update, exit => exit .transition() .duration(150) .attr( "r", 0 ) .remove() ); circles.sort( (a, b) => d3.descending( a.pop, b.pop ) ); circles .interrupt("move") .transition("move") .duration( animate ? 800 : 0 ) .ease( d3.easeCubicInOut ) .attr( "cx", d => x( d.gdpPercap ) ) .attr( "cy", d => y( d.lifeExp ) ) .attr( "r", d => r( d.pop ) ); styleBubbles(); updateYearLink(); } svgB.on( "click", () => { if ( selected.size ) { selected.clear(); countryDash .domain([]); countrySymbol .domain([]); styleBubbles(); renderLines(); } } ); const legend = d3.select( app.querySelector( "#gm-continent-legend" ) ); color.domain() .forEach(name => { const item = legend .append("span") .attr( "class", "gm-legend-item" ); item .append("span") .attr( "class", "gm-legend-dot" ) .style( "background", color(name) ); item .append("span") .text(name); }); const playButton = app.querySelector( "#gm-play" ); playButton .addEventListener( "click", () => { running = !running; playButton.textContent = running ? "Pausa" : "Reproducir"; } ); app .querySelector( "#gm-clear" ) .addEventListener( "click", () => { selected.clear(); countryDash .domain([]); countrySymbol .domain([]); styleBubbles(); renderLines(); } ); app .querySelector( "#gm-example" ) .addEventListener( "click", () => { selected.clear(); countryDash .domain([]); countrySymbol .domain([]); ANALYSIS_COUNTRIES .forEach( country => { selected.add( country ); countryDash( country ); countrySymbol( country ); } ); yearIndex = 0; currentYear = years[0]; updateBubbles( currentYear, false ); renderLines(); } ); app .querySelectorAll( 'input[name="gm-metric"]' ) .forEach( input => { input .addEventListener( "change", event => { currentMetric = event.target.value; renderLines(); } ); } ); const startYear = years[0]; const endYear = years[ years.length - 1 ]; const egyptStart = byCountry .get("Egypt") .find( d => d.year === startYear ); const egyptEnd = byCountry .get("Egypt") .find( d => d.year === endYear ); const zambiaStart = byCountry .get("Zambia") .find( d => d.year === startYear ); const zambiaEnd = byCountry .get("Zambia") .find( d => d.year === endYear ); app .querySelector( "#gm-conclusion-text" ) .innerHTML = `Sí. Egipto y Zambia parten prácticamente juntos en ` + `${startYear} (` + `${fmtOne.format(egyptStart.lifeExp)} vs. ` + `${fmtOne.format(zambiaStart.lifeExp)} años; ` + `${fmtGDP(egyptStart.gdpPercap)} vs. ` + `${fmtGDP(zambiaStart.gdpPercap)}), ` + `pero sus trayectorias comienzan a separarse con claridad ` + `desde fines de los años 70 y durante los 80: en ${endYear}, ` + `Egipto alcanza ${fmtOne.format(egyptEnd.lifeExp)} años y ` + `${fmtGDP(egyptEnd.gdpPercap)}, frente a ` + `${fmtOne.format(zambiaEnd.lifeExp)} años y ` + `${fmtGDP(zambiaEnd.gdpPercap)} en Zambia. ` + `El bubble chart muestra la separación espacial, mientras la ` + `vista temporal revela que la brecha se construye progresivamente ` + `y no corresponde a una diferencia puntual.`; updateBubbles( currentYear, false ); renderLines(); const timer = d3.interval( () => { if ( !running ) { return; } yearIndex = ( yearIndex + 1 ) % years.length; updateBubbles( years[ yearIndex ], true ); }, 1200 ); // Observable: // detener interval al reevaluar la celda. invalidation.then( () => timer.stop() ); return app; }