iris_data= d3.csv("https://raw.githubusercontent.com/uiuc-cse/data-fa14/gh-pages/data/iris.csv", d3.autoType)
import {select} from "@jashkenas/inputs"
viewof x_var = select({
title: "Eje X",
options: ["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"],
value: "Sepal_Length"
})
viewof y_var = select({
title: "Eje Y",
options: ["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"],
value: "Petal_Length"
})
viewof selected_species = select({
title: "Especie",
options: [...new Set(iris_data.map(d => d.Species))],
value: "setosa"
})
iris_filtered = iris_data.filter(d => d.Species === selected_species)
{
const width = 350;
const height = 350;
const margin = { top: 10, right: 10, bottom: 40, left: 40 };
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const g = 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(iris_filtered, d => d[x_var]))
.range([0, innerWidth]);
const y = d3.scaleLinear()
.domain(d3.extent(iris_filtered, d => d[y_var]))
.range([innerHeight, 0]);
g.append("g")
.attr("transform", `translate(0,${innerHeight})`)
.call(d3.axisBottom(x));
g.append("g")
.call(d3.axisLeft(y));
g.selectAll("circle")
.data(iris_filtered)
.join("circle")
.attr("cx", d => x(d[x_var]))
.attr("cy", d => y(d[y_var]))
.attr("r", 4)
.attr("fill", "#1f77b4");
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.
