Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Ddeepshikathakur111@gmail.com
Last edited Mar 29, 2026
Created on Mar 29, 2026
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

A dark-themed dashboard loads a local CSV file via D3 v7, summarizes the data into three key performance indicators, and renders a bar chart of a selected numeric column. The SVG visualization uses D3 scales, axes, and a linear gradient fill for the bars. The page includes a file picker, controls for selecting columns, and a fixed 420-pixel chart area.

MManeesh Kumar
83% match
Loading thumbnail…

Fork of Fork of Hello HTML

This example loads a fitness activity CSV file using the Fetch API and parses it with `d3.csvParse`. It displays file size, row and column counts as badges, previews the first five rows in an HTML table, and renders a simple bar chart of Calories Burned by Day in an SVG element using D3 v7. The visualization summarizes the dataset’s structure and offers a basic visual comparison of activity values.

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

Fork of Fork of HTML Starter

This example presents a health data visualization comprising three charts: a bar chart of Var1, a line chart showing Var2 over time, and a pie chart of Var3. It loads CSV data from a GitHub gist and uses D3.js v7 to render SVG elements. The bar chart maps data points to horizontal bars, the line chart uses scales and a line generator to plot the time series, and the pie chart uses `d3.rollups` to aggregate categories. The code includes axes and margin conventions for the line chart.

Aakhilakura@my.unt.edu
83% match
Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example shows the calorie distribution of various foods using a pie chart, with a legend displaying each food's name and calorie count. It loads a CSV dataset from a GitHub gist using D3's `csv` function and renders the chart as SVG. The code uses `pie()` to compute arc data, `arc()` to generate the path segments, and `scaleOrdinal()` to assign categorical colors. Text labels and legend entries are added with `select()` and `append()`, while `format('.4~g')` formats the calorie values in the legend.

Mmounishnaidu96@gmail.com
83% match
Loading thumbnail…

Fork of D3 Starter

This dashboard displays four coordinated D3.js (v7) visualizations of company performance: a reusable scatter plot mapping sales against profit with point size encoding expenses, a pie chart of annual sales share, and line and area charts showing sales over time. The data is loaded from a remote CSV file and parsed with `d3.csv`, using `d3.timeParse` to decode month-year strings. All charts render as SVG and include a tooltip implemented with `d3.select`, while axes are generated via `d3.axisBottom` and `d3.axisLeft`, with scales built using `d3.scaleLinear` and `d3.scaleSqrt`.

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

Fork of HTML Starter

This pie chart visualizes expense categories and their corresponding values from a CSV dataset. Using D3.js v7, the chart generates colored slices with SVG paths via `d3.pie()` and `d3.arc()`, with white labels positioned at arc centroids. A legend constructed with SVG rectangles and text displays each category alongside a color scale based on `d3.scaleOrdinal` and `d3.schemeCategory10`. The data is loaded asynchronously with `d3.csv`.

YYamini Malikireddy
81% match