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)
// Resolución ejercicio c)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
data = (await d3.csv(url)).map(d => {
const sl = +d.Sepal_Length,
pl = +d.Petal_Length,
pw = +d.Petal_Width;
return {
longitud_sepalo: sl,
longitud_petalo: pl,
especie: d.Species,
area_petalo: (pl * pw) / 2
};
})
import {table}
table(data, { width: 800 })
// 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.
