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)
swatches(["coral", "yellow", "green", "blue", "purple"])
html`<div style="display: flex;">${d3.quantize(d3.interpolateHcl("#fafa6e", "#ff3399"), 10).map(color =>
html`<div style="width: 30px; height: 30px; background: ${color};"></div>`
)}</div>`
html`<div style="display: flex;">${d3.quantize(d3.interpolateHcl("#fafa6e", "#2A4858"), 10).map(color =>
html`<div style="width: 30px; height: 30px; background: ${color};"></div>`
)}</div>`
swatches(d3.quantize(d3.interpolateHcl("#4b0082", "#dab6ff"), 10))
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)
html`<div style="display: flex;">
${d3.quantize(d3.interpolateHcl("#fafa6e", "#ff3399"), 10).map(c => {
let hcl = d3.hcl(c);
hcl.l = lum_steps;
return html`<div style="width: 30px; height: 30px; background: ${hcl.formatHex()};"></div>`;
})}
</div>`
// Resolución ejercicio c)
data = 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
};
})
// Resolución ejercicio d)
width = 350
height = 350
margin = ({ top: 20, right: 20, bottom: 20, left: 30 })
x = d3.scaleLinear()
.domain([0, d3.max(data, d => d.longitud_sepalo)])
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.longitud_petalo)])
.range([height - margin.bottom, margin.top])
{
// 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", width)
.attr("height", height);
// Eje X (abajo)
svg.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(x));
// Eje Y (izquierda)
svg.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y));
// Escala de color
const color = d3.scaleOrdinal()
.domain(["setosa", "versicolor", "virginica"])
.range(["#1f77b4", "#ff7f0e", "#2ca02c"]);
// Dibujar puntos
svg.selectAll("circle")
.data(data)
.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))
.attr("opacity", 0.8);
// n. Retornamos el canvas.
return svg.node();
}
{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
// Escala de color basada en el área del pétalo
const color = d3.scaleSequential(d3.interpolateViridis)
.domain(d3.extent(data, d => d.area_petalo));
// Escala de radio (rango razonable de tamaños)
const radius = d3.scaleSqrt()
.domain(d3.extent(data, d => d.area_petalo))
.range([2, 10]);
// Ejes
svg.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(x));
svg.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y));
// Puntos
svg.selectAll("circle")
.data(data)
.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);
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.
