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)"])
palette1 = {
const colores = [
"#ff5a5f", // coral
"#fcd34d", // amarillo suave
"#7ed957", // verde lima
"#2196f3", // azul brillante
"#7c3aed" // violeta
];
const interpolador = d3.interpolateRgbBasis(colores);
return d3.range(color_steps).map(d =>
interpolador(d / (color_steps - 1))
);
}
swatches(palette1)
// Resolución ejercicio a)
// Crear paleta de colores
palette2 = {
const colores = [
"#000010",
"#2b0000",
"#8b0000",
"#e41a1c",
"#f16913",
"#fdae61",
"#fec44f"
];
const interpolador = d3.interpolateRgbBasis(colores);
return d3.range(color_steps).map(d =>
interpolador(d / (color_steps - 1))
);
}
swatches(palette2)
palette3 = {
const colores = [
"#f2d3cb", // rosado claro
"#dfb7a7",
"#c99d89",
"#b68471",
"#a26b5c",
"#8e5448",
"#7a3f35" // marrón
];
const interpolador = d3.interpolateRgbBasis(colores);
return d3.range(color_steps).map(d =>
interpolador(d / (color_steps - 1))
);
}
swatches(palette3)
palette4 = {
const colores = [
"#00005f", // azul muy oscuro
"#002080", // azul marino
"#0044aa", // azul medio
"#4a90c2", // celeste fuerte
"#8fcbe8", // celeste claro
"#d0ecf9", // casi blanco
"#f5faff" // blanco azulado
];
const interpolador = d3.interpolateRgbBasis(colores);
return d3.range(color_steps).map(d =>
interpolador(d / (color_steps - 1))
);
}
swatches(palette4)
// Intento con scaleQuantize
palette5 = {
const scale = d3.scaleQuantize()
.domain([0, 1])
.range(d3.range(color_steps).map(d =>
d3.interpolateRgb("darkblue", "white")(d / (color_steps - 1))
));
return d3.range(color_steps).map(d => scale(d / (color_steps - 1)));
}
swatches(palette5)
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)
paletteb = {
const base = [
"#ff5a5f", // coral
"#fcd34d", // amarillo suave
"#7ed957", // verde lima
"#2196f3", // azul brillante
"#7c3aed" // violeta
];
const interpolador = d3.interpolateRgbBasis(base);
const luminosidad = lum_steps / 100;
return d3.range(color_steps).map(d => {
const rgb = d3.rgb(interpolador(d / (color_steps - 1)));
const hsl = d3.hsl(rgb);
hsl.l = luminosidad;
return hsl.formatRgb(); // volver a RGB para que se vea bien en el navegador
});
}
swatches(paletteb)
// Resolución ejercicio c)
iris = (await d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", d => {
return {
longitud_sepalo: +d.Sepal_Length,
longitud_petalo: +d.Petal_Length,
especie: d.Species,
area_petalo: (+d.Petal_Length * +d.Petal_Width) / 2
};
}))
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: valores bajos abajo, altos arriba
viewof svg = {
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;
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 xScale = x.range([0, innerWidth]);
const yScale = y.range([innerHeight, 0]);
// Ejes
g.append("g")
.attr("transform", `translate(0,${innerHeight})`)
.call(d3.axisBottom(xScale));
g.append("g")
.call(d3.axisLeft(yScale));
// Escala de color por especie
const color = d3.scaleOrdinal()
.domain([...new Set(iris.map(d => d.especie))])
.range(["#e41a1c", "#377eb8", "#4daf4a"]);
// Puntos
g.selectAll("circle")
.data(iris)
.enter()
.append("circle")
.attr("cx", d => xScale(d.longitud_sepalo))
.attr("cy", d => yScale(d.longitud_petalo))
.attr("r", 4)
.attr("fill", d => color(d.especie))
.attr("opacity", 0.7);
return svg.node();
}
color = d3.scaleSequential()
.domain(d3.extent(iris, d => d.area_petalo))
.interpolator(d3.interpolateRgb("yellow", "red"))
viewof svg_f = {
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;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const xScale = x.range([0, innerWidth]);
const yScale = y.range([innerHeight, 0]);
const radiusScale = d3.scaleSqrt()
.domain(d3.extent(iris, d => d.area_petalo))
.range([2, 10]);
g.append("g")
.attr("transform", `translate(0,${innerHeight})`)
.call(d3.axisBottom(xScale));
g.append("g")
.call(d3.axisLeft(yScale));
g.selectAll("circle")
.data(iris)
.enter()
.append("circle")
.attr("cx", d => xScale(d.longitud_sepalo))
.attr("cy", d => yScale(d.longitud_petalo))
.attr("r", d => radiusScale(d.area_petalo))
.attr("fill", d => color(d.area_petalo))
.attr("opacity", 0.8);
return svg.node();
}
legend({
color,
title: "Área del pétalo",
width: 200,
ticks: 5
})
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.
