function format_data(data) {
return{
longitud_sepalo : +data.Sepal_Length,
longitud_petalo : +data.Petal_Length,
ancho_sepalo: +data.Sepal_Width,
ancho_petalo: +data.Petal_Width,
especie : data.Species,
}
}
iris = d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv",format_data)
heigth = 350
width = 350
margin = ({top:40, left:40, down:40, right:40})
import {select} from "@jashkenas/inputs"
viewof varx = select({
description: "selecciona variable para el eje x",
options: ["longitud_petalo", "longitud_sepalo", "ancho_petalo", "ancho_sepalo"],
multiple: false
})
viewof vary = select({
description: "Selecciona variable para el eje y",
options: ["longitud_petalo", "longitud_sepalo", "ancho_petalo", "ancho_sepalo"],
multiple: false
})
species = ["setosa","versicolor","virginica"]
viewof spec = select({
description: "Selecciona especie",
options: species,
multiple: false
})
species_iris = iris.filter(d => d.especie == spec)
dom_sepalo = d3.extent(iris,d => d.longitud_sepalo)
function pickx(d){
if (varx == "longitud_sepalo"){
return d.longitud_sepalo
}
else{
if (varx=="longitud_petalo"){
return d.longitud_petalo
}
else{
if (varx=='ancho_sepalo'){
return d.ancho_sepalo
}
else{
return d.ancho_petalo
}
}
}
}
domx = d3.extent(species_iris, d => pickx(d))
function picky(d){
if (vary == "longitud_sepalo"){
return d.longitud_sepalo
}
else{
if (vary=="longitud_petalo"){
return d.longitud_petalo
}
else{
if (vary=='ancho_sepalo'){
return d.ancho_sepalo
}
else{
return d.ancho_petalo
}
}
}
}
domy = d3.extent(species_iris, d => picky(d))
ranx = [margin.left, width-margin.right]
rany = [heigth-margin.down, margin.top]
x = d3.scaleLinear().
domain(domx).
range(ranx)
y = d3.scaleLinear().
domain(domy).
range(rany)
{
// 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",width)
.attr("height",heigth);
d3.axisBottom(x)(svg.append('g').attr("transform", `translate(0,${heigth-margin.down})`));
d3.axisLeft(y)(svg.append('g').attr("transform", `translate(${margin.left},0)`));
svg.append("g")
.selectAll("circle")
.data(species_iris)
.join("circle")
.attr("cx",d => x(pickx(d)))
.attr("cy", d => y(picky(d)))
.attr("r",5)
.attr("fill", 'red');
svg.append("text")
.attr("text-anchor", "middle")
.attr("x", width - 170)
.attr("y", heigth - 5)
.text(varx);
svg.append("text")
.attr("text-anchor", "end")
.attr("transform", "rotate(-90)")
.attr("x", -120)
.attr("y", 12)
.text(vary)
svg.append("text")
.attr("text-anchor", "middle")
.attr("x", width - 170)
.attr("y", 20)
.text("Especie: " + spec);
// n. Retornamos el canvas.
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.
