Skip to main content
SimilarExport ZIP
100%

Fork of test

✓ Published0🌍 Public
TTony Mai
Last edited Apr 24, 2026
Created on Apr 23, 2026
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

test

This dashboard presents a multi-view analysis of Fitbit activity and sleep data, with a scatterplot, flow lane, parallel coordinate chart, correlation matrix, and heatmap for exploring multivariate relationships. Users can brush on plots to filter records, select clusters, and upload their own CSV files via a file picker. Built entirely with D3 v7, it leverages the brush API, linear scales, axis generation, data joins, event handling, and categorical color schemes to render interactive SVG visualizations.

DDaniel Z
82% match
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
77% match
Loading thumbnail…

Fork 1

This interactive health dashboard explores relationships between lifestyle factors and health metrics using multiple D3.js v7 visualizations. A scatter plot shows sleep duration versus sweet food intake with jittered points colored by gender, while a bar chart displays average heart rate by consumer type. A pie chart breaks down cholesterol levels across alcohol consumption categories, and an animated box plot filters heart rate distributions by gender with hover tooltips. The dashboard uses `d3.rollups`, `d3.groups`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.pie` with transitions for smooth updates, loading TSV data from a GitHub gist.

Bboinapallyhimaja657@gmail.com
75% match
Loading thumbnail…

Fork of React & D3 Starter

This visualization combines bars and lines to compare daily fitness metrics—calories burned, steps walked, and active minutes—across 150 days. It shows all three trends on a single SVG chart, with steps scaled down to fit the axis. The code uses D3 v7 APIs such as `scaleBand`, `scaleLinear`, `axisLeft`, and `d3.line` to render the chart, while React handles the page setup. Data comes from a CSV file loaded via `d3.csv`, and the rendering uses SVG elements like `rect` and `path`.

Kkarthikpavan1198@gmail.com
74% match
Loading thumbnail…

Fork of Fork 11

This bar chart visualizes the relationship between daily water consumption and average sleep quality, with bars sorted by sleep quality in ascending order. The visualization uses D3.js v7 APIs including `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` to render the SVG chart. Data is loaded via `d3.tsv` from a remote CSV file, then processed with `d3.rollups` to group and average sleep quality by water consumption category. Interactive tooltips appear on hover, displaying the specific water consumption level and corresponding sleep quality score.

Llakshmisurekhamaddukuri@my.unt.edu
73% match
Loading thumbnail…

Fork of React & D3 Starter

This example visualizes daily fitness activity trends over 150 days, comparing steps walked, calories burned, and active minutes as multi-line charts within a single SVG. Using React 19 and D3 v7, it parses CSV data with `d3.csv`, scales values with `d3.scaleLinear`, generates paths with `d3.line`, and renders `d3.axisBottom` and `d3.axisLeft` axes. The visualization includes a title, legend, and styled background, with active minutes scaled 100x for visibility.

Kkarthikpavan1198@gmail.com
73% match
Loading thumbnail…

Fork of Fork 1

This example shows a bar chart comparing average sleep quality across different water consumption levels, with each bar colored by gender. Built with D3.js v7, the visualization loads CSV data from a GitHub gist and aggregates it using `d3.rollups` to compute group means. The SVG rendering includes an ordinal color scale, rotated bottom axis labels, and interactive tooltips that display additional details on mouseover.

Bboinapallyhimaja657@gmail.com
73% match
Loading thumbnail…

Fork of D3 Starter barrr

This visualization displays a horizontal bar chart highlighting the top 10 days with the highest step counts from a 160-day fitness activity dataset. Each bar is colored with a distinct pastel hue and includes a numeric value label at its tip. Built with D3 v7, the code loads CSV data via `d3.csv`, sorts and filters the records, then uses `d3.scaleBand` and `d3.scaleLinear` to position bars and axes. The SVG render includes custom axis labels and a bold title.

Kkanaparthieshitha@gmail.com
73% match