import { select } from "@observablehq/inputs"
// Resolución ejercicio //
datos_iris = (await d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", d => ({
longitud_sepalo: +d.Sepal_Length,
longitud_petalo: +d.Petal_Length,
especie: d.Species,
area_petalo: +d.Petal_Length * +d.Petal_Width /2
})))
const datosFiltrados = datos_iris.filter(d => especiesSeleccionadasArray.includes(d.especie));
tamaño_grafico = 350
x = d3.scaleLinear()
.domain(d3.extent(datos_iris, d => d.longitud_sepalo))
.range([0, tamaño_grafico])
y = d3.scaleLinear()
.domain(d3.extent(datos_iris, d => d.longitud_petalo))
.range([tamaño_grafico, 0])
viewof svg_ejes = {
const svg = d3.create("svg")
.attr("width", tamaño_grafico + 50)
.attr("height", tamaño_grafico + 50);
// Eje X
svg.append("g")
.attr("transform", `translate(30, ${tamaño_grafico + 10})`)
.call(d3.axisBottom(x));
// Eje Y
svg.append("g")
.attr("transform", `translate(30, 10)`)
.call(d3.axisLeft(y));
return svg.node();
}
{
const tamaño_grafico = 350;
const margen = {top: 20, right: 20, bottom: 40, left: 40};
const ancho = tamaño_grafico;
const alto = tamaño_grafico;
const svg = d3.create("svg")
.attr("width", ancho + margen.left + margen.right)
.attr("height", alto + margen.top + margen.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margen.left},${margen.top})`);
// Ejes
g.append("g")
.attr("transform", `translate(0,${alto})`)
.call(d3.axisBottom(x));
g.append("g")
.call(d3.axisLeft(y));
const especiesSeleccionadasArray = especiesSeleccionadas;
const datosFiltrados = datos_iris.filter(d => especiesSeleccionadasArray.includes(d.especie));
// Escala de color para especie
const color = d3.scaleOrdinal()
.domain([...new Set(datosFiltrados.map(d => d.especie))])
.range(d3.schemeCategory10);
// Dibujar los puntos
g.selectAll("circle")
.data(datosFiltrados)
.enter()
.append("circle")
.attr("cx", d => x(d.longitud_sepalo))
.attr("cy", d => y(d[yVar]))
.attr("r", 4)
.attr("fill", d => color(d.especie))
.attr("opacity", 0.7);
return svg.node();
}
viewof especiesSeleccionadas = Inputs.checkbox(
Array.from(new Set(datos_iris.map(d => d.especie))),
{label: "Especies a visualizar", value: ["setosa", "versicolor", "virginica"]}
);
viewof yVar = Inputs.radio([
"longitud_sepalo",
"ancho_sepalo",
"longitud_petalo",
"ancho_petalo"
], {label: "Eje Y", value: "longitud_sepalo"})
viewof xVar = Inputs.radio([
"longitud_sepalo",
"ancho_sepalo",
"longitud_petalo",
"ancho_petalo"
], {label: "Eje X", value: "longitud_sepalo"})
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.
