Tree Node Interactions

Hover Behavior:

• Move cursor over any rectangular node in the tree
• Node brightens slightly and border becomes more prominent
• Tooltip appears near cursor showing:
  • Node label (e.g., "Average Motion Sickness")
  • Node value (e.g., "5.2/10")
  • Node type/context (Root, Gender category, or Metric)

Tooltip Position:

• Tooltip follows cursor smoothly
• Auto-repositions to avoid going off-screen
• Disappears when cursor leaves node
• Smart positioning: appears to cursor right/below when possible, reverses if near screen edge

Radar Chart Interactions

Data Point Hover:

• Move cursor over any colored point on the radar lines
• Tooltip displays metric name and exact value for that gender
• Example: "Male - Average Age: 34.5"

Center Hotspot Hover:

• Move cursor to the center of the radar chart
• Displays comprehensive summary tooltip
• Shows all four metrics for each visible gender category
• Useful for quick multi-metric comparison

Icon Label Hover:

• Move cursor over gender label and count in corner
• Confirmation tooltip appears (e.g., "Male: 152 users")
• Provides quick reference for demographic breakdown

Filter Controls

View Selection (Primary):

• Click "Individual" button to see three separate trees
• Click "Summary" button for consolidated tree + headset filters
• Click "Charts" button for radar visualization + headset & gender filters
• Active view highlighted in blue with solid border

Headset Checkboxes (Summary & Charts Views):

• Click checkbox to include/exclude a VR headset
• Multiple selections allowed and encouraged
• Selection labeled in tree title (e.g., "Summary: PlayStation VR, Oculus Rift")
• Unchecked devices' data immediately excluded from visualization
• All three devices selected by default

Gender Toggle Buttons (Charts View Only):

• Click button to toggle gender category on/off
• Button color fills when gender is selected
• At least one gender must remain selected
• Last selected gender cannot be deselected
• Radar chart updates immediately to show only selected genders
• Icons disappear if their gender is deselected

---

🚀 Getting Started

Initial Setup

1. Load the Application

   • Open index.html in a modern web browser
   • No build process or server required
   • Works on desktop, tablet, and mobile devices

2. Wait for Data Load

   • CSV file loads automatically on page open
   • Small loading delay (data parsed and converted to n u nmuers)
   • Visualization appears once data is ready

First-Time Usage

1. Select a View Mode

   • Click one of three view buttons at top:
     • "Individual" (default: shows three trees)
     • "Summary" (shows consolidated view)
     • "Charts" (shows radar and demographics)

2. Explore Individual Trees (if viewing Individual)

   • Three trees display side-by-side (or stacked on mobile)
   • Each tree represents one VR headset
   • Hover over nodes to learn about metrics
   • Trees are read left-to-right: Root → Gender → Metrics

3. Apply Filters (if viewing Summary or Charts)

   • Summary View:
     • Use checkboxes to select/deselect VR headsets
     • Tree updates instantly to show only selected devices
   • Charts View:
     • Use headset checkboxes to filter devices
     • Use gender buttons to filter demographics
     • Radar and icons update in real-time

4. Interpret the Visualizations

   • Tree size: Larger boxes = higher values
   • Tree color: Indicates node type (green=root, b l bul=male, pink=female, orange=other)
   • Radar shape: Pentagon = balanced metrics, pointed s t sat = unbalanced
   • Radar size: Larger polygon = higher average values

5. Generate Insights

   • Compare metrics across genders using Summary view
   • Check if certain devices cause more motion sickness
   • Identify which demographics have longest sessions
   • Find immersion correlations with age or gender

---

🎨 Visual Design System

Color Palette

| Element | C olCCC|r R GBRRR | Usage | |

| --------|--- | - ----|--|-- |------ | ---------|---| ---| -- |oot ooNode | G reGGG|n # 4C###0F | All Users total | | M| | Mal| B luBBB # 21###36 | Male gender category | | | Feme | Pi| P |ink E9 #1EE9 | Female gender category | | Other | O raOOO g| # FF #FF98 | Other gender identity | | | Metc Nodes | Light Blue | #B3E5FC | Calculated averages | | C|| Conctions | GGra| y | 99 #9999 | Tree branch lines | | B| | Bacround | O Off-Wte | ##F5FA 7F| Page background | | C|| Car | W hiWWW|e # FF###FF | SVG backgrounds |

