2f:T110a,{ // Dimensiones del gráfico y márgenes const width = 600; // Ancho total del SVG const height = 400; // Alto total del SVG const margin = { top: 20, right: 20, bottom: 40, left: 50 }; // Márgenes internos // Datos para la gráfica const data = [ // Datos categóricos y numéricos { pais: "Brasil", valor: 50 }, { pais: "Uruguay", valor: 40 }, { pais: "Argentina", valor: 35 }, { pais: "Chile", valor: 28 }, { pais: "Paraguay", valor: 22 } ]; // Creamos un área de dibujo SVG const svg = d3.create("svg") // Crea un nuevo elemento SVG .attr("width", width) // Asigna ancho .attr("height", height); // Asigna alto const x = d3.scaleBand() // Escala categórica para el eje X .domain(data.map(d => d.pais)) // Mapea los países a rangos en eje X .range([margin.left, width - margin.right]) // Rango eje X (dentro del SVG) .padding(0.1); // Padding entre barras const y = d3.scaleLinear() // Escala lineal para el eje Y .domain([0, d3.max(data, d => d.valor)]) // Dominio desde 0 al valor máximo .range([height - margin.bottom, margin.top]); // Rango invertido: mayor valor más arriba // Grupos de primitivas SVG para los componentes en los ejes svg.append("g") // Eje X .attr("transform", `translate(0,${height - margin.bottom})`) // Lo traslada a la parte inferior del gráfico (dejando un margen) .call(d3.axisBottom(x)); // Dibuja los ticks y etiquetas del eje X svg.append("g") // Eje Y .attr("transform", `translate(${margin.left},0)`) // Lo traslada hacia la izquierda (dejando un margen) .call(d3.axisLeft(y)); // Dibuja los ticks y etiquetas del eje Y // Grupo de primitivas SVG para el tooltip SVG (texto flotante que se posiciona dinámicamente) var tooltip_group = svg.append("g") // Grupo para poder mover el texto con transform .style("visibility", "hidden"); // Oculto por defecto (solo se enciente cuando pasamos el mouse por la barra) var tooltip_text = tooltip_group.append("text") // Elemento de texto dentro del grupo .attr("text-anchor", "middle") // Centra el texto horizontalmente .style("font-family", '-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif') // Fuente .style("font-size", "10px") // Tamaño de fuente .style("fill", "orange") // Color del texto .style("font-weight", "bold") // Negrita .text(""); // Texto inicial vacío const margen_tooltip = 10; // Desplazamiento vertical del tooltip para que no tape la barra // Dibujamos las barras const barras = svg.selectAll("rect") // Selección de los elementos rectangulares .data(data) // Bind de datos .enter() // Entrada para cada dato .append("rect") // Agrega un rectángulo por dato .attr("x", d => x(d.pais)) // Posición horizontal según el país .attr("y", d => y(d.valor)) // Posición vertical según el valor .attr("width", x.bandwidth()) // Ancho de la barra (fijo, determinado por la escala X) .attr("height", d => y(0) - y(d.valor)) // Altura de la barra (acorde al valor, determinado por la escala Y) .attr("fill", "steelblue") // Color base de la barra .on("mouseover",function (d) { d3.select(this).style("fill","orange"); }) .on("mouseout",function () { d3.select(this).style("fill","steelblue"); }) // COMPLETAR return svg.node(); // Devuelve el nodo SVG para insertar en el DOM } 30:T525,### 🎯 Objetivos **Tooltip:** Mostrar un tooltip con el valor correspondiente al pasar el mouse sobre una barra. El tooltip debe seguir al cursor mientras se mueve dentro de la barra. **Resaltado y restauración:** El color de la barra debe cambiar al pasar el mouse (```mouseover```) y restaurarse al salir (```mouseout```). ### 📌 Diferencia respecto al ejercicio anterior En el ejercicio a, el tooltip se construía como un grupo (``````) dentro del SVG y se posicionaba en relación a cada barra. Esto es útil cuando queremos anclar el texto a un punto fijo del gráfico. En cambio, en este ejercicio vamos a usar un componente diferente (```

```) por fuera del SVG, que se anexa directamente al body del documento (es decir, al contenedor principal de todo el contenido visible de la página web). Esto permite posicionarlo libremente en la página para que el tooltip siga el cursor en todo momento. ### 💡 Pista técnica Para lograr este comportamiento, dentro del evento ```mousemove``` debemos actualizar la posición del ```

``` con ```.style("top", ...)``` y ```.style("left", ...)```, usando ```d3.event.pageY``` y ```d3.event.pageX``` para obtener la posición actual del cursor. Recordá agregar un pequeño desplazamiento (```+ margen```) para que el tooltip no tape al cursor.31:Tfec,{ // Dimensiones del gráfico y márgenes const width = 600; // Ancho total del SVG const height = 400; // Alto total del SVG const margin = { top: 20, right: 20, bottom: 40, left: 50 }; // Márgenes internos // Datos para la gráfica const data = [ // Datos a visualizar { pais: "Brasil", valor: 50 }, { pais: "Uruguay", valor: 40 }, { pais: "Argentina", valor: 35 }, { pais: "Chile", valor: 28 }, { pais: "Paraguay", valor: 22 } ]; // Creamos un área de dibujo (SVG) const svg = d3.create("svg") .attr("width", width) // Asigna ancho al SVG .attr("height", height); // Asigna alto al SVG // Escala horizontal (eje X) tipo categórica const x = d3.scaleBand() .domain(data.map(d => d.pais)) // Mapea los países a rangos en eje X .range([margin.left, width - margin.right]) // Rango: de margen izquierdo a derecho .padding(0.1); // Espaciado entre barras // Escala vertical (eje Y) lineal const y = d3.scaleLinear() .domain([0, d3.max(data, d => d.valor)]) // Dominio: de 0 al máximo valor .range([height - margin.bottom, margin.top]); // Rango: de abajo hacia arriba // Eje X (abajo) svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) // Posiciona el eje abajo .call(d3.axisBottom(x)); // Crea y agrega el eje X // Eje Y (izquierda) svg.append("g") .attr("transform", `translate(${margin.left},0)`) // Posiciona el eje a la izquierda .call(d3.axisLeft(y)); // Crea y agrega el eje Y // Tooltip (cuadro de texto flotante) var tooltip = d3.select("body").append("div") .style("position", "absolute") // Posicionamiento flotante .attr("text-anchor", "middle") // Centrado del texto .style("visibility", "hidden") // Inicialmente oculto .style("font-family", '-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif') .style("font-size", "10px") // Tamaño de letra .style("font-weight", "bold") // Texto en negrita .style("color", "#3d3d3d") // Color de texto .text(""); // Texto inicial vacío const margen_tooltip = 10 // Desplazamiento del tooltip respecto al cursor // Dibujamos las barras const barras = svg.selectAll("rect") .data(data) // Asigna datos .enter() // Crea un nodo por dato .append("rect") // Agrega una barra por dato .attr("x", d => x(d.pais)) // Posición horizontal .attr("y", d => y(d.valor)) // Posición vertical según valor .attr("width", x.bandwidth()) // Ancho según escala .attr("height", d => y(0) - y(d.valor)) // Alto relativo al eje Y .attr("fill", "steelblue") // Color de barra // Interacción: mouseover .on("mouseover", function(d) { // COMPLETAR }) // Interacción: movimiento dentro de la barra .on("mousemove", function() { // COMPLETAR }) // Interacción: mouseout .on("mouseout", function() { // COMPLETAR }); return svg.node(); // Devuelve el nodo SVG para ser insertado en el DOM } 32:T4a1,### 🎯 Objetivos Al hacer clic en una barra, esta debe quedar seleccionada: se resalta (por ejemplo, en color rosa). Si se hace clic en otra barra, la selección se actualiza. Si se hace clic nuevamente sobre la misma barra, se deselecciona (el color vuelve al original). El comportamiento de ```mouseover``` y ```mouseout``` solo debe activarse si no hay una barra seleccionada. ### 📌 Conceptos clave a poner en práctica Uso del evento ```click``` para detectar selecciones del usuario. Gestión de un estado de selección (qué barra está seleccionada). Condiciones dentro de los eventos ```mouseover``` y ```mouseout``` para evitar interferencias con la selección activa. ### 💡 Pista técnica Vas a necesitar una variable auxiliar (por ejemplo, ``` var seleccionada = null```) que recuerde cuál es la barra seleccionada en ese momento. En el evento ```click```, verificá si el valor seleccionado es el mismo que el clickeado: si lo es, deseleccionás; si no, actualizás la selección. En los eventos ```mouseover``` y ```mouseout```, usá condiciones del tipo ```if (seleccionada !== d.pais)``` para evitar sobrescribir el color de la barra seleccionada.33:T12c9,{ // Dimensiones del gráfico y márgenes const width = 600; // Ancho total del SVG const height = 400; // Alto total del SVG const margin = { top: 20, right: 20, bottom: 40, left: 50 }; // Márgenes internos // Datos para la gráfica const data = [ // Lista de países y sus valores asociados { pais: "Brasil", valor: 50 }, { pais: "Uruguay", valor: 40 }, { pais: "Argentina", valor: 35 }, { pais: "Chile", valor: 28 }, { pais: "Paraguay", valor: 22 } ]; // Creamos un área de dibujo SVG const svg = d3.create("svg") // Crea un nuevo elemento SVG .attr("width", width) // Define ancho del SVG .attr("height", height); // Define alto del SVG // Escala categórica para el eje X const x = d3.scaleBand() .domain(data.map(d => d.pais)) // Mapea los países a posiciones .range([margin.left, width - margin.right]) // Rango horizontal dentro del SVG .padding(0.1); // Espacio entre barras // Escala lineal para el eje Y const y = d3.scaleLinear() .domain([0, d3.max(data, d => d.valor)]) // Dominio de 0 al máximo valor .range([height - margin.bottom, margin.top]); // Rango invertido: mayor valor más arriba // Eje X (inferior) svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) // Posiciona el eje X en la parte inferior .call(d3.axisBottom(x)); // Dibuja los ticks y etiquetas // Eje Y (izquierdo) svg.append("g") .attr("transform", `translate(${margin.left},0)`) // Posiciona el eje Y a la izquierda .call(d3.axisLeft(y)); // Dibuja los ticks y etiquetas // Grupo SVG que contiene el tooltip (texto) y puede ser movido con transform const tooltip_group = svg.append("g") .style("visibility", "hidden"); // Oculto por defecto const tooltip_text = tooltip_group.append("text") // Texto dentro del grupo .attr("text-anchor", "middle")// Centrado horizontal .style("font-family", '-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif') .style("font-size", "10px") // Tamaño de fuente .style("fill", "orange") // Color del texto .style("font-weight", "bold") // Negrita .text(""); // Texto inicial vacío const margen_tooltip = 10; // Desplazamiento del tooltip sobre la barra var seleccionada = null; // Variable que guarda qué país está seleccionado (o null) // Dibujamos las barras del gráfico const barras = svg.selectAll("rect") // Selección de elementos rectangulares .data(data) // Asocia datos .enter() // Crea elementos por cada dato .append("rect") // Agrega un rectángulo por dato .attr("x", d => x(d.pais)) // Posición horizontal .attr("y", d => y(d.valor)) // Posición vertical según valor .attr("width", x.bandwidth()) // Ancho de la barra según escala .attr("height", d => y(0) - y(d.valor)) // Altura basada en el valor .attr("fill", "steelblue") // Color base de la barra // Interacción: al pasar el mouse sobre la barra .on("mouseover", function(d) { // COMPLETAR }) // Interacción: al sacar el mouse de la barra .on("mouseout", function(d) { // COMPLETAR }) // Interacción: al hacer clic en una barra .on("click", function(d) { // Si esta seleccionado el mismo pais if (seleccionada === d.pais) { seleccionada = null; d3.select(this).style("fill", "steelblue"); } else { // Si no esta seleccionado seleccionada = d.pais; d3.select(this).style("fill", "#db5677"); } }); return svg.node(); // Devuelve el nodo SVG para insertar en el DOM }34:T6f4,## Ejercicio d) (Resuelto) En este ejercicio vamos a construir una visualización de barras por país, donde al hacer clic sobre una barra, esta se transforma en una barra apilada que muestra dos componentes: hombres y mujeres, cada una con su porcentaje relativo centrado dentro del segmento correspondiente. A diferencia de los ejercicios anteriores, ahora implementaremos el gráfico utilizando el patrón clásico de D3, que implica unir los datos directamente a elementos SVG usando ```.data().join()``` y evitar la creación individual de elementos con append dentro de funciones separadas. ### 🎯 Objetivos Mostrar un gráfico de barras por país (valor total). Al hacer clic sobre una barra, esta debe transformarse en una barra apilada con dos segmentos (hombres y mujeres), con su porcentaje mostrado como texto centrado en cada segmento. Si se vuelve a hacer clic en la barra apilada, debe volver a su forma original. Las demás barras deben mantenerse en forma simple. No se utiliza tooltip flotante en este ejercicio. ### 📌 Instrucciones generales Usar el patrón ```data().join()``` para crear y actualizar los elementos. Crear un grupo (``````) por cada país, llamado ```barra-grupo```, que contenga ya sea: una barra simple (``````) si no está seleccionada, o dos barras apiladas (``````) y dos textos (``````) si está seleccionada. Utilizar escalas ```x``` e ```y``` para posicionar los elementos correctamente. Organizar el código en una función principal de renderizado llamada ```render(data, seleccionada)``` que limpie y actualice los contenidos de cada grupo según el estado de selección. Implementar una función ```manejarClick(d)``` que actualice la variable seleccionada y vuelva a llamar a ```render(...)```. 35:T1893,{ // Dimensiones y márgenes del SVG const width = 600; const height = 400; const margin = { top: 20, right: 20, bottom: 40, left: 50 }; // Datos por país con valor total y desglose en hombres y mujeres const data = [ { pais: "Brasil", valor: 50, hombres: 35, mujeres: 15 }, { pais: "Uruguay", valor: 40, hombres: 5, mujeres: 35 }, { pais: "Argentina", valor: 35, hombres: 15, mujeres: 20 }, { pais: "Chile", valor: 28, hombres: 22, mujeres: 6 }, { pais: "Paraguay", valor: 22, hombres: 20, mujeres: 2 } ]; // Crear el SVG donde se dibujará todo const svg = d3.create("svg") .attr("width", width) .attr("height", height); // Escala horizontal (X): países → posición const x = d3.scaleBand() .domain(data.map(d => d.pais)) // Nombres de países .range([margin.left, width - margin.right]) // Espacio disponible .padding(0.1); // Separación entre barras // Escala vertical (Y): valores → altura const y = d3.scaleLinear() .domain([0, d3.max(data, d => d.valor)]) // De 0 al máximo valor total .range([height - margin.bottom, margin.top]); // Desde abajo hacia arriba // Agregar eje X (inferior) svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); // Agregar eje Y (izquierdo) svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)); // Variable que indica qué país está seleccionado actualmente (o null) let seleccionada = null; // Función principal que renderiza el gráfico en función de los datos y la selección function render(data, seleccionada) { // Unimos los datos a grupos SVG, uno por país const groups = svg.selectAll(".barra-grupo") .data(data, d => d.pais) // Usamos el nombre del país como clave .join("g") // Maneja automáticamente enter/update/exit: crea nuevos si es necesario, actualiza los existentes, y elimina los que ya no están .attr("class", "barra-grupo") .attr("transform", d => `translate(${x(d.pais)},0)`); // Posicionamos el grupo // Limpiamos el contenido previo de cada grupo antes de redibujar groups.selectAll("*").remove(); // Para cada grupo (país), dibujamos la barra simple o la barra apilada groups.each(function(d) { const g = d3.select(this); // Seleccionamos el grupo actual const barWidth = x.bandwidth(); // Ancho de cada barra // Si el país está seleccionado → mostrar como barra apilada if (d.pais === seleccionada) { const total = d.valor; // Valor total const h = d.hombres; const m = d.mujeres; const yH = y(h); // Y del tope del segmento hombres const yM = y(h + m); // Y del tope del segmento mujeres const heightH = y(0) - yH; // Altura de hombres const heightM = y(0) - y(m); // Altura de mujeres // Rectángulo inferior: hombres g.append("rect") .attr("class", "apilada") .attr("y", yH) .attr("width", barWidth) .attr("height", heightH) .attr("fill", "#f1a1bc") // Rosa suave .on("click", () => manejarClick(d)); // Permite deselección con clic // Porcentaje centrado para hombres g.append("text") .attr("x", barWidth / 2) .attr("y", yH + heightH / 2) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .style("font-size", "12px") .style("fill", "black") .style("font-family", '-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif') .style("font-weight", "bold") // Negrita .text(Math.round((h / total) * 100) + "%"); // Rectángulo superior: mujeres g.append("rect") .attr("class", "apilada") .attr("y", yM) .attr("width", barWidth) .attr("height", heightM) .attr("fill", "#7bbfa7") // Verde azulado .on("click", () => manejarClick(d)); // Porcentaje centrado para mujeres g.append("text") .attr("x", barWidth / 2) .attr("y", yM + heightM / 2) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .style("font-size", "12px") .style("fill", "black") .style("font-family", '-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif') .style("font-weight", "bold") // Negrita .text(Math.round((m / total) * 100) + "%"); // Si el país no está seleccionado → mostrar barra simple } else { g.append("rect") .attr("class", "barra") .attr("y", y(d.valor)) .attr("width", barWidth) .attr("height", y(0) - y(d.valor)) .attr("fill", "steelblue") // Hover interacciones (solo si no está seleccionada) .on("mouseover", function() { if (seleccionada !== d.pais) d3.select(this).attr("fill", "orange"); }) .on("mouseout", function() { if (seleccionada !== d.pais) d3.select(this).attr("fill", "steelblue"); }) .on("click", () => manejarClick(d)); // Clic para seleccionar } }); } // Función que gestiona el clic en una barra (selección/deselección) function manejarClick(d) { if (seleccionada === d.pais) { seleccionada = null; // Si estaba seleccionada → deseleccionamos } else { seleccionada = d.pais; // Si no → seleccionamos } render(data, seleccionada); // Siempre redibujamos el gráfico luego de un click } // Primer renderizado render(data, seleccionada); // Devolvemos el nodo SVG para visualizar return svg.node(); } 36:T583,function fork_button() { return html``}37:[{"id":"361eeb804099cbc15d22d9342a98031a9dcc86bf74856d3d6cf0e2f8372e9751213daf207447989ddcd86d158a51d3fdd250d1bf054f3adfbadb8f3da453a25f","href":"https://static.observableusercontent.com/files/361eeb804099cbc15d22d9342a98031a9dcc86bf74856d3d6cf0e2f8372e9751213daf207447989ddcd86d158a51d3fdd250d1bf054f3adfbadb8f3da453a25f","name":"ej_a@1.gif","type":"image/gif","lastModified":1746110521872.104,"size":245628},{"id":"3ee1f54873a8e2a438a19ccbda6682afc2221aae69689ca160e97db4740736f4b59afea99305bca226e3d64e6e2ede7fc639952c120bb399693ca391d55f19ae","href":"https://static.observableusercontent.com/files/3ee1f54873a8e2a438a19ccbda6682afc2221aae69689ca160e97db4740736f4b59afea99305bca226e3d64e6e2ede7fc639952c120bb399693ca391d55f19ae","name":"ej_b.gif","type":"image/gif","lastModified":1746110842623.766,"size":325225},{"id":"35eff39219cec82a9b85d2fb7d46917eec0c13e57d15ad40ea7d39c78fb85b7c736984b8d6271c6b09fdb014a26a344938328d03c47efa6d7391cd8ac340dfcd","href":"https://static.observableusercontent.com/files/35eff39219cec82a9b85d2fb7d46917eec0c13e57d15ad40ea7d39c78fb85b7c736984b8d6271c6b09fdb014a26a344938328d03c47efa6d7391cd8ac340dfcd","name":"ej_c.gif","type":"image/gif","lastModified":1746113174841.316,"size":385391}] 2d:{"title":"Actividad 3: Interactividad","cells":[{"id":34,"value":"# Actividad 3: Interactividad \n\nPor favor, para resolver los ejercicios del práctico utilizá este mismo notebook. Podés crearte una copia en tu propia cuenta de Observable haciendo click en ${fork_button()} (arriba a la derecha). Tus modificaciones a esa copia no afectarán el notebook original. Una vez terminado, no olviden apretar el botón ${publish_button()} (arriba a la derecha) para que el notebook sea público y podamos acceder para su corrección. Después de cada modificación que realicen al notebook deberán volver apretar el boton Publish si quieren que esa modificación se vuelva visible para cualquier otro usuario.\n\nEn este práctico vamos a trabajar con elementos interactivos.","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"## Ejercicio a)\nEn este ejercicio, partimos de un gráfico de barras que muestra valores para distintos países. Tu objetivo es agregar interactividad utilizando eventos del mouse en D3.","pinned":false,"hidden":false,"mode":"md"},{"id":217,"value":"ej_a1 = FileAttachment(\"ej_a@1.gif\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"### 🎯 Objetivos\n**Tooltip:** Al pasar el mouse sobre una barra, debe aparecer un texto con el valor correspondiente. Este texto debe estar en el tope de la barra (como en el ejemplo de arriba).\n\n**Resaltado:** Al hacer mouseover sobre una barra, su color debe cambiar (por ejemplo, a naranja).\n\n**Restauración:** Al salir con el mouse (```mouseout```), el color original debe restaurarse y el tooltip debe desaparecer.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":193,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"## Ejercicio b)\nEn este ejercicio, partimos del gráfico de barras del ejercicio anterior. La diferencia principal es que ahora queremos que el tooltip siga el movimiento del mouse en lugar de estar fijado a la barra.","pinned":false,"hidden":false,"mode":"md"},{"id":248,"value":"ej_b = FileAttachment(\"ej_b.gif\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":96,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":293,"value":"## Ejercicio c)\nEn este ejercicio, vamos a extender el gráfico del ejercicio a), agregando un nuevo tipo de interacción: la selección con clic.","pinned":false,"hidden":false,"mode":"md"},{"id":319,"value":"ej_c = FileAttachment(\"ej_c.gif\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":303,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":332,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`### Otras funciones auxiliares `","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"function publish_button() { return html``}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}