VR Data Tree Diagram - Horizontal Layout

A clean, simple left-to-right horizontal tree diagram that visualizes Oculus Rift user data organized by gender and key metrics.

How It Works

The visualization takes scatter plot data and transforms it into a hierarchical tree structure:

Tree Structure

• Level 0 (Root): "All Users" — green box on the far left showing total count
• Level 1 (Gender): Three branches for Male (blue), Female (pink), Other (orange) showing user counts per gender
• Level 2 (Metrics): Four metrics under each gender showing calculated averages in light blue

Node Layout

• Root node: Green box with total user count
• Gender nodes: Colored by gender (blue/pink/orange), show count of users in that group
• Metric nodes: Light blue boxes, show calculated average values for that metric

Text Padding and Spacing

Each node has consistent padding around the text:

• Horizontal padding: About 12px on left and right (0.5em)
• Vertical padding: About 16px on top and bottom (0.5em)
• Font sizes: 16px for node labels, 14px for values
• Rounded corners: 8px border radius for a modern, clean appearance
• Borders: Dark gray 2px border around each node

The tree automatically spaces nodes to prevent overlap while keeping everything readable.

How to Adjust

Change Node Colors

Edit styling.js in the getNodeColor() function: