Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Saiteja_ICE5

Public visualization

Viewing a saved revision (read-only)

8c7398676db140258703db05f814af63

Saiteja_ICE5

0 stars0🌍 Public
Ssaitejak1619@gmail.com
Last edited Mar 7, 2026
Created on Feb 28, 2026
Forked from D3 Starter

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 description

Yes — 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

  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:

*-Client-side data loading from remote sources *-Data parsing and transformation *-Aggregation using D3 utilities *-Basic SVG chart construction *-Dynamic DOM updates


Author

Saiteja