How do I make forceatlas2 plugin on CDN based HTML?
See the question and my original answer on StackOverflowHere is a 100%-CDN HTML sample page with latest versions of Sigma + Graphology + Force Atlas 2. Note I'm using javascript modules and import maps, which may not be supported by all browsers:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sigma.js + Graphology.js example</title>
<script type="importmap">
{
"imports": {
"sigma": "https://cdnjs.cloudflare.com/ajax/libs/sigma.js/3.0.0/sigma.min.js",
"graphology": "https://cdn.jsdelivr.net/npm/graphology@0.26.0/dist/graphology.umd.min.js",
"graphologyLibrary": "https://cdn.jsdelivr.net/npm/graphology-library/dist/graphology-library.min.js"
}
}
</script>
</head>
<body style="background: lightgrey">
<div id="container" style="width: 600px; height: 600px; background: white"></div>
<script type="module">
import * as sigma from 'sigma';
import 'graphology'; // has no exports, import all
import 'graphologyLibrary'; // has no exports, import all
// Create a graphology.js graph, use random to init the graph
const graph = new graphology.Graph()
graph.addNode("1", { label: "Node 1", x: Math.random(), y: Math.random(), size: 10, color: "red" });
graph.addNode("2", { label: "Node 2", x: Math.random(), y: Math.random(), size: 15, color: "green" });
graph.addNode("3", { label: "Node 3", x: Math.random(), y: Math.random(), size: 20, color: "blue" });
graph.addEdge("1", "2", { size: 5, color: "purple" });
graph.addEdge("1", "3", { size: 5, color: "purple" });
graph.addEdge("2", "3", { size: 5, color: "purple" });
// Infer settings from graph & assign
const settings = graphologyLibrary.layoutForceAtlas2.inferSettings(graph);
graphologyLibrary.layoutForceAtlas2.assign(graph, {
iterations: 50,
settings: settings
});
// Instantiate sigma.js and render the graph
const s = new Sigma(graph, document.getElementById("container"));
</script>
</body>
</html>