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)"])
colorPalette = d3.quantize(d3.interpolateMagma, color_steps)
html`<div style="display: flex; gap: 5px;">${
colorPalette.map(c => html`<div style="background: ${c}; width: 25px; height: 25px; border-radius: 0px;"></div>`)
}</div>`
viewof lum_steps = slider({
min: 0,
max: 100,
step: 1,
value: 10,
title: "Luminosidad",
description: "Control para la luminosidad del color."
})
color_base = d3.quantize(d3.interpolateInferno, color_steps)
// Resolución ejercicio b
color_palette_luminosa = color_base.map(color => {
const hsl = d3.hsl(color);
hsl.l = lum_steps / 100;
return hsl.formatHex(); // o .toString() para formato hsl()
})
html`<div style="display: flex; gap: 6px;">${
color_palette_luminosa.map(c => html`
<div style="background: ${c}; width: 25px; height: 25px; border-radius: 0px;"></div>
`)
}</div>`
// Resolución ejercicio //
datos_iris = (await d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", d => ({
longitud_sepalo: +d.Sepal_Length,
longitud_petalo: +d.Petal_Length,
especie: d.Species,
area_petalo: +d.Petal_Length * +d.Petal_Width /2
})))
// Resolución ejercicio d)
// Dimensiones del gráfico cuadrado
tamaño_grafico = 350
y = d3.scaleLinear()
.domain(d3.extent(datos_iris, d => d.longitud_petalo))
.range([tamaño_grafico, 0])
x = d3.scaleLinear()
.domain(d3.extent(datos_iris, d => d.longitud_sepalo))
.range([0, tamaño_grafico])
// Ejes usando D3
viewof svg_ejes = {
const svg = d3.create("svg")
.attr("width", tamaño_grafico + 50)
.attr("height", tamaño_grafico + 50);
// Eje X
svg.append("g")
.attr("transform", `translate(30, ${tamaño_grafico + 10})`)
.call(d3.axisBottom(x));
// Eje Y
svg.append("g")
.attr("transform", `translate(30, 10)`)
.call(d3.axisLeft(y));
return svg.node();
}
{
const tamaño_grafico = 350;
const margen = {top: 20, right: 20, bottom: 40, left: 40};
const ancho = tamaño_grafico;
const alto = tamaño_grafico;
const svg = d3.create("svg")
.attr("width", ancho + margen.left + margen.right)
.attr("height", alto + margen.top + margen.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margen.left},${margen.top})`);
// Ejes
g.append("g")
.attr("transform", `translate(0,${alto})`)
.call(d3.axisBottom(x));
g.append("g")
.call(d3.axisLeft(y));
// Escala de color para especie
const color = d3.scaleOrdinal()
.domain([...new Set(datos_iris.map(d => d.especie))])
.range(d3.schemeCategory10);
// Dibujar los puntos
g.selectAll("circle")
.data(datos_iris)
.enter()
.append("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);
return svg.node();
}
{
const tamaño_grafico = 350;
const margen = { top: 20, right: 20, bottom: 40, left: 40 };
const ancho = tamaño_grafico;
const alto = tamaño_grafico;
const svg = d3.create("svg")
.attr("width", ancho + margen.left + margen.right)
.attr("height", alto + margen.top + margen.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margen.left},${margen.top})`);
// Escala de color basada en area_petalo
const color = d3.scaleSequential()
.domain(d3.extent(datos_iris, d => d.area_petalo))
.interpolator(d3.interpolateInferno);
// Escala de tamaño (radio)
const radio = d3.scaleSqrt()
.domain(d3.extent(datos_iris, d => d.area_petalo))
.range([2, 10]); // ajustá estos valores si querés más chico o más grande
// Ejes
g.append("g")
.attr("transform", `translate(0,${alto})`)
.call(d3.axisBottom(x));
g.append("g")
.call(d3.axisLeft(y));
// Puntos
g.selectAll("circle")
.data(datos_iris)
.join("circle")
.attr("cx", d => x(d.longitud_sepalo))
.attr("cy", d => y(d.longitud_petalo))
.attr("r", d => radio(d.area_petalo))
.attr("fill", d => color(d.area_petalo))
.attr("opacity", 0.8);
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.
