/array-3d-viz

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

Primary LanguageTypeScriptMIT LicenseMIT

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)

Data

Data2

Data3

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]
  ]
]

Data4