Published
Edited
Apr 22, 2021
{
let height = 900;
let two = new Two({
type: Two.Types.canvas,
width: width,
height: height
});
let scale = d3.scaleLinear()
.domain([0, data.length])
.range([0, 2 * Math.PI]);
let nodes = [];
let links = [];
data.forEach((entry, i) => {
let theta = scale(i);
let r = 200;
entry.x = r * Math.sin(theta);
entry.y = -(r * Math.cos(theta));
entry.r = 10;
entry.textX = (r + 20) * Math.sin(theta);
entry.textY = -((r + 20) * Math.cos(theta));
entry.theta = theta;
nodes.push(entry);
//extract links
links = links.concat(entry.connections.map( (connetion) => {
return {
source: entry,
target: data.find(d => d.name === connetion)
}
}));
});
let group = two.makeGroup();
group.translation.set(width/2, height/2);
links.forEach( link => {
let magicNr = 3.5;
let x1 = link.source.x;
let y1 = link.source.y;
let x2 = link.source.x - link.source.x / magicNr;
let y2 = link.source.y - link.source.y / magicNr;
let x3 = link.target.x - link.target.x / magicNr;
let y3 = link.target.y - link.target.y / magicNr;
let x4 = link.target.x;
let y4 = link.target.y;
let points = [
new Two.Anchor(x1, y1, 0, 0, 0, 0, Two.Commands.move),
new Two.Anchor(x2, y2, 0, 0, 0, 0, Two.Commands.curve),
new Two.Anchor(x3, y3, 0, 0, 0, 0, Two.Commands.curve),
new Two.Anchor(x4, y4, 0, 0, 0, 0, Two.Commands.curve)
];
//points.forEach(p => p.relative = false);
let path = new Two.Path(points);
path.automatic = false;
path.fill = 'none';
path.stroke = 'grey';
path.opacity = 0.3;
path.linewidth = 1;
group.add(path);
});
nodes.forEach( node => {
let circle = two.makeCircle(node.x, node.y, node.r);
circle.stroke = 'grey';
let text = two.makeText(node.name, node.textX, node.textY)
text.fill = 'grey';
if (node.x >= 0) {
text.alignment = 'start';
text.rotation = node.theta - degreesToRadians(90);
} else {
text.alignment = 'end';
text.rotation = node.theta - degreesToRadians(-90);
}
group.add(circle, text);
});
two.update();
return two.renderer.domElement;
}
function degreesToRadians(degrees) {
return degrees * (Math.PI / 180);
}
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.
