data = d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv",d3.autoType)
y = d3.scaleLinear().domain([0, d3.max(data, d => d[campo_y])]).range([shape.height - margin.bottom, margin.top])
x = d3.scaleLinear().domain([0, d3.max(data, d => d[campo_x])]).range([margin.right,shape.width - margin.left])
xAxis = function (g){
return g.attr("transform", `translate(0,${shape.height - margin.bottom})`)
.call(d3.axisBottom(x))
}
yAxis = function (g){
return g.attr("transform", `translate(${margin.right},0)`)
.call(d3.axisLeft(y))
}
{
// 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).attr("viewBox", [0, 0, shape.width, shape.height]);
// 2. Dibujamos eje x
svg.append("g").call(xAxis) // Llamada a la función que sabe dibujar el eje x
// 3. Dibujamos eje y
svg.append("g").call(yAxis); // Llamada a la función que sabe dibujar el eje y
// Eje x
svg.append("text").attr("x", shape.width-200).attr("y", shape.height-20).text(campo_x)
// Eje y
svg.append("text").attr("x", shape.width-500).attr("y", shape.height-270).text(campo_y)
.attr("transform", "rotate(-90)" )
svg.append("g")
.selectAll("dot")
.data(data)
.join("circle")
.attr("cx", d => x(d[campo_x]))
.attr("cy", d => y(d[campo_y]))
.attr("fill", "red")
.attr("r",1.5)
// n. Retornamos el canvas.
return svg.node();
}
d3.max(data, d => d.campo_x)
import {select} from "@jashkenas/inputs"
margin = ({top: 10, right: 60, bottom: 60, left: 20});
shape = ({height:300,width:300})
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.
