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 steps_hsl = slider({
min: 2, max: 30, step: 1, value: 10,
title: "Cantidad de colores - HSL"
})
palette_hsl = d3.quantize(d3.interpolateHsl("yellow", "purple"), steps_hsl)
swatches(palette_hsl)
viewof steps_lab = slider({
min: 2, max: 30, step: 1, value: 10,
title: "Cantidad de colores - LAB"
})
palette_lab = d3.quantize(d3.interpolateLab("white", "black"), steps_lab)
swatches(palette_lab)
viewof steps_hcl = slider({
min: 2, max: 30, step: 1, value: 10,
title: "Cantidad de colores - HCL"
})
palette_hcl = d3.quantize(d3.interpolateHcl("orange", "teal"), steps_hcl)
swatches(palette_hcl)
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)
palette_hsl_lum = palette_hsl.map(c => {
const hsl = d3.hsl(c);
hsl.l = lum_steps / 100;
return hsl.formatRgb(); // devuelve el nuevo color como string "rgb(...)"
})
swatches(palette_hsl_lum)
// Resolución ejercicio c)
iris_data= d3.csv("https://raw.githubusercontent.com/uiuc-cse/data-fa14/gh-pages/data/iris.csv", d3.autoType)
iris = 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
}))
// Resolución ejercicio d)
x = d3.scaleLinear()
.domain(d3.extent(iris, d => d.longitud_sepalo))
.range([0, 350])
y = d3.scaleLinear()
.domain(d3.extent(iris, d => d.longitud_petalo))
.range([350, 0]) // invertido para que el origen esté abajo a la izquierda
{
const width = 350;
const height = 350;
const margin = { top: 10, right: 10, bottom: 40, left: 40 };
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
// Grupo interno con márgenes
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
// Escalas ya definidas (usamos extent de iris)
const x = d3.scaleLinear()
.domain(d3.extent(iris, d => d.longitud_sepalo))
.range([0, innerWidth]);
const y = d3.scaleLinear()
.domain(d3.extent(iris, 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));
// Puntos
g.selectAll("circle")
.data(iris)
.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));
return svg.node();
}
{
const width = 350;
const height = 350;
const margin = { top: 10, right: 10, bottom: 40, left: 40 };
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
// Escalas X e Y
const x = d3.scaleLinear()
.domain(d3.extent(iris, d => d.longitud_sepalo))
.range([0, innerWidth]);
const y = d3.scaleLinear()
.domain(d3.extent(iris, d => d.longitud_petalo))
.range([innerHeight, 0]);
// Escala de color continua según area_petalo
const color = d3.scaleSequential()
.domain(d3.extent(iris, d => d.area_petalo))
.interpolator(d3.interpolatePlasma);
// Escala de radio
const radius = d3.scaleSqrt()
.domain(d3.extent(iris, 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));
// Círculos
g.selectAll("circle")
.data(iris)
.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();
}
import {Legend, Swatches} from "@d3/color-legend"
legend = d3.scaleSequential(d3.interpolatePlasma)
.domain(d3.extent(iris, d => d.area_petalo)))
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.
