vasturiano · April 22, 2021 23:29 · Apr 22, 2021 · Mar 12, 2018 · Jan 9, 2018 · Jan 7, 2018
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
   <script src="//unpkg.com/3d-force-graph@1"></script>
 
   <script src="//unpkg.com/d3-octree"></script>
-  <script src="//unpkg.com/d3-force-3d@1"></script>
+  <script src="//unpkg.com/d3-force-3d"></script>
 </head>
 
 <body>

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/index.html b/index.html
@@ -22,6 +22,7 @@
       .d3Force('collide', d3.forceCollide(16))
       .nodeRelSize(8)
       .nodeColor(d => d.type === 'a' ? 'brown' : 'steelblue')
+      .enableNodeDrag(false)
       .graphData({ nodes, links: [] })
       (document.getElementById('3d-graph'));
   </script>

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/index.html b/index.html
@@ -1,10 +1,5 @@
 <head>
-  <style>
-    body {
-      margin: 0;
-      font-family: Sans-serif;
-    }
-  </style>
+  <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/3d-force-graph@1"></script>
 

diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+3D version of [mbostock](https://bl.ocks.org/mbostock)'s [Radial Force](https://bl.ocks.org/mbostock/cd98bf52e9067e26945edd95e8cf6ef9).
+
+The two classes of nodes are attracted to a sphere's surface with configured radius of 300px (red) and 600px (blue).
+
+Uses [3d-force-graph](https://github.com/vasturiano/3d-force-graph) for the ThreeJS/WebGL rendering and [d3-force-3d](https://github.com/vasturiano/d3-force-3d) for the 3D versions of the radial and collision forces.
diff --git a/preview.png b/preview.png
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<head>
+  <style>
+    body {
+      margin: 0;
+      font-family: Sans-serif;
+    }
+  </style>
+
+  <script src="//unpkg.com/3d-force-graph@1"></script>
+
+  <script src="//unpkg.com/d3-octree"></script>
+  <script src="//unpkg.com/d3-force-3d@1"></script>
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    const N = 700;
+    const nodes = [...Array(N*4).keys()].map((n) => ({ type: n > N ? 'b' : 'a' }));
+
+    ForceGraph3D()
+      .d3AlphaDecay(0.01)
+      .d3VelocityDecay(0.1)
+      .d3Force('charge', null) // Deactivate existing charge
+      .d3Force('radial', d3.forceRadial(d => d.type === 'a' ? 300 : 600))
+      .d3Force('collide', d3.forceCollide(16))
+      .nodeRelSize(8)
+      .nodeColor(d => d.type === 'a' ? 'brown' : 'steelblue')
+      .graphData({ nodes, links: [] })
+      (document.getElementById('3d-graph'));
+  </script>
+</body>
No results found