Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published1🌍 Public

Last edited Oct 20, 2025

Created on Oct 20, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

A bar chart displays athlete popularity scores for the top 120 athletes, sorted in descending order, with a teal fill and hover highlighting. The visualization creates an SVG using D3 v7, employing `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with axes generated via `d3.axisBottom` and `d3.axisLeft`. Ticks are sampled every eighth entry and truncated to 12 characters. Data is loaded from a CSV file and rendered with tooltips.

Ssarasaketh3@gmail.com

88% match

Loading thumbnail…

Fork of ICE 6

This visualization displays the popularity scores of the top 120 athletes as a horizontal bar chart, with athletes sorted in descending order and sampled x-axis ticks to manage label clutter. It uses D3 v7 APIs including `scaleBand` for the categorical axis, `scaleLinear` for the score range, and `axisBottom` and `axisLeft` for tick generation. Data is loaded from a remote CSV file via `d3.csv` with `d3.autoType` coercion, and bars are rendered as SVG rectangles with tooltips showing each athlete’s name and score.

Ssarasaketh3@gmail.com

87% match

Loading thumbnail…

Fork of BAR CHART

This horizontal bar chart shows the top ten athletes by popularity score, with rounded bars colored on a teal gradient to rank them from most to least popular. Exact popularity values appear beside each bar, while a light striped background and gridlines aid comparison. The visualization loads a CSV dataset from a GitHub gist and sorts it with d3.descending before slicing the top ten records. It uses d3.csv, d3.autoType, d3.scaleLinear and d3.scaleBand, and renders axes and labels via d3.axisBottom, d3.axisLeft, and SVG text elements.

Ssarasaketh3@gmail.com

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

83% match

Loading thumbnail…

Fork of HTML Starter

This visualization summarizes student and sports data from a CSV file, displaying key statistics such as total student count, unique favorite subjects, and the top team. It presents these findings in a simple SVG bar chart that shows team counts, with axes labeled using D3's `d3.axisBottom` and `d3.axisLeft`. The data is loaded via `d3.csv` and processed using `d3.rollups` and `d3.scaleBand`, resulting in an accessible chart with a summary section and rotated x-axis labels for readability.

SSYAM TEJ

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

81% match

Loading thumbnail…

Fork of D3 Starter

This pie chart visualizes the distribution of runs scored by individual cricket players, with each slice labeled by player name and colored via an ordinal scale. The chart is rendered as an SVG using D3.js v7, fetching CSV data from a GitHub Gist and parsing it with `d3.csvParse`. A `d3.pie` layout computes slice angles, while `d3.arc` generates the path geometry, and an interactive tooltip appears on hover for additional detail.

Ssdarsi2404@gmail.com

81% match

Loading thumbnail…

Fork of D3 Starter

This example creates a static bar chart visualizing food-related data from an external CSV file. It uses D3 v7 scales and axes—`d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`—to map years and values, with y-axis labels formatted as dollar amounts. The chart is drawn inside an SVG with a fixed margin, and the data is loaded asynchronously via `d3.csv`. Only the axes are rendered; no bars or other marks are added.

Mmavercikalvin

81% match