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)
viewof color_steps_blue = slider({
min: 0,
max: 30,
step: 1,
value: 10,
title: "Cantidad de azules",
description: "Control para la cantidad de colores a visualizar en la paleta."
})
viewof color_steps_brown = slider({
min: 0,
max: 30,
step: 1,
value: 10,
title: "Cantidad de marrones",
description: "Control para la cantidad de colores a visualizar en la paleta."
})
viewof color_steps_bro = slider({
min: 0,
max: 30,
step: 1,
value: 3,
title: "Cantidad de colores",
description: "Control para la cantidad de colores a visualizar en la paleta."
})
azul = {
var cantidad_de_colores = color_steps_blue;
var interpolator = d3.interpolate("#000080", "#ADD8E6")
var coleccion = d3.quantize(interpolator, cantidad_de_colores)
return coleccion;
}
marron = {
var cantidad_de_colores = color_steps_brown;
var interpolator = d3.interpolate("#FFFDD0", "#964B00")
var coleccion = d3.quantize(interpolator, cantidad_de_colores)
return coleccion;
}
bro = {
var cantidad_de_colores = color_steps_bro;
var interpolator = d3.interpolateRgbBasis(["black", "red", "orange"])
var coleccion = d3.quantize(interpolator, cantidad_de_colores)
return coleccion;
}
swatches(azul)
swatches(marron)
swatches(bro)
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)
// Resolución ejercicio c)
iris = d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", d3.autoType).then(data => {
const modified = data.map(row => {
const { Sepal_Length, Sepal_Width, Petal_Length, Petal_Width, Species } = row;
return {
longitud_sepalo: Sepal_Length,
longitud_petalo: Petal_Length,
especie: Species,
area_petalo: Petal_Length*Petal_Width/2,
};
});
return modified;
});
// Resolución ejercicio d)
x = d3.scaleLinear()
.domain([0, d3.max(iris, d => d.longitud_sepalo)])
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, d3.max(iris, d => d.longitud_petalo)])
.range([margin.top, height - margin.bottom])
width = 350;
height = 350;
margin = ({ top: 20, right: 0, bottom: 0, left: 30 });
color = d3.scaleOrdinal()
.domain([...new Set(iris.map(d => d.especie))])
.range(bro);
{
// 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);
// 2. Funciones para los ejes
var xAxis = function (g) {
return g.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x))
}
var yAxis = function (g) {
return g.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))}
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
// 3. Dibujamos los circulos
svg.append("g")
.attr("fill", "blue")
.selectAll("circle")
.data(iris)
.enter()
.append("circle")
.attr("cx", d => x(d.longitud_sepalo) )
.attr("cy", d => y(d.longitud_petalo) )
.attr("r" , 2 )
.style("fill", d => color(d.especie));
// n. Retornamos el canvas.
return svg.node();
}
color2 = d3.scaleSequential()
.domain(d3.extent(iris, d => d.area_petalo))
.interpolator(d3.interpolateHslLong("red", "blue"));
radius = d3.scaleSqrt()
.domain(d3.extent(iris, d => d.area_petalo))
.range([1, 5]);
{
// 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);
// 2. Funciones para los ejes
var xAxis = function (g) {
return g.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x))
}
var yAxis = function (g) {
return g.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))}
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
// 3. Dibujamos los circulos
svg.append("g")
.attr("fill", "blue")
.selectAll("circle")
.data(iris)
.enter()
.append("circle")
.attr("cx", d => x(d.longitud_sepalo) )
.attr("cy", d => y(d.longitud_petalo) )
.attr("r" , d => radius(d.area_petalo) )
.style("fill", d => color2(d.area_petalo));
// 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.
