Actividad 2: Importación de datos y escalas - 1ra parte / Universidad DiTella

viewof color_steps = slider({

min: 0,

max: 30,

step: 1,

value: 10,

title: "Cantidad de colores",

description: "Control para la cantidad de colores a visualizar en la paleta."

})

// Ejemplo, se pueden definir colores mediante HEX, nombre, HSL, RGB/RGBA

swatches(["#ff3399", "hotpink", "hsl(330, 100%, 70.5%)", "rgba(128, 0, 128, 0.2)"])

<!DOCTYPE html>

<head>

<title>Paletas de Colores con D3.js</title>

<style>

.swatch {

display: inline-block;

width: 30px;

height: 30px;

margin: 2px;

}

</style>

</head>

<body>

<h2>Paletas de Colores</h2>

<div>

<label for="color_steps">Cantidad de colores:</label>

</div>

const colorStepsInput = document.getElementById("color_steps");

const colorStepsValue = document.getElementById("color_steps_value");

const paletteDiv = document.getElementById("palette");

// Función para actualizar la paleta de colores

function updatePalette() {

const colorSteps = +colorStepsInput.value;

colorStepsValue.textContent = colorSteps;

// Definir un interpolador (puedes cambiarlo por otros como d3.interpolateRainbow, d3.interpolateCool, etc.)

const interpolator = d3.interpolateBlues;

// Generar la paleta de colores

const colors = d3.quantize(interpolator, colorSteps);

// Limpiar la paleta anterior

paletteDiv.innerHTML = '';

// Crear los swatches de colores

colors.forEach(color => {

const swatch = document.createElement("div");

swatch.className = "swatch";

swatch.style.backgroundColor = color;

paletteDiv.appendChild(swatch);

});

}

// Inicializar la paleta

updatePalette();

// Actualizar la paleta cuando se cambie el slider

colorStepsInput.addEventListener("input", updatePalette);

</script>

</body>

</html>

Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

viewof lum_steps = slider({

min: 0,

max: 100,

step: 1,

value: 10,

title: "Luminosidad",

description: "Control para la luminosidad del color."

})

<!DOCTYPE html>

<head>

<title>Paletas de Colores con D3.js</title>

<style>

.swatch {

display: inline-block;

width: 30px;

height: 30px;

margin: 2px;

}

</style>

</head>

<body>

<h2>Paletas de Colores</h2>

<div>

<label for="color_steps">Cantidad de colores:</label>

</div>

<div>

<label for="lum_steps">Luminosidad:</label>

</div>

const colorStepsInput = document.getElementById("color_steps");

const colorStepsValue = document.getElementById("color_steps_value");

const lumStepsInput = document.getElementById("lum_steps");

const lumStepsValue = document.getElementById("lum_steps_value");

const paletteDiv = document.getElementById("palette");

// Función para ajustar la luminosidad

function adjustLuminosity(color, luminosity) {

const hsl = d3.hsl(color);

hsl.l = luminosity / 100; // Ajustar la luminosidad (0 a 1)

return hsl.toString(); // Convertir de nuevo a formato de color

}

// Función para actualizar la paleta de colores

function updatePalette() {

const colorSteps = +colorStepsInput.value;

const luminosity = +lumStepsInput.value;

colorStepsValue.textContent = colorSteps;

lumStepsValue.textContent = luminosity;

// Definir un interpolador (puedes cambiarlo por otros como d3.interpolateRainbow, d3.interpolateCool, etc.)

const interpolator = d3.interpolateBlues;

// Generar la paleta de colores

const colors = d3.quantize(interpolator, colorSteps);

// Limpiar la paleta anterior

paletteDiv.innerHTML = '';

// Crear los swatches de colores con luminosidad ajustada

colors.forEach(color => {

const adjustedColor = adjustLuminosity(color, luminosity);

const swatch = document.createElement("div");

swatch.className = "swatch";

swatch.style.backgroundColor = adjustedColor;

paletteDiv.appendChild(swatch);

});

}

