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."
})
swatches(colors)
// 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 color_steps_bis = slider({
min: 0,
max: 30,
step: 1,
value: 10,
title: "Cantidad de colores ('#90B494', '#718F94')",
description: "Control para la cantidad de colores a visualizar en la misma paleta."
})
colors_bis = d3.quantize(d3.interpolateHcl("#718F94","#90B494"), color_steps_bis)
swatches(colors_bis)
viewof lum_steps = slider({
min: 0,
max: 100,
step: 1,
value: 10,
title: "Luminosidad",
description: "Control para la luminosidad del color."
})
// Resolución ejercicio b)
swatches(colors_bis.map(c => {
let hsl = d3.hsl(c);
hsl.l = lum_steps / 100; // convertir de 0-100 a 0-1
return hsl.formatHex();
}))
// Resolución ejercicio c)
iris_base = d3.csvParse(await FileAttachment("iris.csv").text())
iris = iris_base.map(d => ({
longitud_sepalo: +d.Sepal_Length,
Sepal_Width: +d.Sepal_Width,
longitud_petalo: +d.Petal_Length,
Petal_Width: +d.Petal_Width,
especie: d.Species,
area_petalo: (+d.Petal_Length * +d.Petal_Width)/2
}))
iris[0]
margin = ({top: 20, right: 30, bottom: 30, left: 40}) // Cambiá estos valores para ver el efecto
height = 350
// Resolución ejercicio d)
x = d3.scaleBand()
.domain(iris.map(d => d.longitud_sepalo))
.range([margin.left, width - margin.right])
.padding(0.1)
y = d3.scaleLinear()
.domain([0, d3.max(iris, d => d.longitud_petalo)])
.range([height - margin.bottom,margin.top])
xAxis = function (g) { return g.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))}
yAxis = function (g) { return g.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))}
{
const width = 350;
const height = 350;
const margin = { top: 20, right: 20, bottom: 40, left: 50 };
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
// Escalas (asumimos que iris ya existe)
const x = d3.scaleLinear()
.domain(d3.extent(iris, d => d.longitud_sepalo))
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain(d3.extent(iris, d => d.longitud_petalo))
.range([height - margin.bottom, margin.top]);
const color = d3.scaleOrdinal()
.domain([...new Set(iris.map(d => d.especie))])
.range(["green", "red", "blue"]);
// Eje X
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
.append("text")
.attr("x", width / 2)
.attr("y", 30)
.attr("fill", "black")
.attr("text-anchor", "middle")
.text("Longitud de Sépalo");
// Eje Y
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -height / 2)
.attr("y", -35)
.attr("fill", "black")
.attr("text-anchor", "middle")
.text("Longitud de Pétalo");
// Puntos
svg.selectAll("circle")
.data(iris)
.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.8);
return svg.node();
}
iris_base[0]
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.
