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)
linea_1 = d3.piecewise(d3.interpolateLab, ['#000216', '#ff0000', '#feba2a'])
colorb=d3.quantize(linea_1,color_steps)
swatches(colorb)
linea_2 = d3.interpolateLab("#edd1c2", "#5c3627")
colorc = d3.quantize(linea_2, color_steps)
swatches(colorc)
linea_3 = d3.interpolateLab("#00004d", "#e1f6fc")
color = d3.quantize(linea_3, color_steps)
swatches(color)
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)
linea = swatches(
["#fd5a62", "#ffca4a", "#8cc834", "#1784c3", "#6a4d92"].map(c => {
let hsl = d3.hsl(c)
hsl.l = lum_steps / 100 // Ajuste de luminosidad (0 a 1)
return hsl.toString()
})
)
// Resolución ejercicio c)
data = d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv")
data_new = 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
}))
Inputs.table(data_new)
// Resolución ejercicio d)
x = d3.scaleLinear()
.domain(d3.extent(data_new, d => d.longitud_sepalo))
.range([0, 350])
y = d3.scaleLinear()
.domain(d3.extent(data_new, d => d.longitud_petalo))
.range([350, 0])
{
// 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.selectAll("circle")
.data(data_new)
.enter()
.append("circle")
.attr("cx", d => x(d.longitud_sepalo))
.attr("cy", d => y(d.longitud_petalo))
.attr("r", 3)
.attr("fill", "steelblue")
.attr("opacity", 0.7);
// n. Retornamos el canvas.
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 svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const plotArea = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const x = d3.scaleLinear()
.domain(d3.extent(data_new, d => d.longitud_sepalo))
.range([0, innerWidth]);
const y = d3.scaleLinear()
.domain(d3.extent(data_new, d => d.longitud_petalo))
.range([innerHeight, 0]);
const color = d3.scaleSequential()
.domain(d3.extent(data_new, d => d.area_petalo))
.interpolator(d3.interpolatePlasma);
const radius = d3.scaleSqrt()
.domain(d3.extent(data_new, d => d.area_petalo))
.range([2, 10]);
plotArea.selectAll("circle")
.data(data_new)
.enter()
.append("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);
plotArea.append("g")
.attr("transform", `translate(0,${innerHeight})`)
.call(d3.axisBottom(x));
plotArea.append("g")
.call(d3.axisLeft(y));
// 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.
