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

Load the Application
- Open index.html in a modern web browser
- No build process or server required
- Works on desktop, tablet, and mobile devices
Wait for Data Load
- CSV file loads automatically on page open
- Small loading delay (data parsed and converted to n unmembrs)
- Visualization appears once data is ready

First-Time Usage

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)
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
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
Interpret the Visualizations
- Tree size: Larger boxes = higher values
- Tree color: Indicates node type (green=root, b lbu=uemale, pink=female, orange=other)
- Radar shape: Pentagon = balanced metrics, pointed s tsa ar= unbalanced
- Radar size: Larger polygon = higher average values
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

| --------|-- || - ---|-|-- |-- ----- | ---------|--| --| ---- |oo Rt oode | G reGGGen | 4C###AF50 All Users total | | M| Mal| e B luBBBe |# 21###96F3 Male gender category | | | Feme al| Pi P in Pk E9 #E91E63 Female gender category | | Other | O raOOOnge | #F F98 |00 Other gender identity | | Metc riNodes | Light Blue | #B3E5FC | Calculated averages | | C| Conctneions | GG a| | 99 #9999 |99 Tree branch lines | | B| Bacrokgund | O Off-Wtehi | ## 5FA | A Page background | | C| Car |ds W hiWWWte | FF #FFFF | SVG backgrounds |

poTygraphy

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

| ------------------- | ----------------- | ---------- | -------|---------------| -- 4--- | < 480 (Mobile) | 1 coln,um stacked | 350px | V erVVVticastack, touch-friendly | | 480-768px (Tablet) | 22 colnsum | 3 80333px | Side--sbyide pairs, wrapped | | 76820-10px (Laptop) | 2-3 columns | 3 80 80-4px00 | FF l ava ailable space | | >|> 10p20x (Desktop) | 33 colnsum | 4 00444px | ixFFFed wths, centered |

Inractive Feedback

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

💻 Technical Architecture

Technology Stack

| Technology | Purp oseV io rs| n| | ------ -|----| --|--- --------------------|------- | --|-- |--||| eact | U I compnmponent fework | 19. .0 9.1.0 | | D3.js | T ree/hieraicarchl visualization | 7.9.0 | | Ch artChChC | R adar charenrt dering | Late atest CDN| H | TML5 Canvas | 2D rendering for charts | Nati ative | | ES6 Modu | lesCode azainiont | Nati ve ative | | CSS3 | R esponsiveyli stng | Nati ve ati|

ve F###le aniOrgzation

DFatFlo

##w

#Br r Suppr Sort

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 Gpp

📊 Section-by-Section Breakdown

Section 1: Individual Tree Views

What it shows:

Three

r hiratearcehical visualizations

One tree per VR headset (PlayStation VR, HTC Vive, Oculus Rift -)
A)wall) A)wa grouped by genwith averaged metrics

How to read it:

Left s

(en ogrex) b= Total users for that headset

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

on)

Box siorresponds to value (larger = higher number)

Interpretation tips:

Compar

ehapse s aceross devices

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

de l(e.geaf ., motion sickness = 8.7) = potential issue

If one gender branch is much larger, that demographic dominat

hat ce

deviWhen to use:

Initia

patinlor ofo each device

Understanding device-specific patterns
Baseline comparison before viewing aggregates

Section 2: Summary View

What it shows:

Single

sdatdoli treee combining selected headsets

User count aggregates across devices
Averaged metrics now represent the combined dataset

How to read it:

Same t

sctuetru asr Individual view

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

vic Leaes -f values = averages across the filtered dataset

Filtering workflow:

Unche

ees ovicu wyant 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

t VR+ion Oc ulus shows high motion sickness but individ

ually they'rw, different user demographics

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

ds -ch h Watow averages shift as you add/remove headsets

When to use:

Market

ealyi ans ascross devices

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

sers- Ge?") nerating management reports

