Skip to main content
SimilarExport ZIP
100%

Fork of D3 Starter barrr

✓ Published0🌍 Public
Kkanaparthieshitha@gmail.com
Last edited Mar 8, 2026
Created on Mar 8, 2026
Forked from D3 Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Hello HTML

This bar chart visualizes daily step counts over a 120-day period, with each bar representing one day and its height corresponding to the number of steps taken. The chart includes labeled axes for day and steps, plus a title, and uses axis ticks only for every tenth day to reduce clutter. The visualization loads CSV data via `d3.csv` from a GitHub gist, then uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Bars are drawn as SVG rectangles using D3 v7's data join, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

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

Fork of D3 Starter

This bar chart visualizes the popularity scores of 120 athletes, sorted in descending order, with truncated tick labels and a sampled axis to manage the dense categorical axis. Built with D3 v7, it loads CSV data via `d3.csv` and `d3.autoType`, then uses `d3.scaleBand` and `d3.scaleLinear` to map names and scores. The SVG output is rendered using `d3.select`, `join`, and axis generators like `d3.axisBottom` and `d3.axisLeft`. Tooltips are added via SVG `<title>` elements, and the chart includes clear axis titles and a main heading.

Ssarasaketh3@gmail.com
82% match
Loading thumbnail…

Fork of bar D3 Starter

This bar chart visualizes product sales values from a CSV dataset, with each bar representing a product and its height corresponding to the sales figure. The chart includes axis labels, a title, and interactive hover effects that display a tooltip and change the bar’s color. Built with D3.v7, it uses `d3.csv` to load the data, `d3.scaleBand` and `d3.scaleLinear` for scales, and `d3.axisBottom`/`d3.axisLeft` for axes, all rendered as SVG within a styled HTML page.

119h61a05c9@cvsr.ac.in
82% match
Loading thumbnail…

Fork of D3 Starter

This example presents a bar chart of website engagement metrics from a CSV file, showing the number of views for each page path. The chart uses D3 version 7 to create a linear x-axis scale for view counts and a banded y-axis for page names. Users can toggle individual bars on and off using checkboxes rendered alongside a list of the data points. The visualization renders with SVG and derives its data dimensions from the imported `csv` and `scaleBand` functions.

Iindira-antgrvty
81% 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
81% match
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a basic bar chart using D3 version 7, with data loaded from a CSV file containing yearly values. The visualization renders an SVG with a band scale for the x-axis and a linear scale for the y-axis, displaying bars for each year. The code uses `d3.csv` to asynchronously load the dataset, then applies `d3.axisBottom` and `d3.axisLeft` to generate labeled axes. The y-axis ticks are formatted with a dollar sign prefix, and bars are drawn as `rect` elements sized by the scales.

BBastien Golomer
80% match
Loading thumbnail…

Fork of ice 6 bar

This bubble chart from the D3.js gallery displays the relationship between daily step count ranges and workout intensity levels, using point color to indicate whether calorie burn is high or low. The visualization plots one point per unique combination of the three categorical variables, derived from a fitness activity dataset. The code uses `d3.csv` to load the data, `d3.scalePoint` for positioning on discrete axes, and `d3.scaleOrdinal` for color encoding. Custom category logic bins steps, workout minutes, and calories into defined groups, while D3's SVG rendering provides the axes, labels, and legend.

Kkanaparthieshitha@gmail.com
80% match