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)"])
viewof color_steps1 = slider({
min: 2,
max: 5,
value: 5,
step: 1,
title: "Cantidad de colores - Paleta 1"
})
swatches(["#ef5350", "#fdd835", "#7cb342", "#42a5f5", "#5e35b1"].slice(0, color_steps1))
viewof color_steps2 = slider({
min: 2,
max: 10,
value: 10,
step: 1,
title: "Cantidad de colores - Paleta 2"
})
swatches([
"#03071e", "#370617", "#6a040f", "#9d0208", "#d00000",
"#dc2f02", "#e85d04", "#f48c06", "#faa307", "#ffba08"
].slice(0, color_steps2))
{
var color1 = "#38040e";
var color2 = "#f7b538";
var colorInterpolator = d3.interpolateHcl(color1, color2);
return swatches(d3.quantize(colorInterpolator, color_steps2));
}
viewof color_steps3 = slider({
min: 2,
max: 30,
value: 10,
step: 1,
title: "Cantidad de colores - Paleta 3"
})
{
var color1 = "#fec89a";
var color2 = "#7f5539";
var colorInterpolator = d3.interpolate(color1, color2);
return swatches(d3.quantize(colorInterpolator, color_steps3));
}
viewof color_steps4 = slider({
min: 2,
max: 20,
value: 10,
step: 1,
title: "Cantidad de colores - Paleta 4"
})
swatches(d3.quantize(d3.interpolateBlues, color_steps4))
viewof lum_steps = slider({
min: 0,
max: 100,
step: 1,
value: 10,
title: "Luminosidad",
description: "Control para la luminosidad del color."
})
{
var baseColors = (d3.quantize(d3.interpolateBlues, color_steps4))
var ajustada = baseColors.map(color => {
var hcl = d3.hcl(color);
hcl.l = lum_steps;
return hcl
});
return swatches(ajustada);
}
datos =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
};
})
{
var x = d3.scaleLinear()
.domain(d3.extent(datos, d => d.longitud_sepalo))
.range([0, 350]);
var y = d3.scaleLinear()
.domain(d3.extent(datos, d => d.longitud_petalo))
.range([350, 0]);
return { x, y };
}
{
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})`);
const x = d3.scaleLinear()
.domain(d3.extent(datos, d => d.longitud_sepalo))
.range([0, innerWidth]);
const y = d3.scaleLinear()
.domain(d3.extent(datos, d => d.longitud_petalo))
.range([innerHeight, 0]);
const color = d3.scaleOrdinal(d3.schemeCategory10);
g.selectAll("circle")
.data(datos)
.enter()
.append("circle")
.attr("cx", d => x(d.longitud_sepalo))
.attr("cy", d => y(d.longitud_petalo))
.attr("r", 4)
.attr("fill", d => color(d.especie));
g.append("g")
.attr("transform", `translate(0, ${innerHeight})`)
.call(d3.axisBottom(x));
g.append("g")
.call(d3.axisLeft(y));
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 svg = d3.create("svg")
.attr("width",350)
.attr("height",350);
// Un cuadro de texto.
svg.append("text")
.attr("x", 110)
.attr("y", 175)
.text("Área de dibujo vacía");
// n. Retornamos el canvas.
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.