// Inicializar la paleta

updatePalette();

// Actualizar la paleta cuando se cambie el slider

colorStepsInput.addEventListener("input", updatePalette);

lumStepsInput.addEventListener("input", updatePalette);

</script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Procesar CSV con D3.js</title>

</head>

<body>

<h2>Datos de Flores</h2>

// URL del archivo CSV

const csvUrl = 'URL_DEL_CSV'; // Reemplaza esto con la URL real del CSV

// Cargar y procesar el CSV

d3.csv(csvUrl).then(data => {

// Procesar los datos

const processedData = data.map(d => {

// Calcular el área del pétalo

const areaPetalo = (parseFloat(d.Petal_Length) * parseFloat(d.Petal_Width));

return {

longitud_sepalo: parseFloat(d.Sepal_Length),

longitud_petalo: parseFloat(d.Petal_Length),

especie: d.Species,

area_petalo: areaPetalo

};

});

// Mostrar los datos procesados en la consola o en el HTML

console.log(processedData);

document.getElementById('output').textContent = JSON.stringify(processedData, null, 2);

}).catch(error => {

console.error('Error al cargar el CSV:', error);

});

</script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Escalas en D3.js</title>

<style>

.axis {

font: 10px sans-serif;

}

</style>

</head>

<body>

<h2>Gráfico de Longitudes de Sépalos y Pétalos</h2>

// URL del archivo CSV

const csvUrl = 'URL_DEL_CSV'; // Reemplaza esto con la URL real del CSV

// Cargar y procesar el CSV

d3.csv(csvUrl).then(data => {

// Procesar los datos

const processedData = data.map(d => ({

longitud_sepalo: parseFloat(d.Sepal_Length),

longitud_petalo: parseFloat(d.Petal_Length)

}));

// Crear escalas

const xScale = d3.scaleLinear()

.domain(d3.extent(processedData, d => d.longitud_sepalo)) // Dominio basado en longitud de sépalos

.range([0, 350]); // Rango de 0 a 350 píxeles

const yScale = d3.scaleLinear()

.domain(d3.extent(processedData, d => d.longitud_petalo)) // Dominio basado en longitud de pétalos

.range([350, 0]); // Rango de 350 a 0 píxeles (invertido para que el origen esté en la parte inferior izquierda)

// Crear un SVG para el gráfico

const svg = d3.select("svg");

// Ejes X e Y

const xAxis = d3.axisBottom(xScale);

const yAxis = d3.axisLeft(yScale);

// Añadir los ejes al SVG

svg.append("g")

.attr("transform", "translate(0, 350)") // Mover el eje X a la parte inferior

.call(xAxis);

svg.append("g")

.call(yAxis);

// Opcional: Añadir puntos al gráfico

svg.selectAll("circle")

.data(processedData)

.enter()

.append("circle")

.attr("cx", d => xScale(d.longitud_sepalo))

.attr("cy", d => yScale(d.longitud_petalo))

.attr("r", 3) // Radio de los puntos

.attr("fill", "blue");

}).catch(error => {

console.error('Error al cargar el CSV:', error);

});

</script>

</body>

</html>

{

// 1. Creación de un área de dibujo (350x350 pixeles).

// Si lo consideran necesario, pueden modificar el tamaño del canvas.

// También es posible que necesiten más de una celda para resolverlo.

const svg = d3.create("svg")

.attr("width",350)

.attr("height",350);

// Un cuadro de texto.

svg.append("text")

.attr("x", 110)

.attr("y", 175)

.text("Área de dibujo vacía");

// n. Retornamos el canvas.

return svg.node();

}

<!DOCTYPE html>

<head>

<title>Scatterplot de Longitudes de Sépalos y Pétalos</title>

<style>

.axis {

font: 10px sans-serif;

}

