{
var steps_custom = slider({
min: 2,
max: 30,
step: 1,
value: 10,
title: "Cantidad de colores"
});
// Lista de colores no secuenciales
var colores = ["pink", "#4B2E39", "purple", "orange"];
// Creamos un interpolador que conecte esos colores
var interpolador = d3.piecewise(d3.interpolateRgb, colores);
// Cuantizamos el interpolador para obtener colores discretos
var paleta = d3.quantize(interpolador, steps_custom.value);
return swatches(paleta);
}
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)"])
swatches(spring)
// Resolución ejercicio a
viewof steps_falls = slider({
min: 0,
max: 30,
step: 1,
value: 10,
title: "Colores - Fall Colors"
})
fall = {
var paleta0 = ["Black", "Brown", "Red", "Orange", "Yellow"];
var colorInterpolator = d3.piecewise(d3.interpolateRgb, paleta0);
return (d3.quantize(colorInterpolator, steps_falls));
}
swatches(fall)
swatches(browns)
swatches(blues)
viewof lum_steps = slider({
min: 0,
max: 5,
step: 0.01,
value: 10,
title: "Luminosidad",
description: "Control para la luminosidad del color."
})
spring_lum = spring.map(c => d3.color(c).brighter(lum_steps).formatHex());
swatches(spring_lum)
// Función para convertir una fila
function clean_data(d) {
d.area_petalo = (d.Petal_Length*d.Petal_Width)/2;
// Renombrar las propiedades
d.longitud_sepalo = d.Sepal_Length;
d.longitud_petalo = d.Petal_Length;
d.especie = d.Species;
//Eliminar datos innecesarios
delete d.Sepal_Width;
delete d.Petal_Width;
delete d.Sepal_Length;
delete d.Petal_Length;
delete d.Species;
return d;
}
// Resolución ejercicio c)
// Cargar los datos desde el CSV
datos = d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", d3.autoType,clean_data)
height = 350
width =350
margin = ({top: 70, right: 30, bottom: 30, left: 30})
// Resolución ejercicio d)
x = d3.scaleLinear() // Escala lineal
.domain(d3.extent(datos, d => d.longitud_sepalo))
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain(d3.extent(datos, d => d.longitud_petalo))
.range([height - margin.bottom, margin.top]);
{
// 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);
// Escala de color por especie
const color = d3.scaleOrdinal()
.domain([...new Set(datos.map(d => d.especie))])
.range(["#e41a1c", "#377eb8", "#4daf4a"]);
// Ejes
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x));
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
// Puntos del scatterplot
svg.selectAll("circle")
.data(datos)
.join("circle")
.attr("cx", d => x(d.longitud_sepalo))
.attr("cy", d => y(d.longitud_petalo))
.attr("r", 4)
.attr("fill", d => color(d.especie))
.attr("opacity", 0.7);
// Título
svg.append("text")
.attr("x", width / 2)
.attr("y", margin.top - 20)
.attr("text-anchor", "middle")
.attr("font-size", "10px")
.text("Relación entre Longitud del Sépalo y Longitud del Pétalo");
// Leyenda
const legend = svg.append("g")
.attr("transform", `translate(${width - margin.right - 50},${height - margin.bottom - 50})`);
// Crear leyenda para cada especie
const species = [...new Set(datos.map(d => d.especie))];
species.forEach((specie, i) => {
const legendItem = legend.append("g")
.attr("transform", `translate(0,${i * 20})`);
legendItem.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 3)
.attr("fill", color(specie));
legendItem.append("text")
.attr("x", 15)
.attr("y", 5)
.attr("font-size", "7px")
.text(specie);
});
return svg.node();
}
{
// 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);
// Escalas
const x = d3.scaleLinear()
.domain(d3.extent(datos, d => d.longitud_sepalo))
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain(d3.extent(datos, d => d.longitud_petalo))
.range([height - margin.bottom, margin.top]);
const color = d3.scaleSequential()
.domain(d3.extent(datos, d => d.area_petalo))
.interpolator(d3.interpolateViridis);
const radius = d3.scaleSqrt()
.domain(d3.extent(datos, d => d.area_petalo))
.range([2, 10]);
// Ejes
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x));
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
// Puntos
svg.selectAll("circle")
.data(datos)
.enter()
.append("circle")
.attr("cx", d => x(d.longitud_sepalo))
.attr("cy", d => y(d.longitud_petalo))
.attr("r", d => radius(d.area_petalo))
.attr("fill", d => color(d.area_petalo))
.attr("opacity", 0.8);
// Título
svg.append("text")
.attr("x", width / 2)
.attr("y", margin.top - 10)
.attr("text-anchor", "middle")
.style("font-size", "14px")
.text("Scatterplot: sépalo vs pétalo");
// Leyenda (abajo a la derecha)
const legendWidth = 120;
const legendHeight = 10;
const legendX = width - legendWidth - 10;
const legendY = height - 80;
const defs = svg.append("defs");
const linearGradient = defs.append("linearGradient")
.attr("id", "legend-gradient");
linearGradient.selectAll("stop")
.data(d3.ticks(0, 1, 10))
.enter()
.append("stop")
.attr("offset", d => `${d * 100}%`)
.attr("stop-color", d => color(color.domain()[0] + d * (color.domain()[1] - color.domain()[0])));
svg.append("rect")
.attr("x", legendX)
.attr("y", legendY)
.attr("width", legendWidth)
.attr("height", legendHeight)
.style("fill", "url(#legend-gradient)");
svg.append("text")
.attr("x", legendX)
.attr("y", legendY - 5)
.text("Área del pétalo")
.style("font-size", "10px");
svg.append("text")
.attr("x", legendX)
.attr("y", legendY + 20)
.text(Math.round(color.domain()[0]))
.style("font-size", "10px");
svg.append("text")
.attr("x", legendX + legendWidth - 10)
.attr("y", legendY + 20)
.attr("text-anchor", "end")
.text(Math.round(color.domain()[1]))
.style("font-size", "10px");
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
