3f:null 40:["$","title",null,{"children":"Actividad grupal: Vistas vinculadas e interactividad avanzada con D3.js | Luis Jofre | Observable"}] 46:T65e5,// GRUPO 1 · Celda JavaScript para Observable Notebooks 2.0. //A.Leon - A.Rachet - G.Ruelas - L.Jofre // Antes de pegarla: adjunta gapminder.csv y crea una celda anterior con // const data = await FileAttachment("gapminder.csv").csv({typed: true}); // Pega TODO este archivo en UNA sola celda JavaScript, sin la extensión .html. const observableGapminderRoot = document.createElement("div"); const shadow = observableGapminderRoot.attachShadow({mode: "open"}); shadow.innerHTML = `

INF3531 · Grupo 1 (A.Leon - A.Rachet - G.Ruelas - L.Jofre)

Vistas vinculadas e interactividad avanzada con D3.js

Compara los 76 países entre 1952 y 2007. Haz clic en las burbujas para ver sus trayectorias históricas vinculadas y usa el control de año para examinar el patrón.

Pregunta · Grupo 1 Casi todos los países siguen un patrón: a mayor PIB per cápita, mayor esperanza de vida. ¿Hay algún país que rompa claramente ese patrón —mucho más "rico" o mucho más "sano" de lo que le correspondería según el resto?

01 · Relación entre PIB per cápita y Esperanza de vida

Cada burbuja representa un país en el año mostrado.

2007Mueve el control para inspeccionar cualquier corte de año.

19522007

02 · Trayectoria histórica

Serie completa de los países seleccionados (máximo 3); la línea vertical indica el año del gráfico principal.

03 · Interpretación integrada

Grupo 1 · Valor atípico

Fuente: gapminder.csv facilitado en la actividad (76 países, 12 observaciones quinquenales por país). El área de cada burbuja es proporcional a la población del país. Las líneas unen registros observados cada cinco años; no describen cambios intermedios ni permiten concluir causas.
Declaración de uso de IA: Utilizamos herramientas de inteligencia artificial como apoyo para generar y mejorar partes del código D3.js. El grupo seleccionó los países, tomó las decisiones de diseño de ambas visualizaciones y revisó que la interpretación estuviera respaldada por los datos.

