Public
Edited
Apr 25
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
//Draw points
features = Object.keys(data[0]).filter(key => key !== 'class');
Insert cell
{
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])
})
})
}
Insert cell
escala = d3.scalePoint().domain(data.columns).range([0,2*Math.PI]);
Insert cell
anchor_ponints ={
const a = [];
features.map(d=>{a.push({'name':d,'x':Math.cos(escala(d)),'y':Math.sin(escala(d))})});
return a;
}
Insert cell
espacio = 400
Insert cell
{
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]);

d['x']=d3.sum(Xs)/suma;
d['y']=d3.sum(Ys)/suma;
})
}
Insert cell
color =d3.scaleOrdinal(d3.schemeTableau10)
.domain([...new Set(data.map(d => d.class))]);
Insert cell
{
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',5).attr('fill',d=>color(d.class)).attr('stroke','white');
return svg.node();
}
Insert cell
Insert cell
//your code
Insert cell
Insert cell
// Your Code
Insert cell
Insert cell
Insert cell

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.
Learn more