data = await 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 x_variable = Inputs.select(
["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"],
{label: "Eje X", value: "Sepal_Length"}
)
viewof y_variable = Inputs.select(
["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"],
{label: "Eje Y", value: "Petal_Length"}
)
viewof especie = Inputs.select(
[...new Set(data.map(d => d.Species))],
{label: "Especie", value: "setosa"}
)
data_new = data.filter(d => d.Species === especie)
{
const width = 350;
const height = 350;
const margin = {top: 20, right: 20, bottom: 40, left: 40};
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const plotArea = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const x = d3.scaleLinear()
.domain(d3.extent(data_new, d => d[x_variable]))
.range([0, innerWidth]);
const y = d3.scaleLinear()
.domain(d3.extent(data_new, d => d[y_variable]))
.range([innerHeight, 0]);
plotArea.selectAll("circle")
.data(data_new)
.enter()
.append("circle")
.attr("cx", d => x(d[x_variable]))
.attr("cy", d => y(d[y_variable]))
.attr("r", 4)
.attr("fill", "steelblue")
.attr("opacity", 0.8);
plotArea.append("g")
.attr("transform", `translate(0,${innerHeight})`)
.call(d3.axisBottom(x));
plotArea.append("g")
.call(d3.axisLeft(y));
// n. Retornamos el canvas.
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.
