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 npal1 = 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."
})
swatches(d3.quantize(d3.interpolateHsvLong("#FC5656", "#9903B0"), Math.floor(npal1/2)))
viewof npal2 = 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."
})
swatches(d3.quantize(d3.interpolateHsl("#362142", "#F7C53B"), npal2))
swatches(d3.quantize(d3.interpolateHsv("#F4E4DD", "#775004"), npal3))
swatches(d3.quantize(d3.interpolateHcl("#03067D", "#BBF1FF"), npal4))
swatches(d3.quantize(d3.interpolateHcl(darken("#03067D"), darken("#BBF1FF")), npal4))
// Resolución ejercicio b)
function darken(color, k = lum_steps) {
const {l, c, h} = d3.lch(color);
return d3.lch(l - 18 * k/100, c, h);
}
// Resolución ejercicio c)
iris= d3.csvParse(await FileAttachment("iris.csv").text(), formato)
formato = function(d){
return {
"longitud_sepalo": d.Sepal_Length/1,
"longitud_petalo": d.Petal_Length/1,
"especie": d.Species,
"area_petalo": (d.Petal_Length*d.Petal_Width)/2}}
// Resolución ejercicio d)
x = d3.scaleLinear() // Escala lineal
.domain([d3.min(iris, function(d) {return d.longitud_sepalo}), d3.max(iris, function(d) {return d.longitud_sepalo})])// requiere un dominio 0 -> max(cantidad)
.range([margin.left, width-margin.right])
y = d3.scaleLinear() // Escala lineal
.domain([d3.min(iris, function(d) {return d.longitud_petalo}), d3.max(iris, function(d) {return d.longitud_petalo})])// requiere un dominio 0 -> max(cantidad)
.range([height-margin.bottom, margin.top])
width = 350
height = 350
margin = ({top: 25, right: 50, bottom: 50, left: 50})
xAxis = function (g) { return g.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))}
yAxis = function (g) { return g.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))}
d3.schemeCategory10
colores = function(d){
const pal = d3.schemeCategory10
if (d.especie == "virginica")
return pal[0]
else if (d.especie == "setosa")
return pal[1]
else
return pal[2]}
{
// 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);
// 2. Dibujamos eje x
svg.append("g")
.call(xAxis);
// 3. Dibujamos eje y
svg.append("g")
.call(yAxis);
// Add X axis label:
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width/2 + margin.left)
.attr("y", height - margin.top + 15)
.text("Longitud Sépalo");
// Y axis label:
svg.append("text")
.attr("class","y label")
.attr("text-anchor", "end")
.attr("transform", "rotate(-90)")
.attr("y", margin.left - 35)
.attr("x", -height/2 + margin.bottom + 25)
.text("Longitud Pétalo");
// 4. Agrego los puntos
svg.selectAll("circle") // Esta selección da vacio
.data(iris) // Estos son los datos
.enter() // Para cada entrada
.append("circle")
.attr("cx", function(d) {return x(d.longitud_sepalo);} )
.attr("cy", function(d) {return y(d.longitud_petalo);} )
.attr("r" , 3)
.style("fill", d => colores(d));
// n. Retornamos el canvas.
return svg.node();
}
color_area(1)
color_area = d3.scaleSequential() // Escala secuencial en d3
.domain([0, d3.max(iris, d => d.area_petalo)]) // Rango: 0->max(cantidad)
.interpolator(d3.interpolateViridis)
legend({color: color_area,
title: "Área del pétalo",
tickFormat: ".1f",
ticks: 6})
import {legend} from "@d3/color-legend"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.