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)"])
swatches(
d3.quantize(d3.interpolateViridis, sequential_steps)
)
// Resolución ejercicio a)
viewof sequential_steps = slider({
min: 2,
max: 30,
step: 1,
value: 10,
title: "Colores en paleta secuencial"
})
swatches(
d3.quantize(d3.interpolatePiYG, diverging_steps)
)
viewof diverging_steps = slider({
min: 2,
max: 30,
step: 1,
value: 10,
title: "Colores en paleta divergente"
})
swatches(
d3.quantize(t => {
const coolors = ["#8D8741", "#659DBD", "#DAAD86", "#BC986A", "#FBEEC1"]
;
const idx = Math.floor(t * coolors.length);
return coolors[Math.min(idx, coolors.length - 1)];
}, custom_steps)
)
viewof custom_steps = slider({
min: 2,
max: 20,
step: 1,
value: 5,
title: "Colores en paleta personalizada (Coolors)"
})
viewof lum_steps = slider({
min: 0,
max: 100,
step: 1,
value: 10,
title: "Luminosidad",
description: "Control para la luminosidad del color."
})
swatches(
d3.quantize(t => {
const baseColors = ["#8D8741", "#659DBD", "#DAAD86", "#BC986A", "#FBEEC1"];
const idx = Math.floor(t * baseColors.length);
const hex = baseColors[Math.min(idx, baseColors.length - 1)];
const hsl = d3.hsl(hex);
hsl.l = lum_steps / 100;
return hsl.formatHex();
}, custom_steps)
)
iris_data = await d3.csv("https://raw.githubusercontent.com/uiuc-cse/data-fa14/gh-pages/data/iris.csv", d3.autoType)
iris_transformada = iris_data.map(d => ({
longitud_sepalo: d.sepal_length,
longitud_petalo: d.petal_length,
especie: d.species,
area_petalo: (d.petal_length * d.petal_width) / 2
}))
setup = {
const data = iris_transformada;
const width = 350;
const height = 350;
const margin = {top: 20, right: 20, bottom: 30, left: 40};
const x = d3.scaleLinear()
.domain([
d3.min(data, d => d.longitud_sepalo) ,
d3.max(data, d => d.longitud_sepalo)
])
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain([
d3.min(data, d => d.longitud_petalo) ,
d3.max(data, d => d.longitud_petalo)
])
.range([height - margin.bottom, margin.top]);
return {x, y, width, height, margin};
}
{
const {x, y, width, height, margin} = setup;
const color = d3.scaleOrdinal()
.domain(["setosa", "versicolor", "virginica"])
.range(["#1f77b4", "#ff7f0e", "#2ca02c"]);
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x));
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
svg.selectAll("circle")
.data(iris_transformada)
.join("circle")
.attr("cx", d => x(d.longitud_sepalo))
.attr("cy", d => y(d.longitud_petalo))
.attr("r", 4)
.attr("fill", d => color(d.especie))
.attr("opacity", 0.8);
return svg.node();
}
import {Legend, Swatches} from "@d3/color-legend"
{
const {x, y, width, height, margin} = setup;
const color = d3.scaleSequential(
d3.extent(iris_transformada, d => d.area_petalo),
d3.interpolateViridis
);
const radio = d3.scaleSqrt()
.domain(d3.extent(iris_transformada, d => d.area_petalo))
.range([2, 10]);
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x));
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
svg.selectAll("circle")
.data(iris_transformada)
.join("circle")
.attr("cx", d => x(d.longitud_sepalo))
.attr("cy", d => y(d.longitud_petalo))
.attr("r", d => radio(d.area_petalo))
.attr("fill", d => color(d.area_petalo))
.attr("opacity", 0.8);
const container = html`<div style="display: flex; gap: 40px; align-items: center;"></div>`;
container.appendChild(svg.node());
const legend = Legend(color, {title: "Área del pétalo"});
container.appendChild(legend);
return container;
}
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.
