iris = d3.csv("https://raw.githubusercontent.com/uiuc-cse/data-fa14/gh-pages/data/iris.csv")
viewof xAttr = html`<select>
<option value="Sepal_Length" selected>Sepal_Length</option>
<option value="Sepal_Width">Sepal_Width</option>
<option value="Petal_Length">Petal_Length</option>
<option value="Petal_Width">Petal_Width</option>
</select>`
viewof yAttr = html`<select>
<option value="Sepal_Length">Sepal_Length</option>
<option value="Sepal_Width" selected>Sepal_Width</option>
<option value="Petal_Length">Petal_Length</option>
<option value="Petal_Width">Petal_Width</option>
</select>`
viewof especie = html`<select>
<option value="setosa" selected>setosa</option>
<option value="versicolor">versicolor</option>
<option value="virginica">virginica</option>
</select>`
scatterplot = {
const svg = d3.create("svg")
.attr("width", 350)
.attr("height", 350)
const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = 350;
const height = 350;
const filteredData = iris.filter(d => d.Species === especie);
const xScale = d3.scaleLinear()
.domain(d3.extent(filteredData, d => +d[xAttr])).nice()
.range([margin.left, width - margin.right]);
const yScale = d3.scaleLinear()
.domain(d3.extent(filteredData, d => +d[yAttr])).nice()
.range([height - margin.bottom, margin.top]);
// Eje X
svg.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(xScale));
// Eje Y
svg.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(yScale));
// Etiquetas de ejes
svg.append("text")
.attr("x", width / 2)
.attr("y", height - 5)
.attr("text-anchor", "middle")
.text(xAttr);
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -height / 2)
.attr("y", 12)
.attr("text-anchor", "middle")
.text(yAttr);
// Puntos
svg.append("g")
.selectAll("circle")
.data(filteredData)
.join("circle")
.attr("cx", d => xScale(+d[xAttr]))
.attr("cy", d => yScale(+d[yAttr]))
.attr("r", 4)
.attr("fill", "#69b3a2")
.attr("opacity", 0.75);
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.
