Skip to main content
SimilarExport ZIP
100%

Assignment 3 - Race Line Chart

✓ Published2🌍 Public
TTony Mai
Last edited Mar 27, 2026
Created on Mar 18, 2026
Forked from ECharts

This visualization displays the total minutes asleep per day for the top five users with the highest overall sleep totals from the `sleepDay_merged.csv` dataset. Each user is represented by a distinct line, with end labels identifying the user ID at the right edge of the chart. The code uses the ECharts library, loading data via `fetch` and processing it to compute aggregate totals, filter the top five users, and configure line series with dataset filters and transforms. The chart includes a tooltip ordered by value and a title indicating the metric shown.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ECharts

This example visualizes cumulative minutes asleep for the top 23 users from a Fitbit sleep dataset, shown as multiple line series over time. Each line represents a user’s running total of sleep minutes, with end labels displaying user IDs and emphasis focusing on individual series on hover. Built with ECharts 5.3.2, the code loads a local CSV via `fetch`, parses rows to aggregate daily sleep records by user, and uses `myChart.setOption` to configure line charts, tooltips, legends, and an animated rendering with a 10-second duration.

TTony Mai
78% match
Loading thumbnail…

Assignment 3

This visualization compares average screen time, sleep hours, and GPA across six student groups using a combined bar and line chart. Gray bars represent average screen hours, while blue, green, and red lines depict trends for screen time, sleep, and GPA, respectively. The chart uses D3’s `scaleBand` for categorical x-axes, `scaleLinear` for the y-axis, and `d3.line` to connect summary points. Data is loaded from a CSV via `d3.csv`, grouped into six slices, and aggregated with `d3.mean` to compute group averages.

Eeeshani.boyapati@gmail.com
69% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Reusable D3 Scatter Plot

A line chart shows sleep duration in hours for 17 named individuals, with each name on the x-axis and duration from 0 to 9 on the y-axis. The SVG visualization uses d3.scalePoint for the categorical x-axis, d3.scaleLinear for the numeric y-axis, and d3.line to generate the path connecting data points. Axes are rendered with d3.axisBottom and d3.axisLeft, with rotated bottom labels for readability. The chart's static dataset lists names and sleep durations directly in code, styled with steelblue strokes and labeled axes.

Bbhargavinalamothu@gmail.com
67% match
Loading thumbnail…

barplot

This bar chart visualizes sleep duration for individuals, with each bar representing a person’s name and the bar height corresponding to their hours of sleep. The visualization uses d3.csv to load data from a remote ICE5dataset, d3.scaleBand for the x-axis categories, and d3.scaleLinear for the y-axis. Bars are rendered as SVG rectangles with a hover effect that changes their fill to orange via d3.select, while d3.axisBottom and d3.axisLeft generate the labeled axes.

VVignesh Nallamothu
67% match
Loading thumbnail…

Assignment task 2

This scatter plot visualizes the relationship between screen hours and sleep hours for individual students, with each point colored by GPA using a sequential plasma scale. The visualization loads CSV data from a GitHub gist via `d3.csv`, then renders circles in an SVG container. It uses `d3.scaleLinear` for both axes, `d3.scaleSequential` with `d3.interpolatePlasma` for color encoding, and includes gridlines, axis labels, and an interactive tooltip that displays RollNo, screen hours, sleep hours, and GPA on mouseover/mousemove. Axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Eeeshani.boyapati@gmail.com
66% match
Loading thumbnail…

Combined Chart

This combined chart displays average study hours as bars and average exam scores as a line, grouped by sleep-hour bins. It uses `d3.rollups` to aggregate the CSV data and a dual-axis layout with an SVG render. The chart is built with D3 v7, featuring flexible column detection and dark-themed styling.

RRamdas Dheeraj
66% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Reusable D3 Scatter Plot

This chart visualizes the sleep duration in hours for a list of seventeen named individuals, with each name plotted along the x-axis and its corresponding duration on the y-axis. A single steelblue line connects the data points to reveal the variation across the group. The visualization is built with D3.js v6, using `d3.scalePoint()` for the categorical name axis and `d3.scaleLinear()` for the numeric duration axis. The line is generated with `d3.line()` and rendered as an SVG path, with rotated x-axis labels for readability.

VVignesh Nallamothu
66% match
Loading thumbnail…

Fork of Assignment 5 - Prototype 2

This interactive scatter plot visualizes the relationship between sleep duration and stress level, with individual data points colored by gender. The visualization, built with React and D3 v7, loads data from a Kaggle CSV file and renders an SVG chart. It includes axes with labels, a legend, and per-gender dashed trend lines computed via least-squares regression. Tooltips display detailed information about each person’s ID, gender, sleep duration, stress level, and sleep disorder. The chart employs D3’s `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` functions for scaling and axes, with `schemeTableau10` providing the color palette.

Ccsabavath@wpi.edu
65% match