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 colores_cat = slider({
min: 3,
max: 10,
step: 1,
value: 6,
title: "Colores categóricos"
})
swatches(["#e63946", "#fcbf49", "#fca311", "#3a86ff", "#14213d"].slice(0, colores_cat))
swatches(["#03071eff",
"#370617ff",
"#6a040fff",
"#9d0208ff",
"#d00000ff",
"#dc2f02ff",
"#e85d04ff",
"#f48c06ff",
"#faa307ff",
"#ffba08ff"].slice(0, colores_cat))
swatches(["#fff0f3","#ffccd5", "#ffb3c1","#ff8fa3","#ff758f","#ff4d6d","#c9184a","#a4133c","#800f2f","#590d22"].slice(0, colores_cat))
swatches(["#03045e","#023e8a","#0077b6","#0096c7","#00b4d8","#48cae4","#90e0ef","#ade8f4","#caf0f8"].slice(0, colores_cat))
viewof lum_steps = slider({
min: 0,
max: 100,
step: 1,
value: 10,
title: "Luminosidad",
description: "Control para la luminosidad del color."
})
paleta_colores = ["#03045e","#023e8a","#0077b6","#0096c7","#00b4d8","#48cae4","#90e0ef","#ade8f4","#caf0f8"]
// Resolución ejercicio b)
swatches(
paleta_colores
.slice(0, colores_cat)
.map(c => d3.hsl(c))
.map(hsl => {
hsl.l = lum_steps / 100;
return hsl.formatHex();
})
)
// Resolución ejercicio c)
iris = d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", nuevo => ({
longitud_sepalo: +nuevo.Sepal_Length,
longitud_petalo: +nuevo.Petal_Length,
especie: nuevo.Species,
area_petalo: (+nuevo.Petal_Length * +nuevo.Petal_Width) / 2
}))
// Resolución ejercicio d)
viewof chart = {
const width = 350;
const height = 350;
// Crear el SVG
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
// Cargar datos y procesarlos
const data = await d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", d => ({
longitud_sepalo: +d.Sepal_Length,
longitud_petalo: +d.Petal_Length,
especie: d.Species
}));
// Crear escalas
const x = d3.scaleLinear()
.domain(d3.extent(data, d => d.longitud_sepalo))
.range([0, width]);
const y = d3.scaleLinear()
.domain(d3.extent(data, d => d.longitud_petalo))
.range([height, 0]);
// Dibujar puntos
svg.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", "steelblue");
return svg.node();
}
color = d3.scaleOrdinal()
.domain([...new Set(iris.map(d => d.especie))])
.range(d3.schemeCategory10)
// Resoluciín ejercicio e)
viewof scatterplot = {
const margin = { top: 20, right: 20, bottom: 40, left: 50 };
const width = 350;
const height = 350;
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
// Crear SVG
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
// Cargar datos
const data = await d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", d => ({
longitud_sepalo: +d.Sepal_Length,
longitud_petalo: +d.Petal_Length,
especie: d.Species
}));
// Escalas
const x = d3.scaleLinear()
.domain(d3.extent(data, d => d.longitud_sepalo))
.range([0, innerWidth]);
const y = d3.scaleLinear()
.domain(d3.extent(data, d => d.longitud_petalo))
.range([innerHeight, 0]);
// Escala de color para especies
const color = d3.scaleOrdinal()
.domain([...new Set(data.map(d => d.especie))])
.range(d3.schemeCategory10);
// Grupo interno con márgenes aplicados
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// 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(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));
return svg.node();
}
import {legend} from "@d3/color-legend"
// Resolución ejercicio f)
viewof scatterplot_area = {
const margin = { top: 20, right: 20, bottom: 40, left: 50 };
const width = 350;
const height = 350;
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
// Crear SVG
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
// Cargar datos con cálculo de área
const data = await d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", d => {
const petalLength = +d.Petal_Length;
const petalWidth = +d.Petal_Width;
return {
longitud_sepalo: +d.Sepal_Length,
longitud_petalo: petalLength,
especie: d.Species,
area_petalo: (petalLength * petalWidth) / 2
};
});
// Escalas de posición
const x = d3.scaleLinear()
.domain(d3.extent(data, d => d.longitud_sepalo))
.range([0, innerWidth]);
const y = d3.scaleLinear()
.domain(d3.extent(data, d => d.longitud_petalo))
.range([innerHeight, 0]);
// Escala de color continua por área
const color = d3.scaleSequential()
.domain(d3.extent(data, d => d.area_petalo))
.interpolator(d3.interpolatePlasma);
// Escala de radio
const r = d3.scaleSqrt()
.domain(d3.extent(data, d => d.area_petalo))
.range([2, 10]);
// Grupo interno
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// Ejes
g.append("g")
.attr("transform", `translate(0,${innerHeight})`)
.call(d3.axisBottom(x));
g.append("g")
.call(d3.axisLeft(y));
// Dibujar 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 => color(d.area_petalo))
.attr("opacity", 0.7);
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.
