{
// 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();
}
irisRaw = d3.csv("https://gist.githubusercontent.com/curran/a08a1080b88344b0c8a7/raw/iris.csv", d => ({
Sepal_Length: +d.sepal_length,
Sepal_Width: +d.sepal_width,
Petal_Length: +d.petal_length,
Petal_Width: +d.petal_width,
Species: d.species
}))
import {select} from "@jashkenas/inputs"
viewof selectedSpecies = select({
title: "Especie",
options: Array.from(new Set(irisRaw.map(d => d.Species))),
value: "setosa"
})
viewof xAttr = select({
title: "Eje X",
options: ["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"],
value: "Sepal_Length"
})
viewof yAttr = select({
title: "Eje Y",
options: ["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"],
value: "Petal_Length"
})
irisFiltered = irisRaw.filter(d => d.Species === selectedSpecies)
{
const width = 350;
const height = 350;
const margin = { top: 40, right: 40, bottom: 40, left: 40 };
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const x = d3.scaleLinear()
.domain(d3.extent(irisFiltered, d => d[xAttr]))
.range([0, innerWidth]);
const y = d3.scaleLinear()
.domain(d3.extent(irisFiltered, d => d[yAttr]))
.range([innerHeight, 0]);
g.append("g")
.attr("transform", `translate(0,${innerHeight})`)
.call(d3.axisBottom(x));
g.append("g")
.call(d3.axisLeft(y));
g.selectAll("circle")
.data(irisFiltered)
.enter()
.append("circle")
.attr("cx", d => x(d[xAttr]))
.attr("cy", d => y(d[yAttr]))
.attr("r", 5)
.attr("fill", "#69b3a2")
.attr("opacity", 0.7);
// Etiquetas de ejes
g.append("text")
.attr("x", innerWidth / 2)
.attr("y", innerHeight + 30)
.attr("text-anchor", "middle")
.text(xAttr.replace("_", " "));
g.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -innerHeight / 2)
.attr("y", -30)
.attr("text-anchor", "middle")
.text(yAttr.replace("_", " "));
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.
