iris= d3.csvParse(await FileAttachment("iris.csv").text(), d3.autoType)
margin = ({top: 25, right: 50, bottom: 50, left: 50})
height = 350
width = 350
// Resolución ejercicio d)
x = d3.scaleLinear() // Escala lineal
.domain([0, d3.max(iris, function(d){return d[ddx]})]) // requiere un dominio 0 -> max(cantidad)
.range([margin.left, width-margin.right])
y = d3.scaleLinear() // Escala lineal
.domain([0, d3.max(iris, function(d){return d[ddy]})])// requiere un dominio 0 -> max(cantidad)
.range([height-margin.bottom, margin.top])
xAxis = function (g) { return g.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))}
yAxis = function (g) { return g.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))}
colores = function(d){
const pal = d3.schemeCategory10
if (d.Species == "virginica")
return pal[0]
else if (d.Species == "setosa")
return pal[1]
else
return pal[2]}
viewof ddx = select({
title: "Eje X",
// description: "Please pick your favorite stooge.",
options: ["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"],
value: "Petal_Width"
})
viewof ddy = select({
title: "Eje Y",
// description: "Please pick your favorite stooge.",
options: ["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"],
value: "Petal_Length"
})
{
// 1. Creación de un área de dibujo (350x350 pixeles).
// Si lo consideran necesario, pueden modificar el tamaño del canvas.
// También es posible que necesiten más de una celda para resolverlo.
const svg = d3.create("svg")
.attr("width",350)
.attr("height",350);
// 2. Dibujamos eje x
svg.append("g")
.call(xAxis);
// 3. Dibujamos eje y
svg.append("g")
.call(yAxis);
// Add X axis label:
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width/2 + margin.left)
.attr("y", height - margin.top + 15)
.text(ddx);
// Y axis label:
svg.append("text")
.attr("class","y label")
.attr("text-anchor", "end")
.attr("transform", "rotate(-90)")
.attr("y", margin.left - 35)
.attr("x", -height/2 + margin.bottom + 25)
.text(ddy);
// 4. Agrego los puntos
svg.selectAll("circle") // Esta selección da vacio
.data(iris) // Estos son los datos
.enter() // Para cada entrada
.append("circle")
.attr("cx", function(d) {return x(d[ddx]);} )
.attr("cy", function(d) {return y(d[ddy]);} )
.attr("r" , 3)
.style("fill", d => colores(d));
// n. Retornamos el canvas.
return svg.node();
}
import {legend} from "@d3/color-legend"
import {select} from "@jashkenas/inputs"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.