Interactive 3D visualization tool for accelerometer and gyroscope sensor data. (If you find this helpful, definitely appreciate a star : D)

• Fully Configurable Sensors: Easily customize your sensor setup in config.json
  • Support for multiple sensors (hands, legs, fingers, etc.)
  • Configure display names, units, and CSV column mappings
  • Add/remove sensors without changing any code
• Dynamic Grid Layout: Configurable number of plots (default: 4)
• Fully Customizable: Each plot can independently select any sensor type and pose
• Dynamic Plots: Add or remove plots on the fly
• Animated Visualization: Watch sensor data evolve over time in 3D space
• Interactive Controls:
  • Play/Pause/Reset animation
  • Time slider for manual scrubbing
  • Drag to rotate 3D plots
  • Scroll to zoom
• Refresh to Reset: Refresh the page to return to the default layout

Install dependencies using uv:

make init

Edit config.json to match your sensor setup. The configuration file controls:

1. Sensor Definitions: Define your sensors with display names, units, and CSV column mappings
2. Paths: Configure data directories and output locations
3. Visualization: Set default number of plots, animation speed, etc.

Example: Default Configuration (2 hand + 1 leg sensors)

{
  "sensors": {
    "hand_acc": {
      "display_name": "Hand Accelerometer",
      "unit": "m/s²",
      "columns": { "x": "ax_hand", "y": "ay_hand", "z": "az_hand" }
    },
    "hand_gyro": {
      "display_name": "Hand Gyroscope",
      "unit": "deg/s",
      "columns": { "x": "gx_hand", "y": "gy_hand", "z": "gz_hand" }
    },
    "hand2_acc": {
      "display_name": "Hand two Accelerometer",
      "unit": "m/s²",
      "columns": { "x": "ax_hand", "y": "ay_hand", "z": "az_hand" }
    },
    "hand2_gyro": {
      "display_name": "Hand two Gyroscope",
      "unit": "deg/s",
      "columns": { "x": "gx_hand", "y": "gy_hand", "z": "gz_hand" }
    },
    "leg_acc": {
      "display_name": "Leg Accelerometer",
      "unit": "m/s²",
      "columns": { "x": "ax_hand", "y": "ay_hand", "z": "az_hand" }
    },
    "leg_gyro": {
      "display_name": "Leg Gyroscope",
      "unit": "deg/s",
      "columns": { "x": "gx_hand", "y": "gy_hand", "z": "gz_hand" }
    }
  }
}

Example: Two Hand Sensors

{
  "sensors": {
    "left_hand_acc": {
      "display_name": "Left Hand Accelerometer",
      "unit": "m/s²",
      "columns": {
        "x": "ax_hand",
        "y": "ay_hand",
        "z": "az_hand"
      }
    },
    "left_hand_gyro": {
      "display_name": "Left Hand Gyroscope",
      "unit": "deg/s",
      "columns": {
        "x": "gx_hand",
        "y": "gy_hand",
        "z": "gz_hand"
      }
    },
    "right_hand_acc": {
      "display_name": "Right Hand Accelerometer",
      "unit": "m/s²",
      "columns": {
        "x": "ax_hand",
        "y": "ay_hand",
        "z": "az_hand"
      }
    },
    "right_hand_gyro": {
      "display_name": "Right Hand Gyroscope",
      "unit": "deg/s",
      "columns": {
        "x": "gx_hand",
        "y": "gy_hand",
        "z": "gz_hand"
      }
    }
  }
}

See config.json for more examples.

Run the visualization script:

make run

This will:

1. Load sensor configuration from config.json
2. Load all sensor data from /data
3. Generate data files in /generated
4. Automatically open the visualization in your browser

The script expects sensor data in the following structure:

If you want to change the name of your pose, you can jsut the pose prefix under pose_folder_prefix in the config.json

data/
├── pose1/
│   ├── *.csv
│   └── ...
├── pose2/
│   ├── *.csv
│   └── ...
└── ...

Each CSV file should contain columns matching your config.json sensor definitions.

Default Configuration Columns:

• ax_hand, ay_hand, az_hand - Hand accelerometer data
• gx_hand, gy_hand, gz_hand - Hand gyroscope data
• ax_leg, ay_leg, az_leg - Leg accelerometer data
• gx_leg, gy_leg, gz_leg - Leg gyroscope data

Note: Column names in your CSV files must match the column mappings defined in config.json.

• Use dropdown menus above each plot to select:
  • First dropdown: Sensor type (Hand/Leg × Acc/Gyro)
  • Second dropdown: Pose (1-5)
• Create any combination you want!

• ▶ Play: Start animation
• ⏸ Pause: Pause animation
• ↺ Reset: Return to start
• ➕ Add Plot: Add more plots dynamically
• ✕ Remove: Remove individual plots (appears when >1 plot)
• Time Slider: Manually scrub through time

• Drag: Rotate the 3D view
• Scroll: Zoom in/out
• Hover: See exact values at any point

The visualization generates the following files:

• visualization.html: Interactive HTML file (in project root)
• generated/config.js: Configuration exported for JavaScript
• generated/data.js: Sensor data embedded for JavaScript
• generated/data.json: Sensor data in JSON format (for inspection)

Note:

• The HTML file is self-contained and works offline (uses CDN for Plotly.js)
• Run make clean to remove generated files