https://github.com/tom-draper/array-3d-viz
A tool for visualizing arrays and matrices in 3D space.
https://github.com/tom-draper/array-3d-viz
3d array array-view array-viewer array-visualizer data data-visualisation data-visualization dataviz interactive-visualization interactive-visualizations javascript matrix matrix-visualizer threejs typescript viewer visualization visualizer vizualisation
Last synced: 9 months ago
JSON representation
A tool for visualizing arrays and matrices in 3D space.
- Host: GitHub
- URL: https://github.com/tom-draper/array-3d-viz
- Owner: tom-draper
- License: mit
- Created: 2022-05-27T16:37:18.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-11-23T06:57:39.000Z (about 1 year ago)
- Last Synced: 2025-03-17T19:39:41.616Z (9 months ago)
- Topics: 3d, array, array-view, array-viewer, array-visualizer, data, data-visualisation, data-visualization, dataviz, interactive-visualization, interactive-visualizations, javascript, matrix, matrix-visualizer, threejs, typescript, viewer, visualization, visualizer, vizualisation
- Language: TypeScript
- Homepage: https://array-3d-viz.vercel.app
- Size: 1.58 MB
- Stars: 23
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```bash
npm install
```
#### Compile TypeScript files
```bash
npm run build
```
### Usage
#### Option 1: Array file (.json, .npy, etc.)
Start the node server providing the path to your array file.
```bash
node main.js path/to/filename.ext
```
Then open localhost:8080 in a browser to view the visualization.
##### Compatibility
- [x] JSON (.json)
- [x] 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
```bash
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)
```json
[
[
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[10, 11, 12]
],
[
[13, 14, 15],
[16, 17, 18],
[19, 20, 21],
[22, 23, 24]
]
]
```
