// ============================================================ // 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);