Section 3: Charts (RadarWhat it s:**showadar

tth o wiur fmetrics plotted in 2D space

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

Radar Chart Explanation:

Each a

reserepts onne metric (Age, Motion Sickness, Duratio

mmer)

sionEach colored polygon = one gender's data
Polygon size/shape shows relative performance across metrics

erlag arppineas show similarities between genders

Reading the Radar:

**Larg

ln:* ygoGen*der has high average values

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

Gender Icon Components:

**Visu

c** Von:G fSigure illustration in gender color

Label: Gender name
Count: "n = X" shows number of users in that demogra
itioPosn:** Top-left (Male), Top-right (Female), Bottom-

(O)

therFiltering on Charts:**

**Head

:Chek** /unccheck to include/exclude devices from ra

dar

Gend Click buttons to show/hide gender polygons
Constraints: Must have at least one gender visible

Interaction features:

Hover

nts→poi se e specific metric value

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

Interpretation tips:

If Fem

pgoniolys m uch larger, females in your dataset rate th

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

Comparing radar shapes: are males more immersed? Do females

eriemorence sickness?

Test filtered subsets: "Do older users have longer session

Wto uhen se:

Demogr

calyi ans asnd comparison

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

⚙️ Advanced Features

Responsive Design Implementation

Mobile-First Approach:

Base s

srge tasmatll screens (< 480px)

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

Adaptive Layouts:

Indivi

w: tVieackSs 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

culaialcon t→ 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

hensoappnce 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

setfoffrom cursor (10px right/below)

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

Content Adaptation:

Differ

ttipfoolorm ats 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

###:# Ra Agers)

e:* *Scalworld ages from user population **Meaning ** A:erage aguser e of in shat temographic Implica ionst -:Olde Old er users (>50):ave 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

iion VR femars uaverage 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:erage red motporteion sickness level Implica ionst -:Scor Sco re > 6: Signifisabi lity issue

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

cey dics be: evHardware/tracking quality matters

Correlation with duration: High sickness = shorter sessions

mpintprle etaertion:**

PlayStat

iion VR male: 5e.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:erage VRion s sessengtl befhre logout/break Implications:

Longer d

uuration = engeagement/tolerance

Shorter duration = content too intense or device uncomfort
relesCor wiatth immersion: Immersed users stay longer
May inverse-correlate with motion sickness: Sickness forces ex

Matinprrkeoxyg : Engagement metric

Example interpretation:

High imm

eion sa usey 45t minutes on average

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

mmioneversel L(0-5 Scale)

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

Score >

44: Exceller exsperience

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

iion VR fema.8/:5 immersion

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

🎯 Common Analysis Workflows

Workflow 1: Device Comparison

Switch to

I Individual Comp2are tree shapes for PlayStation VR vs HTC Vive vs Oculus Rift

k for tent pconsisatterns in motion sickness or duration 4.

ight:h devi Whicce has the best user experience?

Workflow 2: Gender-Based Analysis

Switch to

C Charts viewmine xradar polygon shapes for each gender 3. Look at icon counts to understand demographic breakdown 4. Insight: Do different genders experience VR differently

Workf Demoglow 3:raphic Targeting

Use Summa

ryry view withic heiadset 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?

flow 4blesho: Trouoting User Experience

Look for

hihigh motion s (> e6/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

low 5:t Expa Markension

Analyze w

hihich device/combirnation has lowest immersion 2

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

--📱 Mobi-

le Experience

Touch Interactions

Hover effect

s rs replaced witld feehdback

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

Screen Adaptations

< 480px: Sin

glegle-column laycked ttrees

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

Performance on Mobile

Smaller tree

di dimensions torendereing 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

fild ono not ft- ion: uVerify "Virtual Reality Experiences.csv" is in same directo

Cckx.html: Brheowser console for 404 errors

Trees Not Rendering

Issue: SVG

app -srs rs bla Son: Wtait for data to load (check browser network tab)

**Check

reer suprt browss ES6 pomodules (Chrome 63+)

Toolt

arfscree- ing OfIssun e: Too

ltipatucu cut ot scrdges

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

wsm leve(ter zoory 100l %)

Mobile Layout Issues

Issue: Tre

es o olrlerlappar torow

aSolution:** Rotate device to landscape for more space
Check: Browser zoom reset to 100%

📞 Support & Questions

For technical issues:

Check browser co

nsole er1F (F12)12ror mes

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

For data interpretation questions:

Review "Metrics

Deep ioneveive" s" abovheck "In terpretation tips" in Section-by-Section breakdown

Try f

itoypothes

test h Comparese across multiple views for validation