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)"])
viewof sequentialSteps = slider({
min: 0,
max: 30,
step: 1,
value: 10,
title: "Secuencial: cantidad de colores"
})
swatches(
d3.quantize(d3.interpolateViridis, sequentialSteps),
{columns: sequentialSteps}
)
viewof divergingSteps = slider({
min: 1,
max: 30,
step: 1,
value: 10,
title: "Divergente: cantidad de colores"
})
swatches(
d3.quantize(d3.interpolateRdYlGn, divergingSteps),
{columns: divergingSteps}
)
viewof lum_steps = slider({
min: 0.2,
max: 1.4,
step: 0.01,
value: 1,
title: "Luminosidad",
description: "Control para la luminosidad del color."
})
swatches(
d3.quantize(d3.interpolateRdYlGn, divergingSteps).map(c => {
const hsl = d3.hsl(c)
hsl.l = Math.min(1, hsl.l * lum_steps) // ajustamos el brillo
return hsl.formatHex()
}),
{columns: divergingSteps}
)
iris = d3.csv("https://raw.githubusercontent.com/uiuc-cse/data-fa14/gh-pages/data/iris.csv", d3.autoType)
iris.slice(0, 5)
irisTransformado = iris.map(d => ({
longitud_sepalo: d.sepal_length,
longitud_petalo: d.petal_length,
especie: d.species,
area_petalo: (d.petal_length * d.petal_width) / 2
}))
// Obtener rango de sepalo
extentSepalLength = d3.extent(irisTransformado , d => d.longitud_sepalo)
// Obtener rango de petalo
extentPetalLength = d3.extent(irisTransformado , d => d.longitud_petalo)
// Crear la escala x para la longitud de los sépalos
x = d3.scaleLinear()
.domain(extentSepalLength)
.range([0, 350])
y = d3.scaleLinear()
.domain(extentPetalLength)
.range([350, 0])
{
// 1. Creación de un área de dibujo de 600x600 píxeles
const svg = d3.create("svg")
.attr("width", 600)
.attr("height", 600);
// Definir márgenes para visualizar los ejes
const margin = {top: 40, right: 60, bottom: 60, left: 70};
// Ajustar las escalas existentes para el nuevo tamaño y márgenes
const xWithMargin = d3.scaleLinear()
.domain(x.domain()) // Usa el mismo dominio que la escala x original
.range([margin.left, 600 - margin.right]); // Ajusta el rango para el nuevo tamaño
const yWithMargin = d3.scaleLinear()
.domain(y.domain()) // Usa el mismo dominio que la escala y original
.range([600 - margin.bottom, margin.top]); // Ajusta el rango para el nuevo tamaño
// Definir escala de colores para las especies
const color = d3.scaleOrdinal()
.domain(["setosa", "versicolor", "virginica"])
.range(["#4e79a7", "#f28e2c", "#e15759"]);
// 2. Añadir ejes con tamaño de texto más grande (sin líneas de cuadrícula)
svg.append("g")
.attr("transform", `translate(0,${600 - margin.bottom})`)
.call(d3.axisBottom(xWithMargin).tickPadding(10))
.attr("font-size", "12px")
.append("text")
.attr("x", 600 - margin.right)
.attr("y", -15)
.attr("fill", "black")
.attr("text-anchor", "end")
.attr("font-size", "16px")
.text("Longitud de Sépalo");
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yWithMargin).tickPadding(10))
.attr("font-size", "12px")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 15)
.attr("x", -margin.top)
.attr("dy", ".71em")
.attr("fill", "black")
.attr("text-anchor", "end")
.attr("font-size", "16px")
.text("Longitud de Pétalo");
// 3. Añadir puntos con tamaño más grande
svg.append("g")
.selectAll("circle")
.data(irisTransformado)
.join("circle")
.attr("cx", d => xWithMargin(d.longitud_sepalo))
.attr("cy", d => yWithMargin(d.longitud_petalo))
.attr("r", 6)
.attr("fill", d => color(d.especie))
.attr("stroke", "white")
.attr("stroke-width", 1)
.attr("opacity", 0.8);
// 4. Añadir leyenda con texto pequeño
const legend = svg.append("g")
.attr("transform", `translate(${600 - margin.right - 100}, 440)`);
// Añadir título de leyenda
legend.append("text")
.attr("x", 0)
.attr("y", -10)
.attr("font-size", "12px")
.attr("font-weight", "bold")
.text("Especies");
const species = [...new Set(irisTransformado.map(d => d.especie))];
species.forEach((s, i) => {
const legendRow = legend.append("g")
.attr("transform", `translate(0, ${i * 20})`);
legendRow.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 5)
.attr("fill", color(s));
legendRow.append("text")
.attr("x", 12)
.attr("y", 4)
.attr("font-size", "10px")
.text(s);
});
// n. Retornamos el canvas.
return svg.node();
}
{
// 1. Creación de un área de dibujo de 600x600 píxeles
const svg = d3.create("svg")
.attr("width", 600)
.attr("height", 600);
// Definir márgenes para visualizar los ejes
const margin = {top: 40, right: 60, bottom: 60, left: 70};
// Ajustar las escalas existentes para el nuevo tamaño y márgenes
const xWithMargin = d3.scaleLinear()
.domain(x.domain()) // Usa el mismo dominio que la escala x original
.range([margin.left, 600 - margin.right]); // Ajusta el rango para el nuevo tamaño
const yWithMargin = d3.scaleLinear()
.domain(y.domain()) // Usa el mismo dominio que la escala y original
.range([600 - margin.bottom, margin.top]); // Ajusta el rango para el nuevo tamaño
// Definir escala de colores para las especies
const color = d3.scaleOrdinal()
.domain(["setosa", "versicolor", "virginica"])
.range(["#4e79a7", "#f28e2c", "#e15759"]);
// Definir escala de radio proporcional al área del pétalo
const areaExtent = d3.extent(irisTransformado, d => d.area_petalo);
const radiusScale = d3.scaleSqrt()
.domain(areaExtent)
.range([2, 10]); // Define un rango de radios para el tamaño de los círculos
// 2. Añadir ejes con tamaño de texto más grande (sin líneas de cuadrícula)
svg.append("g")
.attr("transform", `translate(0,${600 - margin.bottom})`)
.call(d3.axisBottom(xWithMargin).tickPadding(10))
.attr("font-size", "12px")
.append("text")
.attr("x", 600 - margin.right)
.attr("y", -15)
.attr("fill", "black")
.attr("text-anchor", "end")
.attr("font-size", "16px")
.text("Longitud de Sépalo");
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yWithMargin).tickPadding(10))
.attr("font-size", "12px")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 15)
.attr("x", -margin.top)
.attr("dy", ".71em")
.attr("fill", "black")
.attr("text-anchor", "end")
.attr("font-size", "16px")
.text("Longitud de Pétalo");
// 3. Añadir puntos con tamaño proporcional al área del pétalo
svg.append("g")
.selectAll("circle")
.data(irisTransformado)
.join("circle")
.attr("cx", d => xWithMargin(d.longitud_sepalo))
.attr("cy", d => yWithMargin(d.longitud_petalo))
.attr("r", d => radiusScale(d.area_petalo)) // El radio ahora depende del área del pétalo
.attr("fill", d => color(d.especie)) // El color sigue dependiendo de la especie
.attr("stroke", "white")
.attr("stroke-width", 1)
.attr("opacity", 0.8);
// 4. Añadir leyenda con texto pequeño
const legend = svg.append("g")
.attr("transform", `translate(${600 - margin.right - 100}, 440)`);
// Añadir título de leyenda
legend.append("text")
.attr("x", 0)
.attr("y", -10)
.attr("font-size", "12px")
.attr("font-weight", "bold")
.text("Especies");
const species = [...new Set(irisTransformado.map(d => d.especie))];
species.forEach((s, i) => {
const legendRow = legend.append("g")
.attr("transform", `translate(0, ${i * 20})`);
legendRow.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 5)
.attr("fill", color(s));
legendRow.append("text")
.attr("x", 12)
.attr("y", 4)
.attr("font-size", "10px")
.text(s);
});
// Retornamos el canvas.
return svg.node();
}
viewof speciesFilter = Inputs.select(["setosa", "versicolor", "virginica"])
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.
