Skip to main content
SimilarExport ZIP
100%

VR Force-Directed Graph

✓ Published0🌍 Public
DDenisKealy
Last edited Apr 25, 2018
Created on Apr 25, 2018

This VR force-directed graph visualizes a network of top 500 songs, with nodes representing tracks and links showing similarities. It uses 3d-force-graph-vr with A-Frame for WebGL virtual reality rendering, and d3-force-3d or ngraph for the layout physics. The included code loads song data with properties like artist, title, tags, and pagerank, mapping them to visual encodings such as node size by pagerank, link width by weight, and auto-coloring by label. Users can cycle through multiple topological datasets via a top-right button and enter immersive VR mode with the bottom-right icon. Movement is simulated through the 3D graph using a gamepad or arrow/WASD keys. The visualization demonstrates a force-directed iterative layout in virtual reality, enabling spatial exploration of network relationships. A WebGL version is also available.

AI-generated description

Virtual reality representation of a force-directed iterative layout, using 3d-force-graph-vr. This component uses A-Frame for VR rendering and either d3-force-3d or ngraph for the layout physics engine.

Cycle through various topological data sets using the button on the top-right. Click the icon on the bottom-right to enter VR mode.

Simulate flying-style movement through the layout using a gamepad controller or the arrow/wasd keys on a physical keyboard.

See also the WebGL version.

Similar vizzes

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
86% match
Loading thumbnail…

Last.fm: Top 500 Songs by pagerank (2D)

This interactive force-directed graph visualizes the top 500 songs ranked by PageRank, calculated from a network of 33,000 tracks. Each node represents a song, with its size proportional to its PageRank and its position reflecting similarity to connected songs. Hovering reveals the song title, and dragging a node pulls connected nodes to show relational distances. Built with d3.forceSimulation and d3.drag, it uses SVG rendering and provides brushing for multi-selection within the ForceAtlas2-style layout.

DDenisKealy
78% match
Loading thumbnail…

Force-Graph

This interactive force-directed graph visualizes the network of game assets, with nodes representing individual files and links showing connections between them. The visualization uses a physics simulation to position nodes, balancing link forces, many-body repulsion, and centering forces. Built with d3.forceSimulation, d3.forceLink, and d3.forceManyBody, the SVG rendering updates each tick to reflect the evolving layout. Users can drag nodes, which temporarily reactivates the simulation to reposition the graph, with node colors assigned via a categorical color scheme.

LLo-ov
73% match
Loading thumbnail…

Fork of D3 Force Directed Graph - Music Artists

A force-directed graph maps music artists and their albums, with four main genre nodes connected by thick links and each album branching into smaller leaf nodes. The visualization uses D3 v6's `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to compute layout, while SVG circles, lines, and text render the nodes and connections. Data is structured in a separate module, with node size and link distance varied by hierarchy level. The `drag` interaction lets users reposition nodes, and the simulation restarts on interaction.

Mmach9github
72% match
Loading thumbnail…

Force Directed Graph

This visualization presents a network of interconnected nodes, with each node colored by its assigned group and links showing the connections between them. It combines a force-directed node-link diagram with an adjacency matrix display, revealing both the spatial clustering of relationships and the overall network structure. The force layout is built with `d3.forceSimulation`, including `d3.forceLink` and `d3.forceManyBody`, while user interactions like node dragging, zooming, and hover effects are handled through D3’s drag and zoom APIs. The adjacency matrix uses `d3.scaleBand` axes to map node IDs, and both SVG canvases render the data with animation driven by the simulation tick events.

ZZhou180
71% match
Loading thumbnail…

Force-Directed Graph with Drag/Zoom/Pan/Center/Resize/Labels/Shapes/Filter/Highlight

This interactive force-directed graph displays network data with draggable nodes, zoom and pan controls, and double-click-to-center functionality. Nodes vary in size, shape, and color based on properties like score and type, with text labels that avoid occlusion. The visualization supports filtering by node shape, score, and link strength, plus hover highlighting of first-order neighborhoods and click-to-fade effects. Built with D3 v3, it uses d3.layout.force for simulation and d3.behavior.zoom, rendering as SVG with data loaded from a JSON file.

FFrissAnalytics
71% match
Loading thumbnail…

Zoomable Force Directed Graph d3v4

This graph uses a force-directed layout to arrange a network of named characters, with gray links showing relationships and black circles for nodes. Users can zoom and pan the entire visualization via mouse interactions. The example is built with d3.v4, using d3.forceSimulation with d3.forceLink and d3.forceManyBody, and renders to SVG. The node and link data are hardcoded in the script, with links flagged as allies or enemies.

FFrissAnalytics
70% match
Loading thumbnail…

D3 Force Directed Graph - Music Artists

A force-directed graph maps music artists like Korn and TR/ST to colored nodes, with child nodes representing individual albums and smaller leaf nodes for tracks. The simulation uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position elements, while links are colored per artist. Nodes are draggable via `d3.drag`, with SVG circles, lines, and labels rendered from `data.js` and styled in `index.html`. Palette colors come from a generated `colors.js` module.

AAlbert
69% match