Skip to main content
šŸŒ Public

Share visualization

Send this visualization to others.

Engagement

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

a2d1110e8c6646ada74703fed8f099f7

Open

Engagement

0 stars0šŸŒ Public
KKal
Last edited Dec 11, 2025
Created on Sep 16, 2025
Forked from Tech and Education

This interactive D3.js visualization explores Virtual Reality (VR) engagement in education through two linked views. An engagement scatter plot maps weekly VR usage hours against a 1-5 engagement scale, with color-coded points distinguishing the Impact and Education datasets, while solid versus hollow circles differentiate VR users from non-users. A secondary grouped bar chart displays user distribution across age groups and education levels, with dynamic filtering by education level. Built with d3.select, d3.scaleLinear, d3.scaleBand, and d3.csvParse, the tooltips provide detailed information on hover, and the UI supports toggling between datasets and views.

AI-generated description

VR Education Data Visualization

A comprehensive D3.js visualization analyzing Virtual Reality adoption in education and user demographics, with interactive filtering and engagement analysis.

Overview

This project visualizes data from multiple sources to reveal correlations between VR engagement, usage hours, and user demographics. Features two main interactive views: Engagement analysis and User distribution.

Data Sources

The visualization uses data from:

  1. Virtual_Reality_in_Education_Impact.csv - Student VR usage and outcomes
  2. Modified_Virtual_Reality_in_Education_Dataset.csv - Educational VR implementation and user demographics
  3. Virtual Reality Experiences.csv - User VR headset experience metrics

Views

Engagement View

Interactive scatter plot correlating VR engagement levels with weekly usage hours across different datasets.

Features:

  • Toggle between Impact and Education datasets
  • Filter for VR users only
  • Interactive tooltips on hover
  • Color-coded by dataset
  • Legend with visual encoding explanation

Users View

Bar chart displaying user distribution by age group (5-year increments) and education level from the Educational VR Implementation dataset.

Features:

  • Grouped bars showing education level distribution across age groups
  • Education level filter buttons (All, High School, Undergraduate, Postgraduate)
  • Interactive bars with hover effects
  • Color-coded by education level
  • Legend identifying each education level category

Dataset Descriptions

1. Virtual_Reality_in_Education_Impact.csv

Student-level data tracking VR usage in educational settings with learning outcomes.

Key Columns:

  • Student_ID - Unique student identifier
  • Age - Student age (12-30)
  • EducationLevel - High School, Undergraduate, or Postgraduate
  • Grade_Level - Educational grade level
  • Field_of_Study - Subject area (Science, Medicine, Arts, Engineering, etc.)
  • Usage_of_VR_in_Education - Yes/No indicator
  • Hours_of_VR_Usage_Per_Week - Numeric hours (0-13)
  • Engagement_Level - 1-5 scale (1=Low, 5=High)
  • Improvement_in_Learning_Outcomes - Yes/No indicator

Record Count: 49 students

2. Modified_Virtual_Reality_in_Education_Dataset.csv

Educational VR implementation data with institutional context and infrastructure details.

Key Columns:

  • Age - Participant age (12-30)
  • EducationLevel - High School, Undergraduate, or Postgraduate
  • Grade_Level - Educational level
  • Usage_of_VR_in_Education - Yes/No
  • Hours_of_VR_Usage_Per_Week - Numeric hours (0-18)
  • Engagement_Level - 1-5 scale
  • Improvement_in_Learning_Outcomes - Yes/No
  • Instructor_VR_Proficiency - Beginner, Intermediate, or Advanced
  • Access_to_VR_Equipment - Yes/No indicator
  • Stress_Level_with_VR_Usage - Low, Medium, or High

Record Count: 49 records

3. Virtual Reality Experiences.csv

User VR headset experience data measuring motion sickness and immersion levels.

Key Columns:

  • UserID - Unique user identifier (1-49)
  • Age - User age (19-60)
  • VRHeadset - Device type (HTC Vive, Oculus Rift, PlayStation VR)
  • Duration - Session duration in minutes (5.3-58.5)
  • MotionSickness - 1-10 scale
  • ImmersionLevel - 1-5 scale

Record Count: 49 experiences

Interactive Features

Engagement View

  • Dataset Toggle Controls - Show/hide Impact and Education datasets
  • VR Usage Filter - Toggle between all users and VR users only
  • Hover Tooltips - Detailed information on each point
  • Dynamic Highlighting - Points highlight on mouseover

Users View

  • Education Level Filter Buttons - Filter by specific education level or view all
  • Grouped Bar Chart - See distribution across age groups
  • Hover Effects - Bars highlight on interaction
  • Color Legend - Education level categories clearly identified

Project Structure

  • index.html - HTML entry point
  • index.js - Main entry point
  • mainApp.js - Application controller and view routing
  • views/engagementViz.js - Engagement scatter plot
  • views/usersViz.js - Users bar chart
  • styles.css - Styling
  • bundle.js - Built by build process

Getting Started

  1. Ensure all CSV files are in the project root
  2. Build the project (depends on your build setup)
  3. Open index.html in a web browser
  4. Switch between views using the tab controls
  5. Use filter buttons to explore different aspects of the data