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)
viewof color_steps_paleta1 = slider({
min: 3,
max: 20,
step: 1,
value: 6,
title: "Cantidad de colores paleta 1",
})
color_paleta1 = d3.quantize(d3.interpolateViridis, color_steps_paleta1)
swatches(color_paleta1, {title: "Paleta 1"})
viewof color_steps_paleta2 = slider({
min: 3,
max: 20,
step: 1,
value: 6,
title: "Cantidad de colores paleta 2",
})
color_paleta2 = d3.quantize(d3.interpolateRgb("black", "red"), color_steps_paleta2)
swatches(color_paleta2, {title: "Paleta 2"})
viewof color_steps_paleta3 = slider({
min: 3,
max: 20,
step: 1,
value: 7,
title: "Cantidad de colores paleta 3",
})
color_paleta3 = d3.quantize(d3.interpolateRgb("#F5F5DC", "#A0522D"), color_steps_paleta3)
swatches(color_paleta3, {title: "Paleta 3"})
viewof color_steps_paleta4 = slider({
min: 3,
max: 20,
step: 1,
value: 7,
title: "Cantidad de colores paleta 4",
})
color_paleta4 = d3.quantize(d3.interpolateRgb("#00008B", "#ADD8E6"), color_steps_paleta4)
swatches(color_paleta4, {title: "Paleta 4"})
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)
// 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.
