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)
swatches(["#f16a6b", "#fecb67", "#8ad55a", "#3f92d2", "#7a57ad"])
swatches([
"#1a232c", // Tono más oscuro
"#351a20",
"#501012",
"#7b110e",
"#a71a0b",
"#d33d0b",
"#f06a0d",
"#f5951f",
"#fac130",
"#ffec41" // Tono más claro/amarillo
])
swatches([
"#f2dcd2", // Tono más claro
"#e7c9b9",
"#dbc2af",
"#d0b7a5",
"#c5ae9c",
"#baa493",
"#ae9a8a",
"#a39081",
"#988779",
"#8d7e70",
"#827568" // Tono más oscuro
])
swatches([
"#0b1a4b", // Azul más oscuro
"#153171",
"#1f4997",
"#2a61be",
"#447ac5",
"#6093cd",
"#7bbde4",
"#97d6eb",
"#b2eff3",
"#cff9fb" // Azul más claro
])
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 de colores base (la paleta de azules de antes)
({const baseColors = [
"#0b1a4b", // Azul más oscuro
"#153171",
"#1f4997",
"#2a61be",
"#447ac5",
"#6093cd",
"#7bbde4",
"#97d6eb",
"#b2eff3",
"#cff9fb" // Azul más claro
];
// Paleta transformada por el slider de luminosidad
const dynamicPalette = baseColors.map(color => {
const hslColor = d3.hsl(color);
if (lum_steps <= 50) {
hslColor.l = hslColor.l * (lum_steps / 50);
} else {
hslColor.l = hslColor.l + (1 - hslColor.l) * ((lum_steps - 50) / 50);
}
hslColor.l = Math.max(0, Math.min(1, hslColor.l));
return hslColor.toString();
});
// Mostrar la paleta dinámica
swatches(dynamicPalette)
// Resolución ejercicio c)
// Resolución ejercicio d)
{
// 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);
// Un cuadro de texto.
svg.append("text")
.attr("x", 110)
.attr("y", 175)
.text("Área de dibujo vacía");
// n. Retornamos el canvas.
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);
// Un cuadro de texto.
svg.append("text")
.attr("x", 110)
.attr("y", 175)
.text("Área de dibujo vacía");
// n. Retornamos el canvas.
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.
