Fork of Fork of ECharts

100%

Fork of Fork of ECharts

✓ Published0🌍 Public

Last edited Mar 18, 2026

Created on Mar 18, 2026

Forked from Assignment 3 - Race Line Chart

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of ECharts 2

A single-axis scatterplot shows one user's hourly step counts and total intensity across Tuesday hours for one week, using ECharts 5.3.2. Each point’s x-position is the hour, and the symbol size encodes step total. The chart filters a CSV dataset of Fitbit activity to a hard-coded user ID and date range, then maps intensity values to point size. Data is loaded via `fetch` and parsed manually, with chart configuration built from `title`, `singleAxis`, and `series` arrays.

TTony Mai

79% match

Loading thumbnail…

Assignment 3 - Race Line Chart

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.

TTony Mai

78% match

Loading thumbnail…

Fork of test

This workbench visualizes Fitbit user activity and sleep data, showing how daily metrics like step count, active minutes, and sleep efficiency cluster together. Users can toggle between different metrics and clusters to explore relationships in daily behavioral patterns. The interface uses D3.js v7 to render interactive SVG charts, including scatter plots and bar charts, alongside summary cards for key statistics. Data is parsed from a CSV file containing daily activity logs for multiple users, with filtering options for individual participants.

TTony Mai

77% 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

75% match

Loading thumbnail…

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

This chart visualizes the sleep duration of 17 individuals as a smooth area graph, with the filled region emphasizing the distribution of hours per person. The SVG rendering is built using D3 v6, employing `d3.scalePoint`, `d3.scaleLinear`, `d3.area`, `d3.line`, and `d3.curveMonotoneX` to generate the shaded area and its boundary line. Custom CSS styles the area and line, while `d3.axisBottom` and `d3.axisLeft` produce rotated and labeled axes for the categorical names and numerical hours.

VVignesh Nallamothu

75% match

Loading thumbnail…

Fork of 3D Scatter Plot

This fork of a 3D scatter plot visualizes sleep metrics from a CSV dataset, plotting sleep duration, sleep efficiency, and deep sleep percentage as points in three-dimensional space using the Plotly.js library (specifically the `Plotly.newPlot` API). Two overlapping marker traces render the same data with differing color schemes, line styles, and opacities, creating a contrast between highlighted and muted points. The visualization loads its data via `d3.csv` from a remote GitHub Gist and embeds the chart in a simple HTML page with a zero-margin layout, focusing purely on the interactive 3D representation.

SsreepavanKothapalli

74% match

Loading thumbnail…

FitBit Sleep data part - I

This visualization overlays seven nights of FitBit heart-rate data as a multi-series line chart, showing minute-by-minute heart-rate fluctuations during sleep from May 18-24, 2016. Each night is a distinct colored line, plotted over time on the x-axis (hours:minutes:seconds) with beats per minute on the y-axis, revealing patterns like elevated heart rates and nightly variation. The code uses the nv.d3 library's `lineChart` model built on d3.v3, loading CSV data via `d3.csv` and parsing times with `d3.time.format` to construct the series for display with interactive guidelines and tooltips.

JJverma

74% match

Loading thumbnail…

Fork of blood pressure

This visualization shows the relationship between age and sleep duration for a group of individuals, with each person represented as a point on a scatterplot and connected by a smooth line. The chart uses D3.js v5 to load CSV data from a GitHub gist, parse the numeric fields, and render the SVG visualization. It employs `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.line` with `curveBasis` to create the curved trend line. The line is styled in maroon with a thick stroke, while gridlines and axis labels are formatted with custom CSS. The data source is a public dataset on sleep health and lifestyle.

Bbhavana.bayyapu@gmail.com

73% match