3D Force-Directed Graph (ThreeJS)

100%

3D Force-Directed Graph (ThreeJS)

✓ Published0🌍 Public

Last edited Mar 7, 2017

Created on Mar 7, 2017

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.

AI-generated description

3-dimensional representation of a force-directed iterative layout, using 3d-force-graph. This wrapper component uses ThreeJS/WebGL for rendering and ngraph for the 3D physics engine.

Cycle through various topological data sets using the button on the top-right.

forked from <a href='http://bl.ocks.org/vasturiano/'>vasturiano</a>'s block: <a href='http://bl.ocks.org/vasturiano/02affe306ce445e423f992faeea13521'>3D Force-Directed Graph (ThreeJS)</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Multi-dimensional D3 force simulation

This interactive visualization demonstrates force-directed graph layouts across one, two, or three dimensions, using the Three.js WebGL renderer. It cycles through three datasets: the co-occurrence network of *Les Miserables* characters, a citation network of philosophy papers, and the dependency hierarchy of the D3.js library. The layout uses the `3d-force-graph` component, which extends `d3-force` with an octree for 3D space or a binarytree for 1D, while node color and size encode cluster membership or data weight.

MMNoichl

86% match

Loading thumbnail…

1D-2D-3D

This interactive visualization demonstrates a force-directed graph rendered in one, two, or three dimensions. Users can switch between dimensional modes and cycle through different network datasets, including character co-occurrences in *Les Misérables*, a collection of D3 blocks, and the dependency structure of the D3 library itself. The simulation runs on a custom fork of the d3-force physics engine, extended to support various dimensionalities. It uses Three.js and WebGL for 3D rendering, while the underlying force calculations adapt their indexing structure to the selected dimension.

SSaminu

84% match

Loading thumbnail…

3D Force-Directed Tree

This visualization renders the D3 v4 dependency tree as a 3D force-directed graph, where each hierarchical level is locked to its own horizontal plane to emphasize the tree’s structure. Nodes represent files and directories, sized by file size and colored by module, with the data loaded from a local CSV file. It uses the `3d-force-graph` library for Three.js/WebGL rendering, `d3-force-3d` for the force simulation, and `d3.forceCollide` for collision detection, with node labels displayed on hover.

TThanaporn-sk

81% match

Loading thumbnail…

Gist e899f735aa7a47c42f7b2604c713bfef

This example visualizes a force-directed graph using D3’s `d3.forceSimulation` to position nodes, with links drawn as SVG lines. The rendering approach uses Canvas `getImageData` to sample pixel data for a custom background effect, while Three.js handles 3D-like sphere rendering for node highlights. The code reads node and edge data from an embedded JavaScript object, and the simulation runs continuously with a `tick` handler updating node positions. A dropdown menu lets users filter the graph by cluster, though the filtering logic only updates node visibility without altering the underlying simulation forces.

AAlexDaGr8

80% match

Loading thumbnail…

Untitled

This example displays a dynamic 3D force-directed graph of organizational relationships, using nodes and links derived from a remote JSON dataset. The visualization shows parent and child nodes grouped by color, with link thickness representing a score value. Built with React and the `react-force-graph-3d` library, it fetches data asynchronously via a custom `useNetwork` hook and renders the graph with Three.js under the hood. Node dragging is disabled, and the force simulation handles layout automatically.

MMark Lam

79% match

Loading thumbnail…

Force-Directed Graph V3

This example shows a force-directed network graph of character interactions from the novel Les Misérables. The visualization displays nodes as unlabeled circles and links as straight lines, with the layout computed dynamically through a physics simulation. Using D3 v6 within a React framework, the code applies `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position the 17 nodes and 14 links. The SVG elements update their coordinates on each simulation tick, though the data only includes a subset of the full character relationships.

Sschneich

79% match

Loading thumbnail…

VR Force-Directed Graph

This visualization immerses viewers in a 3D force-directed graph, rendered with WebGL for smooth, real-time interaction in virtual reality. The network displays a bundle of linked modules from the D3.js library, with node size and color encoding the module’s file size and hierarchy. Built with Vue and D3’s force simulation, the graph supports immersive navigation, allowing users to explore the dependency structure from within a VR environment.

DDenisKealy

78% match

Loading thumbnail…

Force directed graph

This example shows a force-directed graph of character co-occurrence data from Les Misérables, rendered as an interactive SVG animation. It uses d3.forceSimulation to position nodes and links, with draggable circles representing characters and colored convex hulls drawn around groups of three or more nodes sharing the same group attribute. The hulls are generated using d3.polygonHull and closed curves, with a dropdown to switch between curveBasisClosed, curveCardinalClosed, curveCatmullRomClosed, and curveLinearClosed. The visualization is built with D3 v4 and React, loading graph data from a JSON file.

Kkalokli8

78% match