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)
// Paleta secuencial con interpolador de d3
paletaInterpolador = d3.quantize(d3.interpolatePlasma, color_steps)
swatches(paletaInterpolador)
paleta_viridis = d3.quantize(d3.interpolateViridis, steps_viridis)
swatches(paleta_viridis)
viewof lum_steps = slider({
min: 0,
max: 100,
step: 1,
value: 10,
title: "Luminosidad",
description: "Control para la luminosidad del color."
})
viewof steps_viridis1 = slider({
min: 3,
max: 30,
step: 1,
value: 10,
title: "Cantidad de colores (Viridis)"
})
paleta_viridis_luminosa = d3.quantize(d3.interpolateViridis, steps_viridis1).map(color => {
const hsl = d3.hsl(color)
hsl.l = lum_steps / 100 // luminosidad global
return hsl.formatHex()
})
swatches(paleta_viridis_luminosa)
// Resolución ejercicio c)
irisProcesado = (
await d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", d3.autoType)
).map(d => ({
longitud_sepalo: d.Sepal_Length,
longitud_petalo: d.Petal_Length,
especie: d.Species,
area_petalo: (d.Petal_Length * d.Petal_Width) / 2
}))
margin = ({top: 20, right: 20, bottom: 30, left: 50});
width = 350;
height = 350;
xScale = d3.scaleLinear()
.domain(d3.extent(irisProcesado, d => d.longitud_sepalo))
.range([margin.left, width - margin.right])
yScale = d3.scaleLinear()
.domain(d3.extent(irisProcesado, d => d.longitud_petalo))
.range([height - margin.bottom, margin.top])
{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
// Escalas de color por especie
const color = d3.scaleOrdinal()
.domain(["setosa", "versicolor", "virginica"])
.range(["#1f77b4", "#2ca02c", "#d62728"]);
// Ejes
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale));
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yScale));
// Etiquetas de ejes
svg.append("text")
.attr("x", width / 2)
.attr("y", height - 5)
.attr("text-anchor", "middle")
.text("longitud_sepalo");
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -height / 2)
.attr("y", 12)
.attr("text-anchor", "middle")
.text("longitud_petalo");
// Puntos del scatterplot
svg.append("g")
.selectAll("circle")
.data(irisProcesado) // irisProcesado es el dataset modificado del ejercicio c
.join("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.8);
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();
}
{
// 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.