pography

• Heading/Title: 14-16px, bold, dark gray (#222)
• Node Labels: 9-10px, bold, black
• Node Values: 8-9px, medium weight, dark gray (#444)
• Tooltips: 12-13px, white text on dark background
• Buttons: 13-14px, varies by state

Responsive Breakpoints

| Screen Size | La Layout | Tree Width | Behavior | |

| ------------------- | ----------------- | ---------- | -------|----------------| ---- 4 |80 4px (Mobile) | 1 c1 1 coln, stacked | 350px | V erVVVail stack, touch-friendly | | 480-768px (Tablet) | 2 2 colns | 3 80333|x S id Side--side pairs, wrapped | | 7| | 768200px (Laptop) | 2-3 columns | 3 80 380-4px | FFil alsvailable space | | >|| > 10px (Desktop) | 3 3 colns | 4 00444|x F ixFFFwdidths, centered |

teractive Feedback

• Hover Effects: +15% brightness, +1px border width
• Button Active: Blue fill (#2196F3), solid border
• Disabled Elements: 50% opacity, cursor changes to "no not-alwed"
• Transitions: 0.2-0.3s ease for smooth animations

---

💻 Technical Architecture

Technology Stack

| Technology | Purp | V io ers| nion| -------|----| -- |---------------------|------- | --|--- |-|| R React | U I compnmporamework | 19. .0 9.1.0 | | D3.js | T ree/hieraical visualization | 7.9.0 | | Ch artChChC.js | R adar charendering | Late st atest CDN| HTML5 Canvas | 2D rendering for charts | Nati ative | | ES6 Modu | Code orgazaion | Nati ve ative | | CSS3 | R esponsiveyling | Nati ve ati|

  FOrg File anization

DaFata Flo

###Bror Swseupport

• Chrome/Edge: Full support, ES6 modules
• Firefox: Full support, ES6 modules
• Safari: Full support, ES6 modules
• Mobile Browsers: Responsive layout, touch-friendly
• Minimum Requirements: ES6 module support, Canvas API, SVG s supp

-ort--

📊 Section-by-Section Breakdown

Section 1: Individual Tree Views

What it shows:

• Three

ssepar hirarchical visualizations

• One tree per VR headset (PlayStation VR, HTC Vive, Oculus Rift -) t)
• A)wauped gro by upeder with averaged metrics

How to read it:

• Left s

iide (en ox) = Total users for that headset

• Three branches from root = Male, Female, Other genders
• Right side leaves = Four metrics (Age, Sickness, Duration, Immersi

on)

x ze corresponds to value (larger = higher number)

Interpretation tips:

• Compar

ee trehaps across devices

• Narrow leaf (e.g., motion sickness = 2.1) = good for that metric

• Wide l(e.g., motion sickness = 8.7) = potential issue

• If one gender branch is much larger, that demographic dominat

es that ce

When to use:

• Initia

ll expatin of each device

• Understanding device-specific patterns
• Baseline comparison before viewing aggregates

---

Section 2: Summary View

What it shows:

• Single

  consdatd tree combining selected headsets

• User count aggregates across devices

• Averaged metrics now represent the combined dataset

How to read it:

• Same t

rree sctue as Individual view

• Root node count = sum of all selected headsets
• Gender branches = combined males/females/others from selecte

d devic Leaf values = averages across the filtered dataset

Filtering workflow:

1. Unche

cck dees ou want to exclude 2. Tree regenerates with remaining data 3. Title updates to show which devices are included 4. Compare different combinations to find patterns

Interpretation tips:

• If Pla

yyStat VR+ Oculus shows high motion sickness but individ

uallyleye low, different user demographics

• Subset comparison: try just PlayStation + HTC to see if pattern

  holds -ch how averages shift as you add/remove headsets

When to use:

• Market

--widealyis across devices

• Testing hypotheses about user behavior
• Comparing subsets (e.g., "do premium devices attract differe

nt users- Generating management reports

---

Section 3: Charts (Radatshows:**show

• Radar

cchartth our metrics plotted in 2D space

• Gender icons in corners with demographic counts
• Center hotspot for summary statistics

Radar Chart Explanation:

• Each a

xxis resets one metric (Age, Motion Sickness, Duratio

n, Immer)

• Each colored polygon = one gender's data

• Polygon size/shape shows relative performance across metrics

• Overlag areas show similarities between genders

Reading the Radar:

• **Larg

ee poln:* Gender has high average values

• Pointed corners: Good performance in specific metrics
• Rounded polygon: Balanced performance
• Small polygon: Lower average values

Gender Icon Components:

• **Visu

aal ic** VG figure illustration in gender color

• Label: Gender name
• Count: "n = X" shows number of users in that demogra

phic

• ition:* Top-left (Male), Top-right (Female), Bottom-

left (O)

Filtering on Charts:

• **Head

ssets:Chek/uncheck to include/exclude devices from ra

dar

Geers:** Click buttons to show/hide gender polygons

• Constraints: Must have at least one gender visible

Interaction features:

• Hover

ddata nts→ see specific metric value

• Hover center → see all metrics summary
• Hover icons → confirm user count

Interpretation tips:

• If Fem

aale pgonis much larger, females in your dataset rate th

ings hig- If Male age point is far right, males are older on average

• Comparing radar shapes: are males more immersed? Do females

  experiemore sickness?

• Test filtered subsets: "Do older users have longer session

s?"

Wto use:

• Demogr

aaphicalyis and comparison

• Understanding gender-based user experience differences
• Identifying outlier metrics
• Creating presentable comparative charts

---

⚙️ Advanced Features

Responsive Design Implementation

Mobile-First Approach:

• Base s

ttylesrge small screens (< 480px)

• Breakpoints scale up from there
• Touch-friendly button sizes (minimum 44px × 44px)
• Vertical scrolling preferred over horizontal

Adaptive Layouts:

• Indivi

ddual w: tacks vertically on mobile

• Trees reduce size but maintain proportions
• Summary and Charts: Center with max-width for readability
• Tooltips reposition to avoid screen edges

Real-Time Data Filtering

Filtering Architecture:

• No dat

aa reculaion → pure filtering of existing data

• New aggregations computed immediately
• Tree structure rebuilt with filtered data
• Radar chart dataset updated with new averages

Performance Considerations:

• CSV pa

rrse hensonce at startup

• Filter operations are O(n) = fast even with large datasets
• Tree layout recalculation < 100ms
• Smooth visual transitions between states

Tooltip System

Smart Positioning:

• Calcul

aated setfrom cursor (10px right/below)

• Viewport boundary detection
• Automatic repositioning if would go off-screen
• Fixed positioning keeps tooltips visible during scroll

Content Adaptation:

• Differ

eent ttipformats for different elements

• Node tooltips: include type/context
• Metric tooltips: show actual values
• Icon tooltips: confirm demographic labels
• Center hotspot: comprehensive summary

---

🔍 Metrics Deep Dive:# Ra

AgerScale:* *ScalReal-world ages from user population

**Meaning ** A:eragver ge aguser in shat demographic Implica ionst -:Olde us

er):( (> Mayhave different VR tolerance

• Younger users (<25): Likely more gaming experience
• Age differences by gender: Marketing targeting clues
• Age differences by device: User preference correlation

Example interpretation:

• PlayStat

ioemVaVR le sers average 45 years

• HTC Vive female users average 28 years
• PlayStation VR may attract different demographic

Motion Sickness (0-10 Scale)

Scale: 0 = No sickness, 10 = Severe nausea **Meaning ** A:eragver ge red motion sickness level Implica ionst -:Scor >

6:fiiSigcantusability issue

• Score < 3: Device/content well-designed for comfort
• Differences by gender: Women may report differently than men
• Dif

ferencey dice: Hardware/tracking quality matters

• Correlation with duration: High sickness = shorter sessions

Exampintpretation:

• PlayStat

ioalVeVR usrs: 5.2/10 sickness

• HTC Vive male users: 3.1/10 sickness
• HTC Vive appears more comfortable for males

Duration (Minutes)

Scale: Session length from 0 to 60+ minutes **Meaning ** A:eragver ge VRion sengtl before logout/break Implications:

• Longer d

ur= itiohighr engagement/tolerance

• Shorter duration = content too intense or device uncomfort

able

• reles with immersion: Immersed users stay longer
• May inverse-correlate with motion sickness: Sickness forces ex

it

• Matinproxy: Engagement metric

Example interpretation:

• High imm

erseoionrs say 45 minutes on average

• Low immersion users stay 15 minutes on average
• 3x engagement difference suggests immersion quality matters

Immionevel (0-5 Scale)

Scale: 0 = Not immersive, 5 = Completely immersive Meaning: User's subjective sense of presence in VR Implications:

• Score >

4:lexExcnt uer experience

• Score < 2: Breaks sense of presence
• Correlates with duration: Immersed users stay longer
• May vary by content, not just hardware
• Key metric for VR effectiveness

Example interpretation:

• PlayStat

ioemVaVR les 3.8/5 immersion

• Oculus Rift females: 2.1/5 immersion
• PlayStation VR provides better female user immersion

---

🎯 Common Analysis Workflows

Workflow 1: Device Comparison

1. Switch to

Inal viviview . Compare tree shapes for PlayStation VR vs HTC Vive vs Oculus Rift

3. Look for tent patterns in motion sickness or duration

**Insight:*h device has the best user experience?

Workflow 2: Gender-Based Analysis

1. Switch to

Chiewtrts 2. Eamine radar polygon shapes for each gender 3. Look at icon counts to understand demographic breakdown 4. Insight: Do different genders experience VR differently

?

Workf Demographic Targeting

1. Use Summa

ry itheiew specfic headset combinations 2. Check age ranges for each gender 3. Combine with duration to understand engagement 4. Insight: Which demographic is most engaged with which device?

Workflow 4bleshooting User Experience

1. Look for

higon m mosicknss (> 6/10) in any category 2. Compare duration for that group 3. Check if immersion rating is also low 4. Insight: Hardware/content causing discomfort needs fixing

Workflow 5:t Expansion

1. Analyze w

hicce/d degende combination has lowest immersion 2

. Consider irtunity for improvement 3. Check if motion sickness is related to low immersion 4. Insight: Targeting this segment with better content could expan

d market

--📱 Mobile Experience

Touch Interactions

• Hover effect

s re witalach tap/old feedback

• Tooltips appear on tap, dismiss on tap elsewhere
• Buttons enlarged for touch targets (48px minimum)
• Scrolling enabled for long content

Screen Adaptations

• < 480px: Sin

gle- layloluout, sacked trees

• < 600px: Reduced font sizes, simplified spacing
• Full-width SVGs scale responsively
• Radar chart height reduced but maintains aspect ratio

Performance on Mobile

• Smaller tree

dims tosnsi reduc rendering load

• Tooltip positioned intelligently to avoid occlusion
• Canvas rendering optimized for tablet processors
• Touch events debounced to prevent double-triggers

---

🐛 Troubleshooting

Data Not Loading

• Issue: CSV

fileound onot- Soltion: Verify "Virtual Reality Experiences.csv" is in same directo

ryry as inde

• Cck: Browser console for 404 errors

Trees Not Rendering

• Issue: SVG

appeank -srs Soluion: Wait for data to load (check browser network tab)

• **Check

::* Ensureer suprts ES6 modules (Chrome 63+)

Toolt

ipips Appearfscree- Issue: Too

ltipsff atucut screenedges

• Solution: This is auto-corrected, may need to move cursor
• **Chec

k:k:** Browsm leve(try 100%)

Mobile Layout Issues

• Issue: Tre

es oving olrlar too nrrow

• Solution: Rotate device to landscape for more space
• Check: Browser zoom reset to 100%

---

📞 Support & Questions

For technical issues:

• Check browser co

nsole for er1F12ror messges

• Verify data file exists and is properly formatted
• Test in different browser
• Check that JavaScript is enabled

For data interpretation questions:

• Review "Metrics

Deep Dectioneve" above -Check "Interpretation tips" in Section-by-Section breakdown

• Try f

iltiltering toypothes

• Compare across multiple views for validation

---

📝 License & Att