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(["#ff4c4c", "#ffc24c", "#b6cc39", "#2ca8d2", "#6a45a4"]) // Paleta 1 (aproximada)
swatches(["#0b0018", "#2c001a", "#4c001b", "#6d001d", "#8d0d15", "#af210a", "#d43d00", "#f46d00", "#faa300", "#ffcb00"]) // Paleta 2
swatches(["#f1d4ca", "#e5c3b3", "#dcb1a3", "#d09f93", "#c48d83", "#b87b73", "#ac6963", "#a05753", "#944543", "#883333"]) // Paleta 3
swatches(["#06005c", "#0b1a8f", "#1333c2", "#2f53e0", "#5075f0", "#7298f6", "#94bcfb", "#b7dfff", "#d9f4ff", "#e5faff"]) // Paleta 4
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)
base_palette = d3.quantize(d3.interpolateInferno, 10)
adjusted_palette = base_palette.map(color => {
let hsl = d3.hsl(color);
hsl.l = lum_steps / 100; // ajustamos la luminosidad según el slider
return hsl.toString(); // convertimos de nuevo a string para mostrarlo
})
swatches(adjusted_palette)
// Resolución ejercicio c)
iris_data_raw = d3.csv("https://raw.githubusercontent.com/uiuc-cse/data-fa14/gh-pages/data/iris.csv")
iris_data = iris_data_raw.map(d => ({
longitud_sepalo: +d.sepal_length,
longitud_petalo: +d.petal_length,
especie: d.species,
area_petalo: +( (+d.petal_length * +d.petal_width) / 2 ).toFixed(2)
}))
iris_data.slice(0, 5) // Mostrar las primeras 5 filas
// Resolución ejercicio d)
x = d3.scaleLinear()
.domain(d3.extent(iris_data, d => d.longitud_sepalo))
.range([0, 350])
y = d3.scaleLinear()
.domain(d3.extent(iris_data, d => d.longitud_petalo))
.range([350, 0]) // Y se invierte: 0 arriba, 350 abajo
// 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 width = 350;
const height = 350;
const margin = {top: 20, right: 20, bottom: 40, left: 40};
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// Escalas
const x = d3.scaleLinear()
.domain(d3.extent(iris_data, d => d.longitud_sepalo))
.range([0, innerWidth]);
const y = d3.scaleLinear()
.domain(d3.extent(iris_data, d => d.longitud_petalo))
.range([innerHeight, 0]);
// Escala de color por especie
const color = d3.scaleOrdinal()
.domain(["setosa", "versicolor", "virginica"])
.range(["#e41a1c", "#377eb8", "#4daf4a"]);
// Ejes
g.append("g")
.attr("transform", `translate(0,${innerHeight})`)
.call(d3.axisBottom(x));
g.append("g")
.call(d3.axisLeft(y));
// Círculos (scatterplot)
g.selectAll("circle")
.data(iris_data)
.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();
}
{
// 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 width = 350;
const height = 350;
const margin = {top: 20, right: 20, bottom: 40, left: 40};
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// Escalas
const x = d3.scaleLinear()
.domain(d3.extent(iris_data, d => d.longitud_sepalo))
.range([0, innerWidth]);
const y = d3.scaleLinear()
.domain(d3.extent(iris_data, d => d.longitud_petalo))
.range([innerHeight, 0]);
const color = d3.scaleSequential(d3.interpolateViridis)
.domain(d3.extent(iris_data, d => d.area_petalo));
const radius = d3.scaleSqrt()
.domain(d3.extent(iris_data, d => d.area_petalo))
.range([2, 10]);
// Ejes
g.append("g")
.attr("transform", `translate(0,${innerHeight})`)
.call(d3.axisBottom(x));
g.append("g")
.call(d3.axisLeft(y));
// Puntos
g.selectAll("circle")
.data(iris_data)
.join("circle")
.attr("cx", d => x(d.longitud_sepalo))
.attr("cy", d => y(d.longitud_petalo))
.attr("r", d => radius(d.area_petalo))
.attr("fill", d => color(d.area_petalo))
.attr("opacity", 0.8);
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.