.legend {

font-size: 12px;

}

</style>

</head>

<body>

<h2>Scatterplot de Longitudes de Sépalos y Pétalos</h2>

// URL del archivo CSV

const csvUrl = 'URL_DEL_CSV'; // Reemplaza esto con la URL real del CSV

// Cargar y procesar el CSV

d3.csv(csvUrl).then(data => {

// Procesar los datos

const processedData = data.map(d => ({

longitud_sepalo: parseFloat(d.Sepal_Length),

longitud_petalo: parseFloat(d.Petal_Length),

especie: d.Species

}));

// Crear márgenes y dimensiones

const margin = { top: 20, right: 20, bottom: 30, left: 40 };

const width = 350 - margin.left - margin.right;

const height = 350 - margin.top - margin.bottom;

// Crear escalas

const xScale = d3.scaleLinear()

.domain(d3.extent(processedData, d => d.longitud_sepalo)) // Dominio basado en longitud de sépalos

.range([0, width]); // Rango de 0 a ancho del gráfico

const yScale = d3.scaleLinear()

.domain(d3.extent(processedData, d => d.longitud_petalo)) // Dominio basado en longitud de pétalos

.range([height, 0]); // Rango de alto del gráfico a 0 (invertido)

// Crear un área de dibujo (SVG)

const svg = d3.select("#chart").append("svg")

.attr("width", 350)

.attr("height", 350);

// Crear un grupo para los márgenes

const g = svg.append("g")

.attr("transform", `translate(${margin.left},${margin.top})`);

// Ejes X e Y

const xAxis = d3.axisBottom(xScale);

const yAxis = d3.axisLeft(yScale);

// Añadir los ejes al gráfico

g.append("g")

.attr("class", "axis")

.attr("transform", `translate(0, ${height})`) // Mover el eje X a la parte inferior

.call(xAxis);

g.append("g")

.attr("class", "axis")

.call(yAxis);

// Crear una escala de color para las especies

const colorScale = d3.scaleOrdinal(d3.schemeCategory10);

// Añadir puntos al gráfico

g.selectAll("circle")

.data(processedData)

.enter()

.append("circle")

.attr("cx", d => xScale(d.longitud_sepalo))

.attr("cy", d => yScale(d.longitud_petalo))

.attr("r", 5) // Radio de los puntos

.attr("fill", d => colorScale(d.especie)); // Color basado en la especie

// Añadir leyenda

const legend = g.append("g")

.attr("transform", `translate(${width - 100}, 0)`);

const species = [...new Set(processedData.map(d => d.especie))];

species.forEach((specie, i) => {

legend.append("rect")

.attr("x", 0)

.attr("y", i * 20)

.attr("width", 15)

.attr("height", 15)

.attr("fill", colorScale(specie));

legend.append("text")

.attr("x", 20)

.attr("y", i * 20 + 12)

.text(specie)

.attr("class", "legend");

});

}).catch(error => {

console.error('Error al cargar el CSV:', error);

});

</script>

</body>

</html>

{

// 1. Creación de un área de dibujo (350x350 pixeles).

// Si lo consideran necesario, pueden modificar el tamaño del canvas.

// También es posible que necesiten más de una celda para resolverlo.

const svg = d3.create("svg")

.attr("width",350)

.attr("height",350);

// Un cuadro de texto.

svg.append("text")

.attr("x", 110)

.attr("y", 175)

.text("Área de dibujo vacía");

// n. Retornamos el canvas.

return svg.node();

}

<!DOCTYPE html>

<head>

<title>Scatterplot de Longitudes de Sépalos y Pétalos</title>

<style>

.axis {

font: 10px sans-serif;

}

.legend {

font-size: 12px;

}

</style>

</head>

<body>

<h2>Scatterplot de Longitudes de Sépalos y Pétalos</h2>

// URL del archivo CSV

