Viewing a saved revision (read-only)
8c7398676db140258703db05f814af63
Saiteja_ICE5
This visualization summarizes a 150-row CSV dataset of simulated digital behavior records, showing key performance indicators like average app usage time and sleep hours in a left-hand card. An adjacent SVG bar chart, built with D3.js v7, displays the distribution of social media platforms using aggregated frequency counts. The page loads the remote CSV via JavaScript’s `fetch()`, parses it with `d3.csvParse`, and computes rollups with `d3.rollups`. A scrollable preview table shows the first eight rows to verify parsing.
AI-generated descriptionYes — and you should. A proper README.md makes this
look like an intentional mini project instead of “just an
assignment.”
But don’t write fluff. Keep it structured, clean, and technical.
Here’s a strong, human, academic-style README you can paste
directly into README.md in VizHub:
📊 ICE-5: Digital Distraction Dataset Visualization
Overview
This project demonstrates loading and analyzing a CSV ataset using D3.js. he dataset represents synthetic igital behavior records including app usage time, sleep ours, device information, and social media platform ctivity.
The CSV file is hosted publicly via a GitHub Gist RAW link nd is dynamically loaded into the visualization using fetch()`.
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 ealistic digital usage patterns.
Implementation Details
This visualization uses:
*-D3.js (v7) for:
*-Parsing CSV (d3.csvParse)
*-Data aggregation (d3.rollups)
*-SVG rendering (bar chart)
*
-Native JavaScript fetch() for data loading
*-HTML + CSS for layout and styling
Features Implemented
✔ Dataset metadata summary Computed KPIs:
*-File size (KB) *-Rows × Columns *-Average app usage time *-Average sleep hours *-Most common social media platform ✔ SVG bar chart showing platform distribution ✔ Scrollable preview table (first 8 rows)
How It Works
- The CSV is fetched from a public GitHub Gist RAW URL.
- The CSV text is parsed into structured data using D3.
- Summary statistics are computed.
- Platform frequency counts are aggregated.
- An SVG bar chart is rendered dynamically.
Technical Learning Objectives
This project demonstrates:
*-Client-side data loading from remote sources *-Data parsing and transformation *-Aggregation using D3 utilities *-Basic SVG chart construction *-Dynamic DOM updates
Author
Saiteja