Public
Edited
Apr 18
Insert cell
Insert cell
Insert cell
iris_data = d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", function(d) {

return {
longitud_sepalo: d.Sepal_Length, // Sepal_Length
longitud_petalo: d.Petal_Length, // Petal_Length
especie: d.Species, // Species
area_petalo: (d.Petal_Length * d.Sepal_Length) / 2
// No incluimos las columnas faltantes
}
})
Insert cell
margin = ({top: 20, right: 30, bottom: 30, left: 40})
Insert cell
height = 350
Insert cell
width = 350
Insert cell
x = d3.scaleLinear()
.domain([0, d3.max(iris_data, d => d.longitud_sepalo)])
.range([height - margin.bottom,margin.top])
Insert cell
y = d3.scaleLinear()
.domain([0, d3.max(iris_data, d => d.longitud_petalo )])
.range([height - margin.bottom,margin.top])
Insert cell
color = d3.scaleOrdinal()
.domain(iris_data.map(d => d.especie))
.range(["#e41a1c", "#377eb8", "#4daf4a"]);
Insert cell
// Importar controles de entrada
import {select} from "@jashkenas/inputs";
Insert cell
viewof selectX = select({
title: "Eje X",
options: ["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"],
value: "Sepal_Length"
});

Insert cell
viewof selectY = select({
title: "Eje Y",
options: ["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"],
value: "Petal_Length"
});
Insert cell
viewof selectSpecies = select({
title: "Especie",
options: [...new Set(iris_data.map(d => d.Species))],
value: "All Species"
});
Insert cell
{
{

function updateScatterChart(selectedX, selectedY, species) {
const svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("max-width", "80%")
.style("height", "auto")
.style("height", "intrinsic");

// Filtrar datos por especie si no se selecciona "All Species"
const filteredData = iris_data.filter(d => species === "All Species" || d.Species === species);

// Actualizar dominios de escalas según selección
x.domain([0, d3.max(filteredData, d => d[selectedX])]);
y.domain([0, d3.max(filteredData, d => d[selectedY])]);

// Actualizar los puntos en el gráfico
const circles = svg.select("g.points")
.selectAll("circle")
.data(filteredData, d => d.id);

circles.enter()
.append("circle")
.merge(circles)
.attr("cx", d => x(d[selectedX]))
.attr("cy", d => y(d[selectedY]))
.attr("r", 5)
.style("fill", d => color(d.Species));

circles.exit().remove();

// Actualizar los ejes
svg.select("g.x-axis").call(d3.axisBottom(x));
svg.select("g.y-axis").call(d3.axisLeft(y));
}

// Inicializar el SVG una vez
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom]);

svg.append("g").attr("class", "x-axis")
.attr("transform", `translate(0,${height - margin.bottom})`);

svg.append("g").attr("class", "y-axis")
.attr("transform", `translate(${margin.left},0)`);

svg.append("g").attr("class", "points");

return svg.node();

}

// Usa reactividad para actualizar el gráfico
updateScatterChart(selectX.value, selectY.value, selectSpecies.value);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more