Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Vibecoding Starter

✓ Published0🌍 Public
Ssarasaketh3@gmail.com
Last edited Oct 20, 2025
Created on Oct 20, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of React & D3 Vibecoding Starter

This is an interactive bar chart that visualizes the frequency of letters in a dataset loaded from a local CSV file. The chart uses SVG bars with rounded corners and a color gradient, where clicking a bar toggles a selected state that highlights the bar and dims others. Built with React and D3 v7, it uses `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to create the scales and axes, with a `ResizeObserver` in a custom `useDimensions` hook to make the visualization responsive.

Aankitgoudpoodhari07@gmail.com
84% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

A static bar chart displays letter frequencies from a CSV file, with bars in teal that highlight and dim upon selection. Built with React and D3 v7, it uses `scaleBand` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks and gridlines, and a `ResizeObserver` to adapt the SVG to container dimensions. Clicking a bar toggles its selected state, which adjusts fill color and opacity.

BBHUMIKA CHUNDU
84% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

A static bar chart displays letter frequencies from a CSV file, with bars in teal that highlight and dim upon selection. Built with React and D3 v7, it uses `scaleBand` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks and gridlines, and a `ResizeObserver` to adapt the SVG to container dimensions. Clicking a bar toggles its selected state, which adjusts fill color and opacity.

BBHUMIKA CHUNDU
84% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This bar chart displays the frequency of letters from a CSV data source, with bars that can be clicked to highlight or dim selections. The visualization uses React 19 to manage state and render the UI, while D3 v7 handles the SVG rendering, scales, axes, and bar elements. The chart includes interactive features such as hover effects and click-to-select, with smooth CSS transitions on bar fill and opacity. Data loading uses D3's `csv` parser, and the SVG is drawn with responsive dimensions tracked via a `ResizeObserver`.

NNita
83% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This bar chart displays the frequency of letters from a CSV data source, with bars that can be clicked to highlight or dim selections. The visualization uses React 19 to manage state and render the UI, while D3 v7 handles the SVG rendering, scales, axes, and bar elements. The chart includes interactive features such as hover effects and click-to-select, with smooth CSS transitions on bar fill and opacity. Data loading uses D3's `csv` parser, and the SVG is drawn with responsive dimensions tracked via a `ResizeObserver`.

NNita
83% match