// Resolución
scatterplot_campos = {
// Canvas
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// Dibujamos eje x
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x_iris))
// Dibujamos eje y
svg.append("g")
.attr ("transform",`translate(${margin.left},0)`)
.call(d3.axisLeft(y_iris));
//etiqueta eje x
svg.append("text")
.attr("x", width / 2)
.attr("y", height - 5)
.attr("text-anchor", "middle")
.style("font", "10px sans-serif")
.text(campo_x);
// etiqueta eje Y
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -height / 2)
.attr("y", 12)
.attr("text-anchor", "middle")
.style("font", "10px sans-serif")
.text(campo_y);
// Escala de color para las especies
const color = d3.scaleOrdinal()
.domain(["setosa", "versicolor", "virginica"])
.range(["#1f77b4", "#ff7f0e", "#2ca02c"]);
svg.append("g")
.selectAll("circle")
.data(iris)
.join("circle")
.attr("cx", d => x_iris(d[campo_x]))
.attr("cy", d => y_iris(d[campo_y]))
.attr("r", 2)
.attr("fill", d => color (d.Species));
return svg.node();
}
{
// 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);
// Un cuadro de texto.
svg.append("text")
.attr("x", 110)
.attr("y", 175)
.text("Área de dibujo vacía");
// n. Retornamos el canvas.
return svg.node();
}
import {select} from "@jashkenas/inputs"
margin = ({top: 20, right: 30, bottom: 30, left: 40}) // Cambiá estos valores para ver el efecto
height=350
width=350
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.
