Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Activity7:Question:2

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

615a47a52b1a47e189da1c6e0f6a6b0b

Open

Activity7:Question:2

0 stars0🌍 Public
Ssaivaishnogaruda@gmail.com
Last edited Nov 4, 2024
Created on Nov 4, 2024

This visualization shows mobile usage hours per month using a red-filled area chart with points across six months from January to June. The chart is rendered on an HTML canvas using Chart.js, with the line chart type configured to fill the area beneath the curve using a semi-transparent background. The example also includes a second version that fetches CSV data from a GitHub gist and parses it to generate a similar chart with teal coloring. Both versions label the x-axis as months and the y-axis as hours.

AI-generated description

Mobile Usage Behavioral Analysis - Area Chart Visualization with D3.js

This project visualizes mobile usage data over time using an area chart, rendered with D3.js.

Dataset Description

The dataset chosen is Mobile Usage Behavioral Analysis, containing the following attributes:

  • Date (string): Represents the date in "YYYY-MM-DD" format.
  • Usage_Hours (numerical): Represents the number of hours spent on mobile devices each day.

The data types:

  • Date is parsed as a JavaScript Date object.
  • Usage_Hours is parsed as a float for accurate plotting.

Dataset Link

The dataset is fetched from the following URL: Mobile Usage Behavioral Analysis CSV

Visualization Analysis

The area chart shows mobile usage over time, with the X-axis representing dates and the Y-axis representing daily usage hours. Peaks in the chart indicate days with higher mobile usage, providing insights into user behavior patterns. This visualization helps identify trends and fluctuations in daily mobile usage.

Usage Instructions

  1. Clone or open this project in VizHub.
  2. Ensure an active internet connection to load D3.js and the CSV data.
  3. Run the visualization to see the area chart rendered with D3.js.

Project Files

  • index.html: HTML structure for the visualization.
  • style.css: Basic styling for the chart.
  • index.js: Fetches and parses the CSV data, then calls the chart function.
  • areachart.js: Contains the D3.js area chart creation code.

Submit screenshots of the final generated visualization, and [provide the VizHub link here].