3D Radial Force

100%

3D Radial Force

✓ Published0🌍 Public

Last edited Feb 9, 2018

Created on Feb 9, 2018

This example visualizes a 3D radial force layout, where two classes of nodes are attracted to the surfaces of concentric spheres with radii of 300 and 600 pixels, respectively. The 700-node dataset, with one class in brown and the other in steelblue, demonstrates how radial attraction and collision forces organize the nodes into distinct spherical shells. The visualization relies on the `3d-force-graph` library for WebGL rendering and the `d3-force-3d` library, which provides the `d3.forceRadial` and `d3.forceCollide` functions to drive the simulation.

AI-generated description

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.

forked from <a href='http://bl.ocks.org/vasturiano/'>vasturiano</a>'s block: <a href='http://bl.ocks.org/vasturiano/bcfc5baa9e7998fb97b3091d2499fe16'>3D Radial Force</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Radial Force

This example demonstrates a custom radial force in D3.js that positions nodes into two distinct concentric circles. Red nodes cluster at a radius of 100 pixels, while blue nodes form a larger circle at 200 pixels. The simulation uses `d3.forceSimulation` combined with a custom `forceRadial` function and `d3.forceCollide` to prevent overlap. Node positions are rendered as SVG circles, with the force updating their `cx` and `cy` attributes on each tick.

TThanaporn-sk

84% match

Loading thumbnail…

Radial Force

This example demonstrates custom radial forces in D3, positioning red nodes on a circle of radius 100 pixels and blue nodes on a radius of 200 pixels, with reference circles drawn as SVG paths. It uses `d3.forceSimulation` with a `d3.forceCollide` for node spacing and a `d3.forceRadial` force that targets each node’s radius based on its type. The simulation runs over a typed array of 240 nodes, and each tick updates circle elements’ `cx` and `cy` attributes. The visualization is rendered entirely in SVG with a `viewBox` centered at the origin.

Mmbostock

83% match

Loading thumbnail…

clusters force

This example shows 300 circular nodes grouped into three distinct clusters, each with its own radial gradient color scheme. The visualization uses a force-directed simulation with `d3.forceSimulation` and a custom cluster force to keep nodes near their group’s center, while `d3.forceCollide` prevents overlap by applying padding based on node radius. The nodes are drawn as SVG circles, with each cluster’s color derived from a linear scale mapped to a radial gradient, creating a smooth visual distinction. The code defines three separate radial gradients and assigns them based on the node’s cluster value, while the custom cluster force adjusts node positions relative to a designated cluster center.

EEfratVil

79% match

Loading thumbnail…

D3 Force Simulation

This example shows a force-directed layout with 100 randomly connected nodes rendered as steelblue circles on an SVG canvas. The code creates nodes and links with random positions and connections using `d3.range` and `Math.random`. It uses `d3.select` to bind data and append circle elements with `attr` calls for positioning and styling. However, the simulation itself is not implemented—no `d3.forceSimulation` is invoked, so the graph remains static rather than animated. The visualization relies on D3 v4 and renders entirely via SVG.

CCarlosACalvo

76% match

Loading thumbnail…

3D Force-Directed Graph (ThreeJS)

This example shows an interactive 3D force-directed graph rendered with Three.js WebGL, using ngraph.forcelayout3d for physics simulation and trackball controls for rotation, zoom, and panning. It cycles through three topological data sets—Les Misérables character co-occurrences, a blocks.json citation network, and D3 source-code dependencies—with node size, color, and name mapped per dataset using Three.js spheres, line geometry, and raycaster-based tooltips.

TThanaporn-sk

75% match

Loading thumbnail…

D3 Force

This example demonstrates a simple force-directed simulation of three nodes (Alice, Bob, and Carol) connected by two links, rendered as circles inside an SVG element. The visualization uses D3’s `forceSimulation` API with `forceManyBody`, `forceLink`, and `forceCenter` forces, which are explicitly set up to model charge, link, and centering effects. The simulation’s `on('tick')` handler logs a message to the console, but the positions are not yet updated or drawn, so the visualization’s visible output is minimal. The code references the D3 library loaded via a CDN and selects the SVG container using `d3.select`.

BBhagesh Dhankher

75% match

Loading thumbnail…

D3 Forces

This example demonstrates a basic force-directed graph layout with three labeled nodes and two connecting links. Using the D3.js library version 7.8.0, it applies `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` forces to position nodes. The visualization renders as SVG circles, text labels, and lines, updating their positions on each simulation tick based on computed node coordinates. The code imports methods like `select`, `forceSimulation`, and `forceCenter` directly from D3, with data defined as simple JavaScript objects containing node IDs and link indices.

WWRCIECH

75% match

Loading thumbnail…

Force Layout

This example demonstrates an interactive force-directed graph built with React and D3 v6. A hierarchical dataset is flattened into nodes and links, then rendered as circles and lines using SVG. The simulation uses `d3.forceSimulation` with center, charge, collide, and link forces. Moving the mouse dynamically adds `forceX` and `forceY` forces that pull nodes toward the pointer, with strength varying by node depth. Clicking applies a `forceRadial` orbit force around the clicked point and draws a green circle to indicate the orbit radius.

MMinwoo Pak

75% match