29:null 2a:["$","title",null,{"children":"Actividad 7 – Grupo 8 | Gisell Fuentes | Observable"}] 2f:T42ec,// ============================================================ // ACTIVIDAD GRUPAL 7 — Vistas vinculadas con D3.js // Grupo 8 · INF3531 Visualización de Datos // Pregunta: dos países que en 1952 estaban juntos… ¿en qué década se separan? // Mejoras: (1) estela de trayectoria en el bubble chart // (2) anotación del punto de quiebre en el gráfico de líneas // ------------------------------------------------------------ // Esta celda REEMPLAZA a la celda principal del tutorial de clase. // Contiene: (A) el bubble chart de clase, (B) el nuevo gráfico de // líneas y (C) la conexión entre ambos (vista vinculada). // ============================================================ // Empezamos sin países seleccionados cada vez que la celda se ejecuta selected.clear(); // Países que usamos para responder la pregunta del grupo const PAISES_GRUPO = ["Singapore", "Bulgaria"]; // Contenedor general (aquí viven los dos gráficos, uno bajo el otro) const container = html`

`; // ============================================================ // (A) BUBBLE CHART - código de clase (pasos 1 a 7) // ============================================================ // Título d3.select(container).append("h2") .style("font", "600 18px sans-serif") .style("margin", "0 0 8px") .text("Gapminder: PIB per cápita vs esperanza de vida (1952-2007)"); // Barra de controles: Pausa/Play, deslizador de año y botones de selección const controls = d3.select(container).append("div") .style("display", "flex") .style("gap", "8px") .style("align-items", "center") .style("flex-wrap", "wrap") .style("margin", "0 0 8px"); const pauseBtn = controls.append("button").text("Pausa").style("cursor", "pointer"); const years = [...new Set(data.map(d => d.year))].sort((a, b) => a - b); const slider = controls.append("input") .attr("type", "range") .attr("min", 0) .attr("max", years.length - 1) .attr("step", 1) .attr("value", 0) .attr("aria-label", "Año") .style("width", "220px"); const sliderLabel = controls.append("span").style("min-width", "36px"); const groupBtn = controls.append("button") .text(`Ver ${PAISES_GRUPO.join(" vs ")}`) .style("cursor", "pointer"); const clearBtn = controls.append("button") .text("Limpiar selección") .style("cursor", "pointer"); // Lienzo del bubble chart const svg = d3.select(container) .append("svg") .attr("width", 900) .attr("height", 600) .attr("viewBox", "0 0 900 600") .style("max-width", "100%") .style("height", "auto"); // Escalas (con TODOS los años) const x = d3.scaleLog() // PIB → horizontal (logarítmica) .domain(d3.extent(data, d => d.gdpPercap)) .range([60, 840]) .nice(); const y = d3.scaleLinear() // Esperanza de vida → vertical .domain(d3.extent(data, d => d.lifeExp)) .range([540, 40]) .nice(); const r = d3.scaleSqrt() // Población → ÁREA del círculo .domain([0, d3.max(data, d => d.pop)]) .range([2, 40]); const color = d3.scaleOrdinal() // Continente → color categórico .domain(["Africa", "Americas", "Asia", "Europe", "Oceania"]) .range(d3.schemeTableau10); // Ejes svg.append("g") .attr("class", "x-axis") .attr("transform", "translate(0,540)") .call(d3.axisBottom(x).ticks(8, "$,.0f")); svg.append("g") .attr("class", "y-axis") .attr("transform", "translate(60,0)") .call(d3.axisLeft(y)); // Títulos de los ejes svg.append("text") .attr("x", 840).attr("y", 575) .attr("text-anchor", "end") .attr("font-size", 12) .text("PIB per cápita (US$, escala logarítmica) →"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -40).attr("y", 18) .attr("text-anchor", "end") .attr("font-size", 12) .text("Esperanza de vida (años) →"); // Año grande de fondo const yearLabel = svg.append("text") .attr("x", 820) .attr("y", 80) .attr("text-anchor", "end") .attr("font-size", 36) .attr("fill", "#bbb"); // MEJORA 1 - capa de ESTELAS (va antes que las burbujas, así queda debajo) const trailsG = svg.append("g").attr("class", "trails"); // Capa de burbujas const bubbles = svg.append("g").attr("class", "bubbles"); // Leyenda de continentes const legend = svg.append("g").attr("transform", "translate(80, 20)"); color.domain().forEach((name, idx) => { const row = legend.append("g").attr("transform", `translate(0, ${idx * 18})`); row.append("circle").attr("r", 6).attr("fill", color(name)); row.append("text").attr("x", 12).attr("y", 4).attr("font-size", 12).text(name); }); // Tooltip (details on demand) 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} (${d.year})
` + `PIB per cápita: $${d.gdpPercap.toFixed(0)}
` + `Esperanza de vida: ${d.lifeExp.toFixed(1)} años
` + `Población: ${d3.format(",")(d.pop)}
` + `Clic para ver su trayectoria` ) .style("left", (px + 12) + "px") .style("top", (py - 20) + "px"); } function hideTooltip() { tooltip.style("opacity", 0); } // ============================================================ // (B) GRÁFICO DE LÍNEAS - la nueva vista (1952–2007) // ============================================================ // Selector: qué variable mostrar en el gráfico de líneas const VARIABLES = { lifeExp: { label: "Esperanza de vida (años)", scale: d3.scaleLinear, format: d => d.toFixed(1) + " años" }, gdpPercap: { label: "PIB per cápita (US$, escala log)", scale: d3.scaleLog, format: d => "$" + d3.format(",.0f")(d) } }; let variable = "gdpPercap"; const lineControls = d3.select(container).append("div").style("margin", "16px 0 4px"); lineControls.append("b").text("Trayectoria histórica de los países seleccionados — "); const varSelect = lineControls.append("select").style("margin-left", "4px"); varSelect.selectAll("option") .data(Object.keys(VARIABLES)) .join("option") .attr("value", k => k) .property("selected", k => k === variable) .text(k => VARIABLES[k].label); // Medidas del segundo lienzo const LW = 900, LH = 320; const lm = { top: 20, right: 150, bottom: 40, left: 70 }; const lineSvg = d3.select(container) .append("svg") .attr("width", LW) .attr("height", LH) .attr("viewBox", `0 0 ${LW} ${LH}`) .style("max-width", "100%") .style("height", "auto"); // Escala TEMPORAL para el eje horizontal (años como fechas) const toDate = year => new Date(year, 0, 1); const xLine = d3.scaleTime() .domain([toDate(1952), toDate(2007)]) .range([lm.left, LW - lm.right]); // Escala vertical (cambia según la variable elegida) let yLine; // MEJORA 2 - ANOTACIÓN DEL QUIEBRE: franja sombreada 1967–1977 // (se dibuja primero para que quede DETRÁS de las líneas) const QUIEBRE = [1967, 1977]; const annotation = lineSvg.append("g").style("display", "none"); annotation.append("rect") .attr("x", xLine(toDate(QUIEBRE[0]))) .attr("width", xLine(toDate(QUIEBRE[1])) - xLine(toDate(QUIEBRE[0]))) .attr("y", lm.top) .attr("height", LH - lm.top - lm.bottom) .attr("fill", "#f2c14e") .attr("opacity", 0.18); annotation.append("text") .attr("x", (xLine(toDate(QUIEBRE[0])) + xLine(toDate(QUIEBRE[1]))) / 2) .attr("y", lm.top + 14) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("font-weight", 600) .attr("fill", "#8a6d1d") .text("Punto de quiebre (1967–1977)"); // El subtítulo cambia según la variable, para que diga exactamente lo que muestran los datos const annotationSub = annotation.append("text") .attr("x", (xLine(toDate(QUIEBRE[0])) + xLine(toDate(QUIEBRE[1]))) / 2) .attr("y", lm.top + 28) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("fill", "#8a6d1d"); const ANOTACION = { gdpPercap: "El PIB de Singapur supera al de Bulgaria (1970)", lifeExp: "Bulgaria se estanca en 71 años; Singapur la alcanza en 1977" }; // La anotación solo tiene sentido si están seleccionados los dos países del grupo function updateAnnotation() { const visible = PAISES_GRUPO.every(c => selected.has(c)); annotation.style("display", visible ? null : "none"); annotationSub.text(ANOTACION[variable]); } const xLineAxisG = lineSvg.append("g") .attr("transform", `translate(0,${LH - lm.bottom})`) .call(d3.axisBottom(xLine).ticks(d3.timeYear.every(5)).tickFormat(d3.timeFormat("%Y"))); const yLineAxisG = lineSvg.append("g") .attr("transform", `translate(${lm.left},0)`); const yLineTitle = lineSvg.append("text") .attr("transform", "rotate(-90)") .attr("x", -lm.top).attr("y", 16) .attr("text-anchor", "end") .attr("font-size", 12); lineSvg.append("text") .attr("x", LW - lm.right).attr("y", LH - 6) .attr("text-anchor", "end") .attr("font-size", 12) .text("Año →"); // Línea vertical que marca el año de la animación (une ambas vistas en el tiempo) const yearMarker = lineSvg.append("line") .attr("y1", lm.top) .attr("y2", LH - lm.bottom) .attr("stroke", "#999") .attr("stroke-dasharray", "4 4"); const linesG = lineSvg.append("g"); // Mensaje cuando no hay nada seleccionado const emptyMsg = lineSvg.append("text") .attr("x", (lm.left + LW - lm.right) / 2) .attr("y", LH / 2) .attr("text-anchor", "middle") .attr("fill", "#888") .attr("font-size", 14) .text("Haz clic en una o más burbujas para ver su trayectoria 1952–2007"); // Generador de la línea const lineGen = d3.line() .x(d => xLine(toDate(d.year))) .y(d => yLine(d[variable])); // Dibuja (o redibuja) las líneas de los países seleccionados function updateLines() { const cfg = VARIABLES[variable]; // Escala vertical fija con TODOS los datos (así la comparación es justa) yLine = cfg.scale() .domain(d3.extent(data, d => d[variable])) .range([LH - lm.bottom, lm.top]) .nice(); yLineAxisG.transition().duration(500) .call(variable === "gdpPercap" ? d3.axisLeft(yLine).ticks(6, "$,.0f") : d3.axisLeft(yLine)); yLineTitle.text(cfg.label); // Una serie (lista de 12 años) por país seleccionado const series = [...selected].map(country => ({ country, continent: data.find(d => d.country === country).continent, values: data.filter(d => d.country === country).sort((a, b) => a.year - b.year) })); emptyMsg.style("display", series.length ? "none" : null); updateAnnotation(); // Un grupo por país: línea + puntos + nombre al final const groups = linesG.selectAll("g.serie") .data(series, s => s.country) .join(enter => { const g = enter.append("g").attr("class", "serie"); g.append("path").attr("fill", "none").attr("stroke-width", 2.5); g.append("g").attr("class", "puntos"); g.append("text").attr("class", "nombre").attr("font-size", 12).attr("dx", 6).attr("dy", 4); return g; }); groups.select("path") .attr("stroke", s => color(s.continent)) .transition().duration(500) .attr("d", s => lineGen(s.values)); groups.select("g.puntos") .selectAll("circle") .data(s => s.values) .join("circle") .attr("r", 3.5) .attr("fill", d => color(d.continent)) .attr("stroke", "white") .on("mouseover", showTooltip) .on("mouseout", hideTooltip) .transition().duration(500) .attr("cx", d => xLine(toDate(d.year))) .attr("cy", d => yLine(d[variable])); // Nombre del país al final de su línea (etiqueta directa en vez de leyenda) groups.select("text.nombre") .attr("fill", s => color(s.continent)) .text(s => s.country) .transition().duration(500) .attr("x", s => xLine(toDate(2007))) .attr("y", s => yLine(s.values[s.values.length - 1][variable])); } // ============================================================ // (C) COORDINACIÓN - el clic en una burbuja actualiza las líneas // ============================================================ // ============================================================ // MEJORA 1 - ESTELA DE TRAYECTORIA en el bubble chart // Cada país seleccionado deja un "rastro" desde 1952 hasta el año // que muestra la animación. Así se ve DÓNDE se separan los caminos. // ============================================================ let currentYear = years[0]; function updateTrails() { const trails = [...selected].map(country => ({ country, continent: data.find(d => d.country === country).continent, values: data .filter(d => d.country === country && d.year <= currentYear) .sort((a, b) => a.year - b.year) })); const trailLine = d3.line() .x(d => x(d.gdpPercap)) .y(d => y(d.lifeExp)); const groups = trailsG.selectAll("g.trail") .data(trails, t => t.country) .join(enter => { const g = enter.append("g").attr("class", "trail"); g.append("path") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-dasharray", "3 2") .attr("opacity", 0.9); g.append("g").attr("class", "trail-dots"); g.append("text").attr("class", "trail-start") .attr("font-size", 10).attr("dx", -6) .attr("text-anchor", "end"); return g; }); groups.select("path") .attr("stroke", t => color(t.continent)) .attr("d", t => trailLine(t.values)); // Un puntito por cada año recorrido (cada 5 años) groups.select("g.trail-dots") .selectAll("circle") .data(t => t.values) .join("circle") .attr("r", 2.5) .attr("fill", d => color(d.continent)) .attr("cx", d => x(d.gdpPercap)) .attr("cy", d => y(d.lifeExp)); // Etiqueta en el punto de partida: "Singapore 1952" groups.select("text.trail-start") .attr("fill", t => color(t.continent)) .attr("dy", (t, i) => i % 2 === 0 ? -6 : 14) // alterna arriba/abajo para que no se tapen .attr("x", t => x(t.values[0].gdpPercap)) .attr("y", t => y(t.values[0].lifeExp)) .text(t => `${t.country} 1952`); } // Resalta en el bubble chart los países elegidos function highlightBubbles() { updateTrails(); bubbles.selectAll("circle") .attr("opacity", c => selected.size === 0 || selected.has(c.country) ? 0.9 : 0.15) .attr("stroke", c => selected.has(c.country) ? "black" : null) .attr("stroke-width", c => selected.has(c.country) ? 1.5 : null); // Los seleccionados se dibujan encima de los demás bubbles.selectAll("circle").filter(c => selected.has(c.country)).raise(); } function onClick(event, d) { if (selected.has(d.country)) selected.delete(d.country); else selected.add(d.country); highlightBubbles(); updateLines(); // ← aquí está la vista vinculada } groupBtn.on("click", () => { selected.clear(); PAISES_GRUPO.forEach(c => selected.add(c)); highlightBubbles(); updateLines(); }); clearBtn.on("click", () => { selected.clear(); highlightBubbles(); updateLines(); }); varSelect.on("change", event => { variable = event.target.value; updateLines(); }); // ============================================================ // ANIMACIÓN año por año (código de clase + marcador en las líneas) // ============================================================ let i = 0; let running = true; function update(year) { const frame = data.filter(d => d.year === year); currentYear = year; // lo usa la estela yearLabel.text(year); sliderLabel.text(year); slider.property("value", years.indexOf(year)); yearMarker.attr("x1", xLine(toDate(year))).attr("x2", xLine(toDate(year))); bubbles.selectAll("circle") .data(frame, d => d.country) .join(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", 0.8) .style("cursor", "pointer") .on("mouseover", showTooltip) .on("mouseout", hideTooltip) .on("click", onClick) ) .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)); highlightBubbles(); } update(years[0]); updateLines(); const timer = d3.interval(() => { if (!running) return; i = (i + 1) % years.length; update(years[i]); }, 1000); // Si se reedita la celda, detener el reloj anterior invalidation.then(() => timer.stop()); pauseBtn.on("click", () => { running = !running; pauseBtn.text(running ? "Pausa" : "Play"); }); // Mover el deslizador = pausar e ir a ese año slider.on("input", event => { running = false; pauseBtn.text("Play"); i = +event.target.value; update(years[i]); }); display(container); 30:[{"id":"a2b968a133d1dd7db4e8329ed4735baef1be5fbe80bd5980ca0090e7e33e2702bdcc46dd3e7b824bc365b1763214c49a3ff80aa6402cee89702d2ace901e9652","href":"https://static.observableusercontent.com/files/a2b968a133d1dd7db4e8329ed4735baef1be5fbe80bd5980ca0090e7e33e2702bdcc46dd3e7b824bc365b1763214c49a3ff80aa6402cee89702d2ace901e9652","name":"gapminder.csv","type":"text/csv","lastModified":1790290293833,"size":43608}] 2d:{"id":"40de01cb3a6d3405","slug":"actividad-grupal-7-grupo-8","title":"Actividad 7 – Grupo 8","thumbnail":"58926cc9e42ff265058ab8a0a37354452418c6bd794e7a08f4cb32a6e2b7cd45","access_level":"public","create_time":"$D2026-09-27T17:36:29.942Z","update_time":"$D2026-09-27T19:59:31.152Z","view_time":null,"first_public_time":"$D2026-09-27T19:21:32.991Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f126843bfbf2575f","login":"gisell-fuentes","name":"Gisell Fuentes","avatar_url":"https://avatars-next.observableusercontent.com/5d8975001028855aed239c1cd55a2a864586948103cc199de201e4d10b89462b","tier":"free_2026"},"version":42,"publish_version":42,"role":null,"authored":false,"authors":[{"type":"individual","id":"c7a67c5bfd652650","login":"gisell-fuentes","name":"Gisell Fuentes","avatar_url":"https://avatars-next.observableusercontent.com/5d8975001028855aed239c1cd55a2a864586948103cc199de201e4d10b89462b","tier":null}],"members":[{"type":"team","id":"f126843bfbf2575f","login":"gisell-fuentes","name":"Gisell Fuentes","avatar_url":"https://avatars-next.observableusercontent.com/5d8975001028855aed239c1cd55a2a864586948103cc199de201e4d10b89462b","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Actividad 7 – Grupo 8","cells":[{"id":1,"value":"# Actividad 7 – Grupo 8\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":" data = FileAttachment(\"gapminder.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":" mutable selected = new Set()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$2f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Conclusión (Grupo 8)\n\n**Países analizados:** Singapur (Asia) y Bulgaria (Europa).\n\nEn 1952, Singapur y Bulgaria se encontraban prácticamente en el mismo punto, con un PIB per cápita cercano a los US$2.400 y una esperanza de vida de aproximadamente 60 años. Sin embargo, sus trayectorias comenzaron a diferenciarse durante la década de 1970. El gráfico de líneas muestra que el PIB per cápita de Singapur supera al de Bulgaria entre 1967 y 1972 y que, para 1982, ya lo duplica. Al mismo tiempo, la esperanza de vida en Bulgaria se estanca en torno a los 71 años durante casi tres décadas.\n\nLa vista vinculada permite identificar con mayor precisión aspectos que la animación no muestra con claridad, como el período en que se produce el cruce (entre 1967 y 1972) y la caída del PIB búlgaro entre 1987 y 1997, un cambio que ocurre rápidamente en la animación y puede pasar desapercibido.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"2","titling":"auto"}} 2e:"$2d:body"