`; (() => { "use strict"; // 1. Convertir el CSV a números y organizarlo por país y año. const rows = data.map(d => ({ country:d.country, year:+d.year, pop:+d.pop, continent:d.continent, lifeExp:+d.lifeExp, gdpPercap:+d.gdpPercap })).filter(d => d.gdpPercap > 0 && d.pop > 0 && Number.isFinite(d.lifeExp)); const years = [...new Set(rows.map(d => d.year))].sort((a,b) => a-b); const byCountry = d3.group(rows, d => d.country); for (const series of byCountry.values()) series.sort((a,b) => a.year-b.year); const byYear = d3.group(rows, d => d.year); const continents = ["Africa","Americas","Asia","Europe","Oceania"]; const color = d3.scaleOrdinal().domain(continents).range(["#c15e39","#3079ae","#8e69aa","#318570","#b78526"]); const num = n => new Intl.NumberFormat("es-CL", {maximumFractionDigits:0}).format(n); const one = n => new Intl.NumberFormat("es-CL", {minimumFractionDigits:1,maximumFractionDigits:1}).format(n); const getDate = year => new Date(Date.UTC(year,0,1)); const group1Case = { title:"Grupo 1 · Valor atípico", countries:["Botswana","Chile"], year:2007, metric:"lifeExp", text:"En 2007, Botsuana y Chile tenían un PIB per cápita similar (12.570 y 13.172, respectivamente), pero la esperanza de vida era 27,8 años menor en Botsuana (50,7 frente a 78,6): un contraste que la aparta del patrón riqueza–salud. La vista temporal muestra que la esperanza de vida de Botsuana cayó de 63,6 años en 1987 a 46,6 en 2002, mientras que la de Chile aumentó." }; const state = {selected:new Set(), year:2007, metric:"lifeExp", caseLoaded:false, playing:false, timer:null}; const bubbleSvg = d3.select(shadow.querySelector("#bubble-chart")); const BW=900, BH=500, BM={left:75,right:27,top:35,bottom:66}; // 2. Canales del bubble chart: X = PIB, Y = vida, área = población. const x = d3.scaleLog().domain([d3.min(rows,d=>d.gdpPercap)*0.78,d3.max(rows,d=>d.gdpPercap)*1.18]).range([BM.left,BW-BM.right]); const y = d3.scaleLinear().domain([25,85]).range([BH-BM.bottom,BM.top]); const radius = d3.scaleSqrt().domain([0,d3.max(rows,d=>d.pop)]).range([0,42]); const plotWidth = BW-BM.left-BM.right; bubbleSvg.append("g").attr("class","grid").attr("transform",`translate(${BM.left},0)`) .call(d3.axisLeft(y).tickValues([30,40,50,60,70,80]).tickSize(-plotWidth).tickFormat("")); bubbleSvg.append("g").attr("class","axis").attr("transform",`translate(0,${BH-BM.bottom})`) .call(d3.axisBottom(x).tickValues([500,1000,2500,5000,10000,25000,50000]).tickFormat(d=>`$${d3.format("~s")(d)}`)); bubbleSvg.append("g").attr("class","axis").attr("transform",`translate(${BM.left},0)`) .call(d3.axisLeft(y).tickValues([30,40,50,60,70,80])); bubbleSvg.append("text").attr("class","axis-title").attr("x",BW/2).attr("y",BH-12) .attr("text-anchor","middle").text("PIB per cápita · escala logarítmica"); bubbleSvg.append("text").attr("class","axis-title").attr("transform",`translate(18,${BH/2}) rotate(-90)`) .attr("text-anchor","middle").text("Esperanza de vida · años"); const watermark = bubbleSvg.append("text").attr("class","year-watermark") .attr("x",BW-BM.right-5).attr("y",BM.top+39).attr("text-anchor","end"); const bubbles = bubbleSvg.append("g").attr("class","bubbles"); const labels = bubbleSvg.append("g").attr("class","bubble-labels"); const tooltip = d3.select(shadow.querySelector("#tooltip")), bubbleWrap=shadow.querySelector("#bubble-wrap"); function tooltipText(d) { tooltip.html(`${d.country} · ${d.year}PIB per cápita: $${num(d.gdpPercap)}
Esperanza de vida: ${one(d.lifeExp)} años
Población: ${num(d.pop)}`); } function placeTooltip(event) { const box=bubbleWrap.getBoundingClientRect(); const left=Math.max(4,Math.min(event.clientX-box.left+13,box.width-tooltip.node().offsetWidth-5)); const top=Math.max(4,Math.min(event.clientY-box.top-20,box.height-tooltip.node().offsetHeight-5)); tooltip.style("left",`${left}px`).style("top",`${top}px`); } function showTooltip(event,d) { tooltipText(d); tooltip.style("display","block"); placeTooltip(event); } function hideTooltip() { tooltip.style("display","none"); } // 3. Clic sobre una burbuja: coordina ambas vistas. function selectedCountry(country) { if (state.selected.has(country)) state.selected.delete(country); else if (state.selected.size<3) state.selected.add(country); else { shadow.querySelector("#selection-message").textContent="Puedes comparar hasta tres países. Desmarca uno o pulsa Limpiar."; return; } state.caseLoaded=false; renderBubble(false); renderLines(); renderAnalysis(); } // 4. Redibujar las burbujas de un año, con transición opcional. function renderBubble(animated) { const frame=[...byYear.get(state.year)].sort((a,b)=>b.pop-a.pop); watermark.text(state.year); shadow.querySelector("#year-output").textContent=state.year; shadow.querySelector("#year-slider").value=years.indexOf(state.year); const node=bubbles.selectAll("g.bubble-node").data(frame,d=>d.country).join( enter=>{ const group=enter.append("g").attr("class","bubble-node").attr("data-country",d=>d.country); group.append("circle").attr("class","bubble-mark").attr("aria-hidden","true"); group.append("circle").attr("class","bubble-hit").attr("fill","transparent") .attr("tabindex",0).attr("role","button") .on("pointerenter",showTooltip).on("pointermove",(event,d)=>{ tooltipText(d); placeTooltip(event); }) .on("pointerleave",hideTooltip).on("click",(event,d)=>selectedCountry(d.country)) .on("keydown",(event,d)=>{if(event.key==="Enter"||event.key===" "){event.preventDefault();selectedCountry(d.country);}}); return group; }, update=>update, exit=>exit.remove() ).order(); node.classed("is-selected",d=>state.selected.has(d.country)); node.each(function(d){ if(state.selected.has(d.country)) d3.select(this).raise(); }); const marks=node.select("circle.bubble-mark"); const changed=animated?marks.transition().duration(720).ease(d3.easeCubicInOut):marks.interrupt(); changed.attr("cx",d=>x(d.gdpPercap)).attr("cy",d=>y(d.lifeExp)) .attr("r",d=>radius(d.pop)).attr("fill",d=>color(d.continent)) .attr("opacity",d=>state.selected.size&&!state.selected.has(d.country)?0.36:0.88); const hits=node.select("circle.bubble-hit"); const changedHits=animated?hits.transition().duration(720).ease(d3.easeCubicInOut):hits.interrupt(); changedHits.attr("cx",d=>x(d.gdpPercap)).attr("cy",d=>y(d.lifeExp)) .attr("r",d=>Math.max(7,radius(d.pop))) .attr("aria-label",d=>`${state.selected.has(d.country)?"Quitar":"Seleccionar"} ${d.country}, ${d.year}`); labels.selectAll("text.selected-label").data(frame.filter(d=>state.selected.has(d.country)),d=>d.country) .join("text").attr("class","selected-label").attr("x",d=>Math.min(BW-BM.right-90,x(d.gdpPercap)+radius(d.pop)+7)) .attr("y",(d,i)=>y(d.lifeExp)-7+(i%2)*13).text(d=>d.country); renderYearMarker(); } const lineSvg=d3.select(shadow.querySelector("#line-chart")), LW=650,LH=360,LM={left:70,right:112,top:28,bottom:56}; const timelineX=d3.scaleUtc().domain([getDate(years[0]),getDate(years.at(-1))]).range([LM.left,LW-LM.right]); let timelineY=d3.scaleLinear().domain([25,85]).range([LH-LM.bottom,LM.top]); lineSvg.append("g").attr("class","grid line-grid").attr("transform",`translate(${LM.left},0)`); lineSvg.append("g").attr("class","axis line-y-axis").attr("transform",`translate(${LM.left},0)`); lineSvg.append("g").attr("class","axis").attr("transform",`translate(0,${LH-LM.bottom})`) .call(d3.axisBottom(timelineX).tickValues(years.filter((_,i)=>i%2===0||i===years.length-1).map(getDate)).tickFormat(d3.utcFormat("%Y"))); lineSvg.append("text").attr("class","axis-title line-axis-title").attr("transform",`translate(17,${LH/2}) rotate(-90)`) .attr("text-anchor","middle"); lineSvg.append("text").attr("class","axis-title").attr("x",(LM.left+LW-LM.right)/2) .attr("y",LH-9).attr("text-anchor","middle").text("Año"); const yearGuide=lineSvg.append("g"); yearGuide.append("line").attr("y1",LM.top).attr("y2",LH-LM.bottom) .attr("stroke","#8198a7").attr("stroke-width",1.2).attr("stroke-dasharray","5 5"); const lineLayer=lineSvg.append("g"), pointLayer=lineSvg.append("g"), markerLayer=lineSvg.append("g"), endLayer=lineSvg.append("g"); lineSvg.append("text").attr("class","no-selection").attr("x",(LM.left+LW-LM.right)/2) .attr("y",LH/2).attr("text-anchor","middle").attr("fill","#78909f").attr("font-size",15) .text("Selecciona un país en el gráfico de burbujas"); // 5. Línea vertical y puntos del año activo en la segunda vista. function renderYearMarker() { if (!yearGuide) return; const markerX=timelineX(getDate(state.year)); yearGuide.attr("transform",`translate(${markerX},0)`); const metric=state.metric, series=[...state.selected].map(country=>byCountry.get(country).find(d=>d.year===state.year)); markerLayer.selectAll("circle.current-point").data(series,d=>d.country) .join("circle").attr("class","current-point").attr("cx",markerX) .attr("cy",d=>timelineY(d[metric])).attr("r",6) .attr("fill",d=>color(d.continent)).attr("stroke","#fff").attr("stroke-width",2); } // 6. Dibujar las 12 observaciones de cada país seleccionado. function renderLines() { const isLife=state.metric==="lifeExp"; timelineY=isLife ? d3.scaleLinear().domain([25,85]).range([LH-LM.bottom,LM.top]) : d3.scaleLog().domain([d3.min(rows,d=>d.gdpPercap)*0.78,d3.max(rows,d=>d.gdpPercap)*1.18]).range([LH-LM.bottom,LM.top]); const tickValues=isLife?[30,40,50,60,70,80]:[500,1000,2500,5000,10000,25000,50000]; lineSvg.select(".line-grid").call(d3.axisLeft(timelineY).tickValues(tickValues).tickSize(-(LW-LM.left-LM.right)).tickFormat("")); lineSvg.select(".line-y-axis").call(d3.axisLeft(timelineY).tickValues(tickValues) .tickFormat(isLife?d=>d:d=>`$${d3.format("~s")(d)}`)); lineSvg.select(".line-axis-title").text(isLife?"Esperanza de vida · años":"PIB per cápita · escala logarítmica"); const series=[...state.selected].map(country=>({country,values:byCountry.get(country)})); const line=d3.line().x(d=>timelineX(getDate(d.year))).y(d=>timelineY(d[state.metric])).curve(d3.curveLinear); lineLayer.selectAll("path.history-line").data(series,d=>d.country).join("path") .attr("class","history-line").attr("fill","none") .attr("stroke",d=>color(d.values[0].continent)).attr("stroke-width",3) .attr("stroke-dasharray",(d,i)=>i===1?"8 5":i===2?"3 4":null) .attr("d",d=>line(d.values)); pointLayer.selectAll("circle.history-point").data(series.flatMap(s=>s.values),d=>d.country+"-"+d.year) .join("circle").attr("class","history-point").attr("r",3) .attr("cx",d=>timelineX(getDate(d.year))).attr("cy",d=>timelineY(d[state.metric])) .attr("fill",d=>color(d.continent)).attr("stroke","white").attr("stroke-width",1); endLayer.selectAll("text.end-label").data(series,d=>d.country).join("text").attr("class","end-label") .attr("x",timelineX(getDate(years.at(-1)))+8) .attr("y",(d,i)=>timelineY(d.values.at(-1)[state.metric])+4+(i===2?8:0)) .attr("font-size",12).attr("font-weight",750).attr("fill",d=>color(d.values[0].continent)) .text(d=>d.country.length>17?d.country.slice(0,15)+"…":d.country); lineSvg.select(".no-selection").style("display",series.length?"none":null); shadow.querySelectorAll("[data-metric]").forEach(btn=>btn.setAttribute("aria-pressed",String(btn.dataset.metric===state.metric))); shadow.querySelector("#selected-list").replaceChildren(...series.map(s=>{ const pill=document.createElement("span");pill.className="pill"; pill.style.setProperty("--swatch",color(s.values[0].continent));pill.textContent=s.country;return pill; })); renderYearMarker(); } function renderAnalysis() { const title=shadow.querySelector("#analysis-title"), text=shadow.querySelector("#analysis-text"); shadow.querySelector("#selection-message").textContent=state.selected.size? `${state.selected.size} de 3 países seleccionados. Haz clic de nuevo sobre una burbuja para quitarla.`: "Selecciona una burbuja o carga un caso para comenzar."; if(state.caseLoaded) { title.textContent=group1Case.title; text.textContent=group1Case.text; return; } title.textContent="Grupo 1 · Exploración"; const chosen=[...state.selected]; if (!chosen.length) {text.textContent="La selección en el gráfico principal determina las series de 1952 a 2007 que aparecen arriba."; return;} if (chosen.length===1) { const series=byCountry.get(chosen[0]),a=series[0],b=series.at(-1); text.textContent=`${chosen[0]} pasa de ${one(a.lifeExp)} a ${one(b.lifeExp)} años de esperanza de vida entre 1952 y 2007; en ese mismo período, el PIB per cápita pasa de $${num(a.gdpPercap)} a $${num(b.gdpPercap)}. Usa la línea para identificar avances o retrocesos entre esos extremos.`; } else { text.textContent=`Compara ${chosen.join(", ")} en el mismo año del gráfico principal. Las líneas muestran cuándo sus trayectorias se acercan, se separan o retroceden entre los 12 años.`; } } function pause() { if(state.timer) clearInterval(state.timer); state.timer=null;state.playing=false; shadow.querySelector("#play-btn").textContent="▶ Reproducir"; } function setYear(year,animated=false) {state.year=year;renderBubble(animated);} // 7. Restablecer el caso asignado al Grupo 1. function loadGroup1() { pause(); state.selected=new Set(group1Case.countries);state.caseLoaded=true; state.metric=group1Case.metric;state.year=group1Case.year; renderBubble(false);renderLines();renderAnalysis(); } shadow.querySelector("#reset-case").addEventListener("click",loadGroup1); shadow.querySelectorAll("[data-metric]").forEach(btn=>btn.addEventListener("click",()=>{state.metric=btn.dataset.metric;renderLines();})); shadow.querySelector("#year-slider").addEventListener("input",event=>{pause();setYear(years[+event.target.value]);}); shadow.querySelector("#play-btn").addEventListener("click",()=>{ if(state.playing) {pause();return;} state.playing=true;shadow.querySelector("#play-btn").textContent="Ⅱ Pausar"; if(state.year===years.at(-1)) setYear(years[0],false); state.timer=setInterval(()=>{const i=years.indexOf(state.year);setYear(years[(i+1)%years.length],true);},1020); }); const picker=shadow.querySelector("#country-select"); for(const country of [...byCountry.keys()].sort((a,b)=>a.localeCompare(b,"es"))) { const option=document.createElement("option");option.value=country;option.textContent=country;picker.append(option); } picker.addEventListener("change",()=>{if(picker.value) selectedCountry(picker.value);picker.value="";}); shadow.querySelector("#clear-btn").addEventListener("click",()=>{ state.selected.clear();state.caseLoaded=false; renderBubble(false);renderLines();renderAnalysis(); }); const legend=d3.select(shadow.querySelector("#continent-legend")); continents.forEach(continent=>{ const item=legend.append("span").attr("class","key-item"); item.append("span").attr("class","swatch").style("--swatch",color(continent)); item.append("span").text(({Africa:"África",Americas:"Américas",Asia:"Asia",Europe:"Europa",Oceania:"Oceanía"})[continent]); }); loadGroup1(); invalidation.then(pause); // Libera el temporizador al volver a ejecutar esta celda. })(); // En Observable 2.0 las celdas con declaraciones requieren display(...). display(observableGapminderRoot); 47:[{"id":"a2b968a133d1dd7db4e8329ed4735baef1be5fbe80bd5980ca0090e7e33e2702bdcc46dd3e7b824bc365b1763214c49a3ff80aa6402cee89702d2ace901e9652","href":"https://static.observableusercontent.com/files/a2b968a133d1dd7db4e8329ed4735baef1be5fbe80bd5980ca0090e7e33e2702bdcc46dd3e7b824bc365b1763214c49a3ff80aa6402cee89702d2ace901e9652","name":"gapminder.csv","type":"text/csv","lastModified":1790288271946,"size":43608}] 44:{"id":"f24d61fc592d2d61","slug":"grupo-1-gapminder-vistas-vinculadas","title":"Actividad grupal: Vistas vinculadas e interactividad avanzada con D3.js","thumbnail":"4a05d3dcd3a3498745ac0e9b56467758510abbc0348c268fe34b13fc31994d20","access_level":"public","create_time":"$D2026-09-25T13:20:10.290Z","update_time":"$D2026-09-27T20:59:06.667Z","view_time":null,"first_public_time":"$D2026-09-25T13:20:20.935Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"7a0e039927996f57","login":"luis-jofre","name":"Luis Jofre","avatar_url":"https://avatars-next.observableusercontent.com/2665995baca4b9321896c44ab5c802ae459c1a6f558452bcbe67224c45c5a4d5","tier":"free_2026","bio":"","following":false},"version":27,"publish_version":27,"role":null,"authored":false,"authors":[{"type":"individual","id":"a373f856441e32ee","login":"luis-jofre","name":"Luis Jofre","avatar_url":"https://avatars-next.observableusercontent.com/2665995baca4b9321896c44ab5c802ae459c1a6f558452bcbe67224c45c5a4d5","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"7a0e039927996f57","login":"luis-jofre","name":"Luis Jofre","avatar_url":"https://avatars-next.observableusercontent.com/2665995baca4b9321896c44ab5c802ae459c1a6f558452bcbe67224c45c5a4d5","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Actividad grupal: Vistas vinculadas e interactividad avanzada con D3.js","cells":[{"id":1,"value":"# Actividad grupal: Vistas vinculadas e interactividad avanzada con D3.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"const data = await FileAttachment(\"gapminder.csv\").csv({typed: true});\ndisplay(`Cargadas ${data.length} filas.`);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$46","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"2"}} 45:"$44:body"