Public
Edited
Jun 19, 2022
5 forks
61 stars
{
const el = html`<div style="width: 100%; height: 600px;"></div>`;
yield el;
ForceGraph3D()(el)
.height(600)
.linkWidth(4)
.linkOpacity(0.5)
.graphData(gData)
.d3Force("radius", forceRadius(gData.nodes, 320));
}
gData = {
// Random tree
const N = 300;
return {
nodes: [...Array(N).keys()].map((i) => ({ id: i })),
links: [...Array(N).keys()]
.filter((id) => id)
.map((id) => ({
source: id,
target: Math.round(Math.random() * (id - 1))
}))
};
}
function forceRadius(nodes, R = 1) {
return () => {
for (const n of nodes) {
const r = Math.hypot(n.x, n.y, n.z);
const u = Math.pow(r ? Math.sqrt(R / r) : 1, 0.05);
n.x *= u;
n.y *= u;
n.z *= u;
}
};
}
ForceGraph3D = require("3d-force-graph")
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.
