Skip to main content
SimilarExport ZIP
100%

test

✓ Published2🌍 Public
DDaniel Z
Last edited Apr 25, 2026
Created on Apr 21, 2026
Forked from React & D3 Starter

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.

AI-generated description

Fitbit Behavioural Analysis Workbench

This workspace contains a self-contained D3 dashboard in index.html plus demo CSV files that match the Fitbit-style daily schema.

How To Use

Open index.html in a browser. If the bundled CSV does not load because the browser blocks local file requests, use the Data CSV file picker and select the CSV file in this folder.

References

These references are directly related to the code patterns, APIs, and chart types used in index.html.

Core D3 APIs Used Directly

Browser And SVG APIs

Similar Code And Interaction Examples

Statistical And Modeling References

MIT Licensed

Similar vizzes

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

group 9 bar and scatter plot

This interactive dashboard displays health metrics through four charts: a scatter plot of sleep duration versus sweet food intake colored by age group, a bar chart of average heart rate by consumer type, a pie chart showing cholesterol levels by alcohol intake, and box plots of heart rate grouped by sleep disorder and meat intake. Built with D3 v7, the charts use d3.scaleLinear, d3.scaleBand, d3.pie, and d3.quantile, with dropdown filters and tooltips. Data loads from a TSV file via d3-fetch, and all visualizations render as SVG with animations.

Llakshmisurekhamaddukuri@my.unt.edu
75% 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
74% match
Loading thumbnail…

Multi Line Plot

This multi-line chart visualizes daily fitness trends—steps, calories burned, and average heart rate—over a 150-day period. The data is loaded from a CSV via `d3.csv` and rendered as three overlaid lines, each scaled to a common y-axis using fixed multipliers. The visualization uses D3 v7's `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators, with an SVG grid and legend, to compare the metrics' daily evolution.

Ssivaniammisetti2002@gmail.com
74% match
Loading thumbnail…

Fitness Data Reusable Scatter Plot

This reusable scatter plot visualizes fitness tracking data, plotting relationships between calorie intake, protein intake, and mental wellbeing scores from a CSV dataset. The chart uses D3 v7 to render SVG circles with configurable axes, margins, and data accessor functions. The code demonstrates a modular chart factory pattern with setters for width, height, and value fields, allowing users to easily swap which metrics appear on each axis. Axis labels update dynamically based on the selected fields, while steelblue semi-transparent points highlight distribution patterns without animation.

Ssanthoshdachepally333@gmail.com
73% match
Loading thumbnail…

multi line

This multi-series line chart displays fitness activity trends over 160 days, comparing steps count, calories burned, and workout minutes on a single scaled y-axis. Built with D3.js v7, the visualization renders three distinct colored lines—purple, blue, and green—from a CSV dataset, with data points filtered to every tenth day for clarity. The SVG output includes axis labels, a legend, and gridlines, using D3's linear scales and line generators. Steps and workout minutes are normalized to align with calorie values.

Kkanaparthieshitha@gmail.com
73% 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
73% match
Loading thumbnail…

Fork of HTML Starter

This fitness dashboard presents three coordinated D3.js (v7) charts built from CSV data. A reusable scatter plot maps workout minutes against calories burned, with point colors encoding intensity levels. The page also includes a pie chart showing total calorie distribution by intensity and a line chart tracking daily calorie trends. The implementation uses `d3.csv()` to load data, `d3.scaleLinear` and `d3.scaleOrdinal` for scales, `d3.axisBottom` for axes, `d3.pie()` and `d3.arc()` for the pie, all rendered as SVG elements.

Ddeepshikathakur111@gmail.com
72% match