3D Sankey
A 3D Sankey diagram visualizes data flows between seven nodes arranged in three columns, with link thickness representing flow volume and colors matching source nodes. Built with Three.js, the scene renders boxes and WebGL-based canvas labels with orbital camera controls for rotation and zoom. The diagram uses static data from a JavaScript object to demonstrate how Sankey layouts extend into three-dimensional space.
AI-generated description3D Sankey Diagram with Three.js
This project demonstrates a 3D Sankey diagram visualization built with Three.js.
Features
- Interactive 3D Sankey diagram
- Custom data flow visualization
- Orbital camera controls for rotation and zoom
- Responsive design
How to Use
- Open the index.html file in a browser
- Use mouse to rotate the diagram (click and drag)
- Use scroll wheel to zoom in/out
Implementation Details
The diagram represents data flows between nodes in a 3D space. Each link's thickness represents the volume of flow. The project uses Three.js for rendering and OrbitControls for camera manipulation.
Colors represent different node categories, and the connections maintain the source node color.
Comments
Sign in to join the discussion.