28:null 29:["$","title",null,{"children":"Untitled | Esteban castro | Observable"}] 2e:T5291,// ============================================================ // GAPMINDER // BUBBLE CHART + GRÁFICO DE LÍNEAS COORDINADO // ============================================================ // ============================================================ // CONTENEDOR PRINCIPAL // ============================================================ const container = html`

`; // ============================================================ // BUBBLE CHART // ============================================================ const svg = d3.select(container) .append("svg") .attr("width", 900) .attr("height", 600); // Grupo de burbujas const bubbles = svg.append("g") .attr("class", "bubbles"); // ============================================================ // ESCALAS DEL BUBBLE CHART // ============================================================ const x = d3.scaleLog() .domain( d3.extent( data, d => d.gdpPercap ) ) .range([60, 840]); const y = d3.scaleLinear() .domain( d3.extent( data, d => d.lifeExp ) ) .range([540, 40]); const r = d3.scaleSqrt() .domain([ 0, d3.max( data, d => d.pop ) ]) .range([2, 40]); // ============================================================ // COLORES POR CONTINENTE // ============================================================ const color = d3.scaleOrdinal() .domain([ "Africa", "Americas", "Asia", "Europe", "Oceania" ]) .range( d3.schemeTableau10 ); // ============================================================ // EJES DEL BUBBLE CHART // ============================================================ const xAxisG = svg.append("g") .attr( "class", "x-axis" ) .attr( "transform", "translate(0,540)" ) .call( d3.axisBottom(x) ); const yAxisG = svg.append("g") .attr( "class", "y-axis" ) .attr( "transform", "translate(60,0)" ) .call( d3.axisLeft(y) ); // ============================================================ // TOOLTIP // ============================================================ const tooltip = d3.select(container) .append("div") .style( "position", "absolute" ) .style( "pointer-events", "none" ) .style( "opacity", 0 ) .style( "background", "white" ) .style( "border", "1px solid #ccc" ) .style( "border-radius", "4px" ) .style( "padding", "6px 8px" ) .style( "font", "12px sans-serif" ) .style( "z-index", 10 ); function showTooltip(event, d) { const [ px, py ] = d3.pointer( event, container ); tooltip .style( "opacity", 1 ) .html( `${d.country}
` + `PIB per cápita: $${d.gdpPercap.toFixed(0)}
` + `Esperanza de vida: ${d.lifeExp.toFixed(1)} años` ) .style( "left", (px + 12) + "px" ) .style( "top", (py - 20) + "px" ); } function hideTooltip() { tooltip.style( "opacity", 0 ); } // ============================================================ // PAÍSES SELECCIONADOS // ============================================================ const selected = new Set(); // ============================================================ // GRÁFICO DE LÍNEAS // ============================================================ const lineContainer = html`

