Viewing a saved revision (read-only)
2fb27c9fcdb0411bb5cff22eafe26bac
Tree Node Interactions
This interactive visualization explores VR headset user data through hierarchical tree diagrams and radar charts. Built with React and D3.js, it shows aggregated metrics like average age, motion sickness, duration, and immersion levels, broken down by gender for each VR device. Users can switch between individual device trees, a summary view, and radar chart comparisons, with hover tooltips revealing detailed values. The three views use D3's `tree` layout for the hierarchy, an SVG-based rendering for nodes, and a Canvas-based radar chart.
AI-generated descriptionVR Data Visualization
An interactive D3.js visualization of Virtual Reality user experience data with multiple view modes and interactive tooltips.
Features
- Individual Tree Views: Separate hierarchical breakdowns for each VR headset (PlayStation VR, HTC Vive, Oculus Rift)
- Summary View: Combined analysis across selected headsets
- Bar Charts: Gender distribution visualization with filtering
- Interactive Tooltips: Hover over any element to see detailed information
- Responsive Design: Adapts to mobile, tablet, and desktop screens
- Real-time Filtering: Toggle headsets on/off to focus on specific data
Data Structure
The visualization analyzes VR experience data including:
- User demographics (Age, Gender)
- VR device type
- Session duration
- Motion sickness levels
- Immersion ratings
Hover Interactions
- Tree Nodes: Hover over any node to see its label, value, and type
- Bar Charts: Hover over bars to see gender count and percentage distribution
- Smart Positioning: Tooltips automatically reposition to stay within viewport
Getting Started
- Place the CSV data file in the public folder
- Load the application in a web browser
- Use the view buttons to switch between Individual, Summary, and Charts views
- Click headset checkboxes to filter data
- Hover over any visual element to see detailed information