VR Data Visualization

An interactive D3.js visualization of Virtual Reality user experience data with multiple view modes, interactive tooltips, and advanced analytics.

Features

• Individual Tree Views: Separate hierarchical breakdowns for each VR headset (PlayStation VR, HTC Vive, Oculus Rift)
• Summary View: Combined analysis across selected headsets with real-time filtering
• Gender Distribution Radar Charts: Interactive radar visualization showing metrics (Age, Motion Sickness, Duration, Immersion) broken down by gender
• Gender Icons with Counts: Visual representation of gender distribution with interactive icons and tooltips
• Interactive Tooltips: Hover over any element to see detailed information with smart positioning
• Responsive Design: Fully responsive layout adapting to mobile, tablet, and desktop screens
• Real-time Filtering: Toggle headsets and gender categories on/off to focus on specific data subsets

Data Structure

The visualization analyzes VR experience data including:

• User Demographics: Age and Gender (Male, Female, Other)
• Device Type: PlayStation VR, HTC Vive, or Oculus Rift
• Session Metrics: Duration (minutes), Motion Sickness Level (0-10), Immersion Rating (0-5)
• Hierarchical Analysis: Data grouped by gender with average metrics calculated for each group

View Modes

Individual View

Three side-by-side tree diagrams showing data breakdown for each VR headset:

• Root node displays total user count
• First branch level shows gender categories (Male in Blue, Female in Pink, Other in Orange)
• Leaf nodes display average metrics (Age, Motion Sickness, Duration, Immersion)

Summary View

Combined tree diagram across multiple selected headsets:

• Toggle which headsets to include in the analysis
• Real-time update of tree structure and calculations
• Useful for comparing patterns across devices

Charts View

Interactive radar chart with gender distribution analysis:

• Radar Chart: Shows 4 key metrics plotted for each gender
  • Average Age (years)
  • Average Motion Sickness (scale 0-10)
  • Average Duration (minutes)
  • Average Immersion Level (scale 0-5)
• Gender Icons: Positioned in corners with user counts
  • Blue Icon: Male users
  • Pink Icon: Female users
  • Orange Icon: Other gender identities
• Toggle Filters: Select/deselect headsets and gender categories to update visualization

Interaction Guide

Tree Nodes

• Hover: See detailed information including value, type, and context
• Color Coding:
  • Green: Root (All Users)
  • Blue: Male gender branch
  • Pink: Female gender branch
  • Orange: Other gender branch
  • Light Blue: Metric leaves

Radar Chart

• Hover over data points: View specific metric values for that gender
• Hover over center: See summary of all metrics for all visible genders
• Hover over icons: View gender count and categories

Filters

• View Selector: Switch between Individual, Summary, and Charts modes
• Headset Checkboxes: Available in Summary and Charts views to include/exclude devices
• Gender Toggles: Available in Charts view to show/hide gender categories

Getting Started

1. Load the Application: Open index.html in a modern web browser
2. Select a View Mode: Click one of the three view buttons (Individual, Summary, Charts)
3. Apply Filters (if available):
   • Check/uncheck headsets to include them in analysis
   • Toggle gender categories on/off
4. Interact with Visualization:
   • Hover over any element to see detailed tooltips
   • Observe how values change as you adjust filters
5. Data Source: Visualization loads from Virtual Reality Experiences.csv

Technical Details

• Built with: React, D3.js, and Chart.js
• Data Format: CSV file with user-level VR experience data
• Responsive: Works on screens from 480px to 1920px+ width
• Browser Support: All modern browsers supporting ES6 modules and Canvas

Metrics Explained

• Age: Average user age in years
• Motion Sickness: Average reported motion sickness on scale of 0-10 (higher = more sickness)
• Duration: Average VR session length in minutes
• Immersion Level: Average reported immersion rating on scale of 0-5 (higher = more immersive)