iris_data_full = await d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/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
}))
viewof campo_x = select({
title: "Campo en eje X",
options: ["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"],
value: "Petal_Width"
})
viewof campo_y = select({
title: "Campo en eje Y",
options: ["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"],
value: "Sepal_Length"
})
viewof especie_seleccionada = select({
title: "Especie",
options: iris_data_full ? [...new Set(iris_data_full.map(d => d.Species))] : [],
value: "setosa"
})
iris_filtrado = iris_data_full.filter(d => d.Species === especie_seleccionada)
x = d3.scaleLinear()
.domain(d3.extent(iris_filtrado, d => d[campo_x])).nice()
.range([0, 300])
y = d3.scaleLinear()
.domain(d3.extent(iris_filtrado, d => d[campo_y])).nice()
.range([300, 0])
grafico_interactivo = {
const width = 350, height = 350;
const margin = { top: 20, right: 20, 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})`);
// Ejes
g.append("g")
.attr("transform", `translate(0,${innerHeight})`)
.call(d3.axisBottom(x));
g.append("g")
.call(d3.axisLeft(y));
// Puntos
g.selectAll("circle")
.data(iris_filtrado)
.enter()
.append("circle")
.attr("cx", d => x(d[campo_x]))
.attr("cy", d => y(d[campo_y]))
.attr("r", 4)
.attr("fill", "#4682b4")
.attr("opacity", 0.7);
// Etiquetas de ejes
g.append("text")
.attr("x", innerWidth / 2)
.attr("y", innerHeight + 35)
.attr("text-anchor", "middle")
.text(campo_x);
g.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -innerHeight / 2)
.attr("y", -30)
.attr("text-anchor", "middle")
.text(campo_y);
return svg.node();
}
import {select} from "@jashkenas/inputs"
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.
