📊 ICE-5: Digital Distraction Dataset Visualization

Overview

This project demonstrates loading and analyzing a CSV aaset u ing D3.js. e dataset represents synthetic iital behavior r cords including app usage time, sleep ors, device i formation, and social media platform civity.

The CSV file is hosted publicly via a GitHub Gist RAW link d is dynamically loaded into the visualization using etch()`.

---

Dataset Information

-_File Type: CSV

• _Rows:* 150
• Columns:* 12 *-Key Attributes:*

*_app_usage_time _sleep_hours _social_media_platform _device_brand _location _mood_score

The dataset was generated using Mockaroo to simulate alistic digital usage patterns.

---

Implementation Details

This visualization uses:

-*D3.js (v7) for:

*_arsing CSV (d3.csvParse) _ata aggregation ( d3.rollups) -\SVG rendering (bar chart) * N- ative JavaScript fetch()` for data loading

• \HTML +
  CSS for layout and styling

-- ***## Features Implemented

✔ Dataset metadata summary omputed KPIs:

*-_ile size (KB)

• _ows × Columns
• _verage app usage time *-_verage sleep hours
• \Most common social media platform ✔ ✔ G bar chart showing atform distribution ✔ Scrollable p eview table (first 8 ws)

---

How It Works

1. The CSV is fetched from a public GitHub Gist RAW URL.
2. The CSV text is parsed into structured data using D3.
3. Summary statistics are computed.
4. Platform frequency counts are aggregated.
5. An SVG bar chart is rendered dynamically.

---

Technical Learning Objectives

This project demonstrates:

*-_lient-side data loading from remote sources

• _ata p rsing and transformation
• _ggregation using D3 utilities *-_asic SVG chart construction
• \Dynamic DOM updates

---

Author

Saiteja