Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

3D Sankey

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

7f22215d08e7433ab54ebeb4281578e6

Open

3D Sankey

0 stars0🌍 Public
CCurran Kelleher
Last edited Feb 25, 2025
Created on Feb 25, 2025
Forked from ThreeJS Starter

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 description

3D 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

  1. Open the index.html file in a browser
  2. Use mouse to rotate the diagram (click and drag)
  3. 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.