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)
url = "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv"
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
};
})
viewof miTabla = {
const cols = Object.keys(data[0]);
return html`<table style="border-collapse: collapse; width: 100%;">
<thead>
<tr>${cols.map(c => html`<th style="border:1px solid #aaa; padding:4px;">${c}</th>`)}</tr>
</thead>
<tbody>
${data.map(d =>
html`<tr>
${cols.map(c => html`<td style="border:1px solid #ddd; padding:4px;">${d[c]}</td>`)}
</tr>`
)}
</tbody>
</table>`;
}
// Resolución ejercicio d)
width = 350
height = 350
x = d3.scaleLinear()
.domain(d3.extent(data, d => d.longitud_sepalo)) // [mín, máx] de sépalos
.range([0, width])
y = d3.scaleLinear()
.domain(d3.extent(data, d => d.longitud_petalo)) // [mín, máx] de pétalos
.range([height, 0])
color = d3.scaleOrdinal()
.domain([...new Set(data.map(d => d.especie))]) // todas las especies únicas
.range(d3.schemeCategory10) // paleta de 10 colores
chart = {
// 1. Parámetros
const width = 350,
height = 350,
margin = { top: 20, right: 20, bottom: 30, left: 40 };
// 2. Crear SVG con espacio para márgenes
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
// 3. Grupo que respeta los márgenes
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// 4. Ejes
g.append("g")
.call(d3.axisLeft(y));
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x));
// 5. Puntos del scatter
g.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d.longitud_sepalo))
.attr("cy", d => y(d.longitud_petalo))
.attr("r", 3)
.attr("fill", d => color(d.especie));
// 6. Texto identificativo (opcional)
svg.append("text")
.attr("x", margin.left + width/2)
.attr("y", margin.top - 5)
.attr("text-anchor", "middle")
.text("Iris: Sepal vs. Petal");
// 7. Retornar el nodo SVG
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.
