Skip to content

Instantly share code, notes, and snippets.

@vasturiano
Last active April 22, 2021 23:29
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save vasturiano/bcfc5baa9e7998fb97b3091d2499fe16 to your computer and use it in GitHub Desktop.
3D Radial Force

3D version of mbostock's Radial Force.

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 for the ThreeJS/WebGL rendering and d3-force-3d for the 3D versions of the radial and collision forces.

<head>
<style> body { margin: 0; } </style>
<script src="//unpkg.com/3d-force-graph@1"></script>
<script src="//unpkg.com/d3-octree"></script>
<script src="//unpkg.com/d3-force-3d"></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')
.enableNodeDrag(false)
.graphData({ nodes, links: [] })
(document.getElementById('3d-graph'));
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment