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)"])
// Resolución ejercicio a)
//import {swatchesA} from "@d3/color-legend"
viewof color_stepsA = slider({
min: 3,
max: 20,
step: 1,
value: 7,
title: "Cantidad de colores A"
})
colorsA = d3.quantize(d3.interpolateWarm, color_stepsA)
swatches(colorsA)
viewof color_stepsA1 = slider({
min: 3,
max: 20,
step: 1,
value: 7,
title: "Cantidad de colores A1"
})
colorsA1 = d3.quantize(d3.interpolateBlues, color_stepsA1)
swatches(colorsA1)
// Para un array de colores ya definido
// Paleta de colores fija
palette = ["#f75e5e", "#f9cc53", "#91c84c", "#339bd3", "#6c4e93"]
viewof color_stepsA2 = slider({
min: 1,
max: palette.length,
step: 1,
value: palette.length,
title: "Cantidad de colores",
description: "Controla cuántos colores mostrar de la paleta fija"
})
// Mostrar los primeros N colores según el slider
swatches(palette.slice(0, color_stepsA2))
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)
// Paleta base original
paletteB = ["#f75e5e", "#f9cc53", "#91c84c", "#339bd3", "#6c4e93"]
// Slider para controlar la luminosidad (0 a 100)
viewof lum_stepsB = slider({
min: 1,
max: 99,
step: 1,
value: 60, // valor inicial
title: "Luminosidad",
description: "Controla la luminosidad de todos los colores"
})
// Generar nueva paleta con la luminosidad modificada
palette_luminosa = palette.map(c => {
let hsl = d3.hsl(c);
hsl.l = lum_stepsB / 100;
return hsl.toString(); // lo convertimos de nuevo a string para visualizar
})
// Visualización con swatches
swatches(palette_luminosa)
// Resolución ejercicio c)
iris = d3.csv("https://raw.githubusercontent.com/uiuc-cse/data-fa14/gh-pages/data/iris.csv")
iris_procesado = iris.map(d => ({
longitud_sepalo: +d.sepal_length,
longitud_petalo: +d.petal_length,
especie: d.species,
area_petalo: +d.petal_length * +d.petal_width
}))
// Resolución ejercicio d)
x = d3.scaleLinear()
.domain(d3.extent(iris_procesado, d => d.longitud_sepalo))
.range([0, 350])
y = d3.scaleLinear()
.domain(d3.extent(iris_procesado, d => d.longitud_petalo))
.range([350, 0]) // invertido para que y crezca hacia arriba
// Resolución
viewof chart = {
const margin = {top: 20, right: 20, bottom: 40, left: 50}
const width = 350
const height = 350
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`)
// Ejes
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x))
g.append("g")
.call(d3.axisLeft(y))
// Escala de colores
const color = d3.scaleOrdinal()
.domain(["setosa", "versicolor", "virginica"])
.range(d3.schemeCategory10)
// Puntos
g.selectAll("circle")
.data(iris_procesado)
.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))
return svg.node()
}
width = 400
height = 400
margin = ({top: 20, right: 20, bottom: 40, left: 40})
// Escalas
xf = d3.scaleLinear()
.domain(d3.extent(iris_procesado, d => d.longitud_sepalo))
.range([margin.left, width - margin.right])
yf = d3.scaleLinear()
.domain(d3.extent(iris_procesado, d => d.longitud_petalo))
.range([height - margin.bottom, margin.top])
// Escalas
color = d3.scaleSequential()
.domain(d3.extent(iris_procesado, d => d.area_petalo))
.interpolator(d3.interpolatePlasma)
// Escalas
radio = d3.scaleSqrt()
.domain(d3.extent(iris_procesado, d => d.area_petalo))
.range([2, 10])
// Scatterplot
svg = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
// 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.append("g")
.selectAll("circle")
.data(iris_procesado)
.join("circle")
.attr("cx", d => xf(d.longitud_sepalo))
.attr("cy", d => yf(d.longitud_petalo))
.attr("r", d => radio(d.area_petalo))
.attr("fill", d => color(d.area_petalo))
.attr("opacity", 0.7);
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.
