Published
Edited
Apr 15, 2022
Insert cell
Insert cell
Insert cell
Insert cell
nodeRadius = 7
Insert cell
rawData = FileAttachment("e2e-test.json").json()
Insert cell
amGroups = _.groupBy(rawData.nodes, 'workload.namespace', 'unknown-namespace')
Insert cell
amNodes= _.map(rawData.nodes, (n, i) => ({...n, index: i, cluster: _.get(n, 'workload.namespace', 'unknown-namespace'), radius: nodeRadius, x: 0 , y: 0}))
Insert cell
amClusters = _.map(amGroups, (val, key) => ({ radius: 0, cluster: key, id: key, x: Math.random() * 300, y: Math.random()* 300}))
Insert cell
Insert cell
Insert cell
cluster = function(alpha) {
// https://bl.ocks.org/mbostock/7881887
return function (d) {

const cluster = clusters[d.cluster]
if(_.isEmpty(cluster)) {
return
}
let x = d.x - cluster.x,
y = d.y - cluster.y,
l = Math.sqrt(x * x + y * y),
r = d.radius + cluster.radius + 3;
if (l != r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
cluster.x += x;
cluster.y += y;
}
};
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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