iris = 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
}))
{
const width = 350;
const height = 350;
const margin = { top: 20, right: 100, bottom: 40, left: 50 };
const especies = [...new Set(iris.map(d => d.Species))];
const color = d3.scaleOrdinal()
.domain(especies)
.range(d3.schemeSet1);
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("font-family", "sans-serif");
const plot = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// Escalas dinámicas
const escalaX = d3.scaleLinear()
.domain(d3.extent(iris, d => +d[campo_x])).nice()
.range([0, width]);
const escalaY = d3.scaleLinear()
.domain(d3.extent(iris, d => +d[campo_y])).nice()
.range([height, 0]);
// Ejes
plot.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(escalaX));
plot.append("g")
.call(d3.axisLeft(escalaY));
// Etiquetas de ejes
plot.append("text")
.attr("x", width / 2)
.attr("y", height + 30)
.attr("text-anchor", "middle")
.attr("font-size", 12)
.text(campo_x);
plot.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -height / 2)
.attr("y", -40)
.attr("text-anchor", "middle")
.attr("font-size", 12)
.text(campo_y);
// Puntos
plot.selectAll("circle")
.data(iris)
.join("circle")
.attr("cx", d => escalaX(d[campo_x]))
.attr("cy", d => escalaY(d[campo_y]))
.attr("r", 4)
.attr("fill", d => color(d.Species))
.attr("opacity", 0.8);
// Leyenda
const legend = svg.append("g")
.attr("transform", `translate(${width + margin.left + 10}, ${margin.top})`);
especies.forEach((especie, i) => {
const g = legend.append("g").attr("transform", `translate(0, ${i * 20})`);
g.append("rect")
.attr("width", 12)
.attr("height", 12)
.attr("fill", color(especie));
g.append("text")
.attr("x", 16)
.attr("y", 10)
.attr("font-size", 11)
.text(especie);
});
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.
