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 pasosPaleta1 = slider({
title: "Paleta 1",
description: "Número de colores",
min: 0, max: 5, step: 1, value: 5
})
paleta1 = ["#f16a6b","#fecb67","#8ad55a","#3f92d2","#7a57ad"]
.slice(0, pasosPaleta1)
swatches(paleta1)
viewof pasosPaleta2 = slider({
title: "Paleta 2",
description: "Número de colores",
min: 0, max: 20, step: 1, value: 10
})
paleta2 = d3.quantize(d3.interpolateInferno, pasosPaleta2)
swatches(paleta2)
viewof pasosPaleta3 = slider({
title: "Paleta 3",
description: "Número de colores",
min: 2, max: 11, step: 1, value: 11
})
paleta3 = [
"#f2dcd2","#e7c9b9","#dbc2af","#d0b7a5","#c5ae9c",
"#baa493","#ae9a8a","#a39081","#988779","#8d7e70","#827568"
].slice(0, pasosPaleta3)
swatches(paleta3)
viewof pasosPaleta4 = slider({
title: "Paleta 4",
description: "Número de colores",
min: 2, max: 20, step: 1, value: 10
})
paleta4 = d3.quantize(d3.interpolateBlues, pasosPaleta4).reverse()
swatches(paleta4)
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)
paleta2_lum = paleta2.map(c => {
// parseamos each color a HSL
const hsl = d3.hsl(c);
// escalamos la luminosidad: 50 → factor 1, 0 → 0, 100 → 2
const factor = lum_steps / 50;
// multiplicamos y clavamos en [0,1]
const l = Math.max(0, Math.min(hsl.l * factor, 1));
// reconvertimos a CSS
return d3.hsl(hsl.h, hsl.s, l).toString();
})
swatches(paleta2_lum)
// 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: Sepalo vs. Petalo");
// 7. Retornar el nodo SVG
return svg.node();
}
colorArea = d3.scaleSequential(d3.interpolateViridis)
.domain(d3.extent(data, d => d.area_petalo))
r = d3.scaleSqrt()
.domain(d3.extent(data, d => d.area_petalo))
.range([2, 12])
chartArea = {
const width = 350,
height = 350,
margin = { top: 20, right: 100, bottom: 30, left: 40 };
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// Ejes
g.append("g").call(d3.axisLeft(y));
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x));
// Puntos
g.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d.longitud_sepalo))
.attr("cy", d => y(d.longitud_petalo))
.attr("r", d => r(d.area_petalo))
.attr("fill", d => colorArea(d.area_petalo))
.attr("opacity", 0.8);
return svg.node();
}
import {Legend, Swatches} from "@d3/color-legend"
viewof colorLegend = Legend(colorArea, {
title: "area_petalo",
width: 200,
ticks: 5,
tickFormat: d3.format(".1f")
})
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.
