import {select} from "@jashkenas/inputs"
url = "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv"
data2 = await d3.csv(url, 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 xVar = select({
title: "Eje X",
options: ["Sepal_Length","Sepal_Width","Petal_Length","Petal_Width"],
value: "Sepal_Length"
})
viewof yVar = select({
title: "Eje Y",
options: ["Sepal_Length","Sepal_Width","Petal_Length","Petal_Width"],
value: "Petal_Length"
})
viewof selectedSpecies = select({
title: "Especie",
options: Array.from(new Set(data2.map(d => d.Species))),
value: "setosa"
})
filtered = data2.filter(d => d.Species === selectedSpecies)
width = 350
height = 350
margin = Object.freeze({ top: 20, right: 20, bottom: 60, left: 60 })
xScale = d3.scaleLinear()
.domain(d3.extent(filtered, d => d[xVar])).nice()
.range([0, width])
yScale = d3.scaleLinear()
.domain(d3.extent(filtered, d => d[yVar])).nice()
.range([height, 0])
color2 = d3.scaleOrdinal()
.domain(Array.from(new Set(data2.map(d => d.Species))))
.range(d3.schemeCategory10)
chartInteractive = {
const width = 350,
height = 350;
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// Ejes
g.append("g").call(d3.axisLeft(yScale));
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(xScale));
// Puntos
g.selectAll("circle")
.data(filtered)
.join("circle")
.attr("cx", d => xScale(d[xVar]))
.attr("cy", d => yScale(d[yVar]))
.attr("r", 4)
.attr("fill", d => color2(d.Species))
.attr("opacity", 0.8);
// Etiqueta X dentro de g, justo debajo del eje
g.append("text")
.attr("x", width / 2)
.attr("y", height + 35) // 35 = un poco más que margin.bottom
.attr("text-anchor", "middle")
.text(xVar.replace(/_/g," "));
// Etiqueta Y dentro de g, girada 90° a la izquierda
g.append("text")
.attr("transform", `translate(${-40},${height/2}) rotate(-90)`)
.attr("text-anchor", "middle")
.text(yVar.replace(/_/g," "));
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.
