Interactive 3D Visualizer for Arrays

A tool for visualizing arrays and matrices in 3D space using Three.js.

Hosted at: https://array-3d-viz.vercel.app

Features

• Works with 1D, 2D or 3D arrays
• Paste array data from clipboard or read from file
• Cell color scaled by relative value
• Full camera movement: rotation (mouse), zoom (scroll wheel), translation (arrow keys)
• Array dimension display (bottom left)
• Query input for highlighting values or value ranges (bottom right)
• Array value histogram (bottom right)

Getting Started

Installation

Install packages

npm install

Compile TypeScript files

npm run build

Usage

Option 1: Array file (.json, .npy, etc.)

Start the node server providing the path to your array file.

node main.js path/to/filename.ext

Then open localhost:8080 in a browser to view the visualization.

Compatibility

• JSON (.json)
• NumPy (.npy, .npz)
• Pickle (.pickle)
• CSV (.csv)
• Binaries

To load .npy or .npz files, Python must be installed along with the NumPy library.

Option 2: Paste JSON array from clipboard

node main.js

Then open localhost:8080 in a browser and paste your JSON array into the input box. Ensure the JSON is valid and there are no trailing commas after any final elements in a list.

Example JSON (2 x 4 x 3)

[
  [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
    [10, 11, 12]
  ],
  [
    [13, 14, 15],
    [16, 17, 18],
    [19, 20, 21],
    [22, 23, 24]
  ]
]