Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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@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')
.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
You can’t perform that action at this time.