`; // ============================================================ // SVG DEL GRÁFICO DE LÍNEAS // ============================================================ const lineSvg = d3.select(lineContainer) .append("svg") .attr( "width", 1150 ) .attr( "height", 650 ); // ============================================================ // MÁRGENES // ============================================================ const marginLine = { top: 65, right: 230, bottom: 70, left: 80 }; // ============================================================ // DIMENSIONES // ============================================================ const lineWidth = 1150 - marginLine.left - marginLine.right; const lineHeight = 650 - marginLine.top - marginLine.bottom; // ============================================================ // GRUPO PRINCIPAL // ============================================================ const lineGroup = lineSvg.append("g") .attr( "transform", `translate( ${marginLine.left}, ${marginLine.top} )` ); // ============================================================ // ESCALA X // ============================================================ const xLine = d3.scaleLinear() .domain( d3.extent( data, d => d.year ) ) .range([ 0, lineWidth ]); // ============================================================ // ESCALA Y // ============================================================ const yLine = d3.scaleLinear() .domain([ 35, 85 ]) .range([ lineHeight, 0 ]); // ============================================================ // EJE X // ============================================================ lineGroup.append("g") .attr( "class", "line-x-axis" ) .attr( "transform", `translate( 0, ${lineHeight} )` ) .call( d3.axisBottom(xLine) .tickFormat( d3.format("d") ) ); // ============================================================ // EJE Y // ============================================================ lineGroup.append("g") .attr( "class", "line-y-axis" ) .call( d3.axisLeft(yLine) ); // ============================================================ // TÍTULO // ============================================================ lineSvg.append("text") .attr( "x", 575 ) .attr( "y", 35 ) .attr( "text-anchor", "middle" ) .attr( "font-size", "26px" ) .attr( "font-weight", "bold" ) .text( "Evolución de la esperanza de vida" ); // ============================================================ // EJE X - TÍTULO // ============================================================ lineSvg.append("text") .attr( "x", 575 ) .attr( "y", 635 ) .attr( "text-anchor", "middle" ) .attr( "font-size", "14px" ) .text( "Año" ); // ============================================================ // EJE Y - TÍTULO // ============================================================ lineSvg.append("text") .attr( "transform", "rotate(-90)" ) .attr( "x", -325 ) .attr( "y", 22 ) .attr( "text-anchor", "middle" ) .attr( "font-size", "14px" ) .text( "Esperanza de vida" ); // ============================================================ // GRUPO DE LÍNEAS // ============================================================ const lines = lineGroup.append("g") .attr( "class", "lines" ); // ============================================================ // ACTUALIZAR GRÁFICO DE LÍNEAS // ============================================================ function updateLineChart( selectedCountries ) { // Limpiar todo lines.selectAll("*") .remove(); // Si no hay países if ( selectedCountries.size === 0 ) { return; } // Información de los países const countryInfo = []; // ========================================================== // CREAR LÍNEAS // ========================================================== selectedCountries.forEach( country => { const countryData = data .filter( d => d.country === country ) .sort( (a, b) => a.year - b.year ); if ( countryData.length === 0 ) { return; } // ------------------------------------------------------ // COLOR // ------------------------------------------------------ const countryColor = color( countryData[0].continent ); // ------------------------------------------------------ // LÍNEA // ------------------------------------------------------ const line = d3.line() .x( d => xLine(d.year) ) .y( d => yLine(d.lifeExp) ); lines.append("path") .datum( countryData ) .attr( "fill", "none" ) .attr( "stroke", countryColor ) .attr( "stroke-width", 3 ) .attr( "stroke-linecap", "round" ) .attr( "stroke-linejoin", "round" ) .attr( "d", line ); // ------------------------------------------------------ // PUNTOS // ------------------------------------------------------ lines.selectAll( `circle.country-${CSS.escape(country)}` ) .data( countryData ) .join("circle") .attr( "class", `country-${country}` ) .attr( "cx", d => xLine(d.year) ) .attr( "cy", d => yLine(d.lifeExp) ) .attr( "r", 4 ) .attr( "fill", countryColor ); // ------------------------------------------------------ // ÚLTIMO PUNTO // ------------------------------------------------------ const lastPoint = countryData[ countryData.length - 1 ]; // Guardar información countryInfo.push({ country: country, continent: countryData[0].continent, y: yLine( lastPoint.lifeExp ) }); } ); // ========================================================== // CORRECCIÓN DE SUPERPOSICIÓN // ========================================================== const labels = countryInfo.map( d => ({ country: d.country, continent: d.continent, originalY: d.y, labelY: d.y }) ); // ---------------------------------------------------------- // ORDENAR DE ARRIBA HACIA ABAJO // ---------------------------------------------------------- labels.sort( (a, b) => a.labelY - b.labelY ); // ---------------------------------------------------------- // DISTANCIA ENTRE NOMBRES // ---------------------------------------------------------- const minLabelDistance = 25; // ---------------------------------------------------------- // PRIMER AJUSTE // ---------------------------------------------------------- for ( let i = 1; i < labels.length; i++ ) { if ( labels[i].labelY - labels[i - 1].labelY < minLabelDistance ) { labels[i].labelY = labels[i - 1].labelY + minLabelDistance; } } // ---------------------------------------------------------- // LÍMITE INFERIOR // ---------------------------------------------------------- const maxLabelY = lineHeight - 5; for ( let i = labels.length - 1; i >= 0; i-- ) { if ( labels[i].labelY > maxLabelY ) { labels[i].labelY = maxLabelY; if ( i > 0 ) { labels[i - 1].labelY = labels[i].labelY - minLabelDistance; } } } // ---------------------------------------------------------- // LÍMITE SUPERIOR // ---------------------------------------------------------- const minLabelY = 5; for ( let i = 0; i < labels.length; i++ ) { if ( labels[i].labelY < minLabelY ) { labels[i].labelY = minLabelY; if ( i < labels.length - 1 ) { labels[i + 1].labelY = labels[i].labelY + minLabelDistance; } } } // ========================================================== // NOMBRES DE LOS PAÍSES // ========================================================== labels.forEach( d => { lines.append("text") // ---------------------------------------------- // MÁS A LA DERECHA // ---------------------------------------------- .attr( "x", lineWidth + 14 ) // ---------------------------------------------- // POSICIÓN VERTICAL AJUSTADA // ---------------------------------------------- .attr( "y", d.labelY ) .attr( "text-anchor", "start" ) .attr( "dominant-baseline", "middle" ) .attr( "font-size", "13px" ) .attr( "font-weight", "bold" ) .attr( "fill", color(d.continent) ) // ---------------------------------------------- // BORDE BLANCO PARA FACILITAR LA LECTURA // ---------------------------------------------- .style( "paint-order", "stroke" ) .style( "stroke", "white" ) .style( "stroke-width", "5px" ) .style( "stroke-linejoin", "round" ) .text( d.country ); } ); } // ============================================================ // CLICK SOBRE LAS BURBUJAS // ============================================================ function onClick( event, d ) { // Seleccionar / deseleccionar if ( selected.has( d.country ) ) { selected.delete( d.country ); } else { selected.add( d.country ); } // ---------------------------------------------------------- // CAMBIAR OPACIDAD // ---------------------------------------------------------- bubbles.selectAll("circle") .attr( "opacity", c => selected.size === 0 || selected.has( c.country ) ? 0.9 : 0.15 ); // ---------------------------------------------------------- // ACTUALIZAR LÍNEAS // ---------------------------------------------------------- updateLineChart( selected ); } // ============================================================ // AÑOS // ============================================================ const years = [ ...new Set( data.map( d => d.year ) ) ].sort( (a, b) => a - b ); let i = 0; let running = true; // ============================================================ // ETIQUETA DEL AÑO // ============================================================ const yearLabel = svg.append("text") .attr( "class", "year-label" ) .attr( "x", 850 ) .attr( "y", 520 ) .attr( "text-anchor", "end" ) .attr( "font-size", 36 ) .attr( "font-weight", "bold" ) .attr( "fill", "#bbb" ) .attr( "opacity", 0.7 ); // ============================================================ // ACTUALIZAR BUBBLE CHART // ============================================================ function update( year ) { const frame = data.filter( d => d.year === year ); // Mostrar año yearLabel.text( year ); // ========================================================== // BURBUJAS // ========================================================== bubbles.selectAll("circle") .data( frame, d => d.country ) .join( // ------------------------------------------------------ // ENTER // ------------------------------------------------------ enter => enter .append("circle") .attr( "cx", d => x(d.gdpPercap) ) .attr( "cy", d => y(d.lifeExp) ) .attr( "r", 0 ) .attr( "fill", d => color(d.continent) ) .attr( "opacity", d => selected.size === 0 || selected.has( d.country ) ? 0.9 : 0.15 ) .on( "mouseover", showTooltip ) .on( "mouseout", hideTooltip ) .on( "click", onClick ), // ------------------------------------------------------ // UPDATE // ------------------------------------------------------ update => update, // ------------------------------------------------------ // EXIT // ------------------------------------------------------ exit => exit.remove() ) // ======================================================== // ANIMACIÓN // ======================================================== .transition() .duration(800) .attr( "cx", d => x(d.gdpPercap) ) .attr( "cy", d => y(d.lifeExp) ) .attr( "r", d => r(d.pop) ) .attr( "fill", d => color(d.continent) ); } // ============================================================ // INICIAR // ============================================================ update( years[0] ); // ============================================================ // ANIMACIÓN TEMPORAL // ============================================================ const timer = d3.interval( () => { if ( !running ) { return; } i = (i + 1) % years.length; update( years[i] ); }, 1000 ); // ============================================================ // DETENER TIMER // ============================================================ invalidation.then( () => timer.stop() ); // ============================================================ // BOTÓN PAUSA / PLAY // ============================================================ const pauseBtn = d3.select(container) .insert( "button", "svg" ) .text( "Pausa" ) .style( "margin", "0 0 8px" ) .style( "cursor", "pointer" ); pauseBtn.on( "click", () => { running = !running; pauseBtn.text( running ? "Pausa" : "Play" ); } ); // ============================================================ // TÍTULO DEL BUBBLE CHART // ============================================================ d3.select(container) .insert( "h2", "svg" ) .style( "font", "600 18px sans-serif" ) .style( "margin", "0 0 8px" ) .text( "Gapminder: PIB per cápita vs esperanza de vida" ); // ============================================================ // LEYENDA // ============================================================ const continents = color.domain(); const legend = svg.append("g") .attr( "class", "legend" ) .attr( "transform", "translate(80,20)" ); continents.forEach( ( name, idx ) => { const row = legend.append("g") .attr( "transform", `translate( 0, ${idx * 18} )` ); row.append("circle") .attr( "r", 6 ) .attr( "cx", 0 ) .attr( "cy", 0 ) .attr( "fill", color(name) ); row.append("text") .attr( "x", 12 ) .attr( "y", 4 ) .attr( "font-size", 12 ) .text( name ); } ); // ============================================================ // MOSTRAR BUBBLE CHART // ============================================================ display( container ); // ============================================================ // MOSTRAR GRÁFICO DE LÍNEAS // ============================================================ display( lineContainer );2f:T461,// ============================================================ // Una interpretación breve (1–2 frases): ¿qué historia cuentan las dos vistas juntas que no contaría el bubble //chart solo? // //R: El bubble chart permite comparar los países en un momento determinado, mientras que el gráfico de líneas //permite //ver cómo cambia la esperanza de vida a través de los años. Al combinar ambas vistas, podemos observar //las //diferencias entre los países y también su evolución entre los años 1952 y 2007. // //GRUPO 6 //Pregunta: // //Dentro de un mismo continente (mismo color en el gráfico), ¿hay países que se separan visiblemente del resto de //sus vecinos regionales, a pesar de partir de una posición similar en 1952? // //R: Sí. En África se observa que países que partían con una esperanza de vida parecida en 1952 no evolucionaron de //la misma manera. Por ejemplo, Sudáfrica se va alejando de otros países africanos, mostrando cómo las brechas de //desarrollo pueden aumentar incluso dentro de un mismo continente. // // // ============================================================30:[{"id":"a2b968a133d1dd7db4e8329ed4735baef1be5fbe80bd5980ca0090e7e33e2702bdcc46dd3e7b824bc365b1763214c49a3ff80aa6402cee89702d2ace901e9652","href":"https://static.observableusercontent.com/files/a2b968a133d1dd7db4e8329ed4735baef1be5fbe80bd5980ca0090e7e33e2702bdcc46dd3e7b824bc365b1763214c49a3ff80aa6402cee89702d2ace901e9652","name":"gapminder.csv","type":"text/csv","lastModified":1790292873893,"size":43608}] 2c:{"id":"6101d74e7ff02e3e","slug":"untitled","title":"","thumbnail":"82d43ea0829f3bdd0655de0ec0cce5104ceda1d94a7f9a974eef35da71ff878c","access_level":"public","create_time":"$D2026-09-24T23:37:15.648Z","update_time":"$D2026-09-26T21:27:40.699Z","view_time":null,"first_public_time":"$D2026-09-26T21:11:05.342Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7910c0e8669d056d","login":"esteban-castro","name":"Esteban castro","avatar_url":"https://avatars-next.observableusercontent.com/78c24b3552e855389c20a459160722aa203f5ff10fb10476793c2ba2dcc22e22","tier":"free_2026"},"version":96,"publish_version":96,"role":null,"authored":false,"authors":[{"type":"individual","id":"7298403f21e5a93f","login":"esteban-castro","name":"Esteban castro","avatar_url":"https://avatars-next.observableusercontent.com/78c24b3552e855389c20a459160722aa203f5ff10fb10476793c2ba2dcc22e22","tier":null}],"members":[{"type":"team","id":"7910c0e8669d056d","login":"esteban-castro","name":"Esteban castro","avatar_url":"https://avatars-next.observableusercontent.com/78c24b3552e855389c20a459160722aa203f5ff10fb10476793c2ba2dcc22e22","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"$undefined","cells":[{"id":19,"value":"Ejercicio 6 D3.js (En Observable)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1,"value":"Visualizacion de datos ejercicio 6\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"gapminder.csv\").csv({typed: true})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$2e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$2f","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"2","titling":"auto"}} 2d:"$2c:body"