Public
Edited
Jun 19, 2022
5 forks
61 stars
Word Tour: 40k words and their friendsHello, orbHello, cosmographFour-color world map with ClingoUnconnected Delaunay NeighborsColorized Manhattan Spanning TreeShortest pathDijkstra’s algorithm in gpu.jsLloyd’s relaxation on a graphManhattan Voronoi IIManhattan DiameterManhattan VoronoiGraph VoronoiMobility landscapes — an introductionDijkstra’s shortest-path treeWorld Cities UrquhartProtein MatrixConvex Spectral WeightsDelaunay.findTriangleForce Simulation Web WorkerSave a Force-Directed Graph to localStorageHello BiofabricTravelling with a self-organizing mapLevenshtein transitionngraph: pagerank, louvain…
3D graph on a sphere
Also listed in…
3D
{
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.
