Actividad 3: Interactividad / UTDT

{

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

tooltip_text.text(`${d.pais}: ${d.valor}`);

tooltip_group.attr("transform", `translate(${x(d.pais) + x.bandwidth() / 2}, ${y(d.valor) - margen_tooltip})`)

.style("visibility", "visible");

})

.on("mouseout", function() {

d3.select(this).style("fill", "steelblue");

tooltip_group.style("visibility", "hidden");

})

return svg.node(); // Devuelve el nodo SVG para insertar en el DOM

}

{

// 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) {

d3.select(this).style("fill", "orange");

tooltip.text(`${d.pais}: ${d.valor}`)

.style("visibility", "visible");

})

// Interacción: movimiento dentro de la barra

.on("mousemove", function() {

const xPos = d3.event.pageX;

const yPos = d3.event.pageY;

tooltip.style("top", (yPos - margen_tooltip) + "px")

.style("left", (xPos + margen_tooltip) + "px");

})

// Interacción: mouseout

.on("mouseout", function() {

d3.select(this).style("fill", "steelblue");

tooltip.style("visibility", "hidden");

});

return svg.node(); // Devuelve el nodo SVG para ser insertado en el DOM

}

{

// 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) {

if (seleccionada !== d.pais) {

d3.select(this).style("fill", "orange");

tooltip_text.text(`${d.pais}: ${d.valor}`);

tooltip_group.attr("transform", `translate(${x(d.pais) + x.bandwidth() / 2}, ${y(d.valor) - margen_tooltip})`)

.style("visibility", "visible");

}

})

// Interacción: al sacar el mouse de la barra

.on("mouseout", function(d) {

if (seleccionada !== d.pais) {

d3.select(this).style("fill", "steelblue");

tooltip_group.style("visibility", "hidden");

}

})

// Interacción: al hacer clic en una barra

.on("click", function(d) {

if (seleccionada === d.pais) {

seleccionada = null;

d3.select(this).style("fill", "steelblue");

tooltip_group.style("visibility", "hidden");

} else {

seleccionada = d.pais;

d3.selectAll("rect").style("fill", "steelblue")

d3.select(this).style("fill", "#AA336A");

tooltip_group.style("visibility", "hidden");

}

});

return svg.node(); // Devuelve el nodo SVG para insertar en el DOM

}

{

// 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 <g> 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();

}

Purpose-built for displays of data