data = 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 ejeX = Inputs.select(["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"], {
label: "Variable eje X", value: "Sepal_Length"
})
viewof ejeY = Inputs.select(["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"], {
label: "Variable eje Y", value: "Petal_Length"
})
viewof especieSeleccionada = Inputs.select(
[...new Set(data.map(d => d.Species))],
{label: "Especie", value: "setosa"}
)
{
const width = 350;
const height = 350;
const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const dataFiltrada = data.filter(d => d.Species === especieSeleccionada);
const x = d3.scaleLinear()
.domain(d3.extent(dataFiltrada, d => d[ejeX])).nice()
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain(d3.extent(dataFiltrada, d => d[ejeY])).nice()
.range([height - margin.bottom, margin.top]);
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
// Eje X
svg.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(x))
.append("text")
.attr("x", width - 60)
.attr("y", -6)
.attr("fill", "black")
.attr("text-anchor", "end")
.text(ejeX);
// Eje Y
svg.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -margin.top)
.attr("y", 15)
.attr("fill", "black")
.attr("text-anchor", "end")
.text(ejeY);
// Puntos
svg.selectAll("circle")
.data(dataFiltrada)
.enter()
.append("circle")
.attr("cx", d => x(d[ejeX]))
.attr("cy", d => y(d[ejeY]))
.attr("r", 4)
.attr("fill", "#9467bd")
.attr("opacity", 0.8);
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.
