//Draw points
features = data.columns.filter(d=>d!='class')
{
const extents = features.map(d=>{
return d3.extent(data.map(e=>e[d]))
})
data.map(d=>{
features.map((e,j)=>{
d[e]=(d[e]-extents[j][0])/(extents[j][1]-extents[j][0])
})
})
}
escala = d3.scalePoint().domain(data.columns).range([0,2*Math.PI]);
anchor_ponints ={
const a = [];
features.map(d=>{a.push({'name':d,'x':Math.cos(escala(d)),'y':Math.sin(escala(d))})});
return a;
}
{
data.map((d, i) => {
let valores = features.map(e => d[e]);
let suma = d3.sum(valores);
let xs = anchor_ponints.map((e, j) => e.x * valores[j]);
let ys = anchor_ponints.map((e, j) => e.y * valores[j]);
let x = d3.sum(xs) / suma;
let y = d3.sum(ys) / suma;
d.x = x;
d.y = y;
});
}
espacio = 400
color = d3.scaleOrdinal(d3.schemeTableau10)
.domain(Array.from(new Set(data.map(d=>d.class))))
{
const radio = espacio/2-50;
const svg = d3.create('svg').attr('width',espacio).attr('height',espacio);
const g = svg.append("g").attr("transform",`translate(${espacio/2},${espacio/2})`);
g.append("circle").attr('cx',0).attr('cy',0).attr('r',radio).attr('fill','none').attr('stroke','gray');
g.selectAll('.axis').data(anchor_ponints).join('circle').attr('cx',d=>radio*d.x).attr('cy',d=>radio*d.y).attr('fill','red').attr('r',10);
const gdots = svg.append("g").attr("transform",`translate(${espacio/2},${espacio/2})`);
gdots.selectAll('.dots').data(data).join('circle').attr('cx',d=>radio*d.x).attr('cy',d=>radio*d.y).attr('r',3).attr('fill',d=>color(d.class)).attr('stroke','white');
return svg.node();
}
// Your Code
d3 = require("d3@7")
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.
