Skip to main content
100%

VR graph

✓ Published0🌍 Public
UUtopiah
Last edited May 22, 2016
Created on May 22, 2016

This example renders a force-directed graph as a 3D virtual reality scene using A-Frame and D3.js. It shows five nodes from the Les Misérables dataset as colored spheres, connected by cylinders sized by link value. The code uses D3’s force layout (`d3.layout.force`) to simulate node positions, then updates A-Frame entity attributes (`position`, `geometry`) on each tick. D3’s selection API handles scene creation and event binding, including a fuse cursor on the camera for VR interaction. The scene includes ambient and point lighting, a sky background, and a customized camera with visible cursor.

AI-generated description

Testing out aframe.io with d3.js.

Since AFrame works with DOM elements, you can use d3's selection API to generate and modify 3D elements, as well as handle "mouse" events (including the VR friendly "fuse cursor") as if it was SVG.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/8be32e6f1f32920ba841'>aframe + d3 test</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/2b3d47f42279357aa86f00c69ccf74ed'>VR graph</a>

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

VR Force-Directed Graph

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.

DDenisKealy
79% match
Loading thumbnail…

Interactive dataviz for VR

This interactive dataviz places a 3D scatterplot inside a virtual reality scene using A-Frame, with five red spheres positioned along a path connected by a tube. The example shows how D3’s data-driven approach can generate VR entities, as the code iterates over a hardcoded array of coordinates to create each sphere. A gaze-based cursor triggers a custom `cursor-listener` component that raises a sphere on mouseenter, simulating selection without controllers. The scene includes transparent planes as spatial reference grids and a light blue sky, while D3 v4 remains unused beyond its inclusion in the HTML.

UUtopiah
78% 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
78% 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
74% match
Loading thumbnail…

Force-Directed Graph

A force-directed graph visualizes character co-occurrence in *Les Misérables*, with nodes positioned so related characters cluster together. The simulation uses d3.forceSimulation with link, charge, and center forces, while nodes are draggable circles colored by cluster and links are lines with stroke-width scaled by co-occurrence value. The code loads data from a JSON file and renders everything as SVG.

MMNoichl
74% 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
73% match
Loading thumbnail…

d3-force

A force-directed graph visualizes character interactions from Les Misérables, with 410 nodes colored by group and 410 weighted links. Users can drag individual nodes and zoom the SVG canvas. The implementation uses `d3.forceSimulation`, `forceLink`, `forceManyBody`, `forceCenter`, `d3.zoom`, and `d3.drag`, with node colors derived from `schemeCategory10` and data loaded from a TSV file.

Ttoeric
73% match