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(["hsl(0, 100%, 0%)","hsl(0, 100%, 10%)","hsl(0, 100%, 20%)","hsl(0, 100%, 30%)", "hsl(0, 100%, 40%)","hsl(12, 100%, 50%)","hsl(24, 100%, 50%)","hsl(36, 100%, 50%)","hsl(48, 100%, 50%)", "hsl(60, 100%, 50%)"])
// Resolución ejercicio a)
swatches(["rgba(255,0,0,0.8)", "rgba(228,228,0,1)" ,"rgba(20,255,0,0.9)", "rgba(0,140,255,1)", "rgba(100,0,100,1)"])
swatches(["hsl(0, 100%, 0%)","hsl(0, 100%, 10%)","hsl(0, 100%, 20%)","hsl(0, 100%, 30%)", "hsl(0, 100%, 40%)","hsl(12, 100%, 50%)","hsl(24, 100%, 50%)","hsl(36, 100%, 50%)","hsl(48, 100%, 50%)", "hsl(60, 100%, 50%)"])
swatches(["hsl(0,50%,80%)", "hsl(2,50%,70%)","hsl(4,50%,60%)","hsl(6,50%,50%)","hsl(8,50%,40%)","hsl(10,50%,30%)","hsl(12,50%,20%)","hsl(21,50%,37.5%)","hsl(24,50%,30%)","hsl(27,50%,22.5%)","hsl(20,50%,20%)"])
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
