data = d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv")
{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
// Ejes
svg.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(x));
svg.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y));
// Etiquetas de los ejes
svg.append("text")
.attr("x", width / 2)
.attr("y", height - 5)
.attr("font-size", "8px")
.attr("text-anchor", "middle")
.text(ejeX);
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -height / 2)
.attr("y", 15)
.attr("font-size", "8px")
.attr("text-anchor", "middle")
.text(EjeY);
// Filtrar los datos por la especie seleccionada
const datosFiltrados = data.filter(d => d.Species === especieSeleccionada);
// Puntos
svg.selectAll("circle")
.data(datosFiltrados)
.join("circle")
.attr("cx", d => x(d[ejeX]))
.attr("cy", d => y(d[EjeY]))
.attr("r", 4)
.attr("fill", "green")
.attr("opacity", 0.7);
// Título
svg.append("text")
.attr("x", width / 2)
.attr("y", margin.top - 10)
.attr("text-anchor", "middle")
.attr("font-size", "10px")
.text(`${ejeX} vs. ${EjeY} (Especie: ${especieSeleccionada})`);
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.
