Add beeswarm example

vasturiano · Aug 28, 2023 · 09dd7ac · 09dd7ac
1 parent c8d5eff
commit 09dd7ac
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -44,6 +44,7 @@ And check out the [React bindings](https://github.com/vasturiano/react-force-gra
 * [Fix nodes after dragging](https://vasturiano.github.io/force-graph/example/fix-dragged-nodes/) ([source](https://github.com/vasturiano/force-graph/blob/master/example/fix-dragged-nodes/index.html))
 * [Fit graph to canvas](https://vasturiano.github.io/force-graph/example/fit-to-canvas/) ([source](https://github.com/vasturiano/force-graph/blob/master/example/fit-to-canvas/index.html))
 * [Dynamic data changes](https://vasturiano.github.io/force-graph/example/dynamic/) ([source](https://github.com/vasturiano/force-graph/blob/master/example/dynamic/index.html))
+* [Beeswarm chart](https://vasturiano.github.io/force-graph/example/beeswarm/) ([source](https://github.com/vasturiano/force-graph/blob/master/example/beeswarm/index.html))
 * [Node collision detection](https://vasturiano.github.io/force-graph/example/collision-detection/) ([source](https://github.com/vasturiano/force-graph/blob/master/example/collision-detection/index.html))
 * [Emit link particles on demand](https://vasturiano.github.io/force-graph/example/emit-particles/) ([source](https://github.com/vasturiano/force-graph/blob/master/example/emit-particles/index.html))
 * [Force-directed tree (DAG mode)](https://vasturiano.github.io/force-graph/example/tree/) ([source](https://github.com/vasturiano/force-graph/blob/master/example/tree/index.html))

diff --git a/example/beeswarm/index.html b/example/beeswarm/index.html
@@ -0,0 +1,40 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/force-graph"></script>
+  <!--<script src="../../dist/force-graph.js"></script>-->
+
+  <script src="//unpkg.com/d3-quadtree"></script>
+  <script src="//unpkg.com/d3-force"></script>
+</head>
+
+<body>
+  <div id="graph"></div>
+
+  <script>
+    // Random tree
+    const N = 300;
+    const nodes = [...Array(N).keys()].map(i => ({
+      id: i,
+      pos: Math.random()
+    }));
+
+    const Graph = ForceGraph()
+      (document.getElementById('graph'));
+
+    Graph
+      // Deactivate existing forces
+      .d3Force('center', null)
+      .d3Force('charge', null)
+
+      // Add collision and x/y forces
+      .d3Force('collide', d3.forceCollide(Graph.nodeRelSize()))
+      .d3Force('x', d3.forceX(d => (d.pos - 0.5) * window.innerWidth))
+      .d3Force('y', d3.forceY(0).strength(0.2))
+
+      // Add nodes
+      .graphData({ nodes, links: [] });
+
+    setTimeout(() => Graph.zoom(0.99), 1);
+  </script>
+</body>