iris_raw = await d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv")
viewof x_col = Inputs.select(["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"], {
label: "Variable en eje X",
value: "Sepal_Length"
})
viewof y_col = Inputs.select(["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"], {
label: "Variable en eje Y",
value: "Petal_Length"
})
viewof especie_filtro = Inputs.select([...new Set(iris_raw.map(d => d.Species))], {
label: "Especie",
value: "setosa"
})
{
const width = 350;
const height = 350;
const margin = {top: 20, right: 20, bottom: 40, left: 50};
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const data_filtrada = iris_raw.filter(d => d.Species === especie_filtro);
const xScale = d3.scaleLinear()
.domain(d3.extent(data_filtrada, d => +d[x_col]))
.range([0, innerWidth]);
const yScale = d3.scaleLinear()
.domain(d3.extent(data_filtrada, d => +d[y_col]))
.range([innerHeight, 0]);
// Eje X
g.append("g")
.attr("transform", `translate(0,${innerHeight})`)
.call(d3.axisBottom(xScale));
// Etiqueta eje X
svg.append("text")
.attr("x", margin.left + innerWidth / 2)
.attr("y", height - 5)
.attr("text-anchor", "middle")
.style("font-size", "11px")
.text(x_col);
// Eje Y
g.append("g")
.call(d3.axisLeft(yScale));
// Etiqueta eje Y
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -margin.top - innerHeight / 2)
.attr("y", 12)
.attr("text-anchor", "middle")
.style("font-size", "11px")
.text(y_col);
// Puntos
g.selectAll("circle")
.data(data_filtrada)
.join("circle")
.attr("cx", d => xScale(+d[x_col]))
.attr("cy", d => yScale(+d[y_col]))
.attr("r", 4)
.attr("fill", "#4682b4")
.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.