const csvUrl = 'URL_DEL_CSV'; // Reemplaza esto con la URL real del CSV

// Cargar y procesar el CSV

d3.csv(csvUrl).then(data => {

// Procesar los datos

const processedData = data.map(d => {

const longitud_sepalo = parseFloat(d.Sepal_Length);

const longitud_petalo = parseFloat(d.Petal_Length);

const area_petalo = longitud_petalo * parseFloat(d.Petal_Width); // Calcular el área del pétalo

return {

longitud_sepalo,

longitud_petalo,

area_petalo,

especie: d.Species

};

});

// Crear márgenes y dimensiones

const margin = { top: 20, right: 20, bottom: 30, left: 40 };

const width = 350 - margin.left - margin.right;

const height = 350 - margin.top - margin.bottom;

// Crear escalas

const xScale = d3.scaleLinear()

.domain(d3.extent(processedData, d => d.longitud_sepalo)) // Dominio basado en longitud de sépalos

.range([0, width]); // Rango de 0 a ancho del gráfico

const yScale = d3.scaleLinear()

.domain(d3.extent(processedData, d => d.longitud_petalo)) // Dominio basado en longitud de pétalos

.range([height, 0]); // Rango de alto del gráfico a 0 (invertido)

// Escala de color para el área del pétalo

const colorScale = d3.scaleSequential(d3.interpolateBlues)

.domain(d3.extent(processedData, d => d.area_petalo)); // Dominio basado en el área del pétalo

// Escala de radio para el área del pétalo

const radiusScale = d3.scaleSqrt()

.domain(d3.extent(processedData, d => d.area_petalo)) // Dominio basado en el área del pétalo

.range([2, 10]); // Rango de radio de 2 a 10 píxeles

// Crear un área de dibujo (SVG)

const svg = d3.select("#chart").append("svg")

.attr("width", 350)

.attr("height", 350);

// Crear un grupo para los márgenes

const g = svg.append("g")

.attr("transform", `translate(${margin.left},${margin.top})`);

// Ejes X e Y

const xAxis = d3.axisBottom(xScale);

const yAxis = d3.axisLeft(yScale);

// Añadir los ejes al gráfico

g.append("g")

.attr("class", "axis")

.attr("transform", `translate(0, ${height})`) // Mover el eje X a la parte inferior

.call(xAxis);

g.append("g")

.attr("class", "axis")

.call(yAxis);

// Añadir puntos al gráfico

g.selectAll("circle")

.data(processedData)

.enter()

.append("circle")

.attr("cx", d => xScale(d.longitud_sepalo))

.attr("cy", d => yScale(d.longitud_petalo))

.attr("r", d => radiusScale(d.area_petalo)) // Radio basado en el área del pétalo

.attr("fill", d => colorScale(d.area_petalo)); // Color basado en el área del p��talo

// Añadir leyenda para la escala de colores

const legend = g.append("g")

.attr("transform", `translate(${width - 100}, 0)`);

const legendHeight = 200;

const legendWidth = 20;

const legendScale = d3.scaleLinear()

.domain(d3.extent(processedData, d => d.area_petalo))

.range([legendHeight, 0]);

const legendAxis = d3.axisRight(legendScale)

.ticks(5);

legend.append("g")

.attr("class", "axis")

.call(legendAxis);

// Crear un rectángulo para la leyenda de color

legend.selectAll("rect")

.data(d3.range(legendHeight))

.enter()

.append("rect")

.attr("x", 0)

.attr("y", d => d)

.attr("width", legendWidth)

.attr("height", 1)

.attr("fill", d => colorScale(legendScale.invert(d)));

// Añadir texto a la leyenda

legend.append("text")

.attr("x", -30)

.attr("y", legendHeight / 2)

.text("Área del Pétalo")

.attr("class", "legend");

}).catch(error => {

console.error('Error al cargar el CSV:', error);

});

</script>

</body>

</html>

Purpose-built for displays of data