Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Tree Node Interactions

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

05508da4b92b4a88ad272ab9ed78a011

Open

Tree Node Interactions

0 stars0🌍 Public
KKal
Last edited Dec 10, 2025
Created on Nov 18, 2025

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 description

VR 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
  • Gender Distribution Charts: Visual representation of gender breakdown with interactive icons
  • 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
  • Gender Icons: Hover over human figures to see gender and count information
  • Smart Positioning: Tooltips automatically reposition to stay within viewport

Getting Started

  1. Place the CSV data file in the public folder
  2. Load the application in a web browser
  3. Use the view buttons to switch between Individual, Summary, and Charts views
  4. Click headset checkboxes to filter data
  5. Hover over any visual element to see detailed information

Gender Distribution Visualization

The Charts view displays gender distribution with three representative human icons:

  • Blue Icon: Male users
  • Pink Icon: Female users
  • Orange Icon: Other gender identities

Each icon shows the total count for that gender category and displays additional information on hover.