Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Vibecoding Starter

✓ Published0🌍 Public
BBHUMIKA CHUNDU
Last edited Oct 26, 2025
Created on Oct 26, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of React & D3 Vibecoding Starter

A React 19 and D3 v7 bar chart displays letter frequencies from a CSV file, with bars that dim and darken upon selection. The visualization uses a ResizeObserver hook to track container dimensions, d3.scaleBand and d3.scaleLinear for scales, and d3.axisBottom/axisLeft for axes with gridlines. Clicking a bar toggles its highlighted state, which persists through React's useState.

Nnaveenkumar.m@kpriet.ac.in
96% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive bar chart displays letter frequency data from a CSV file, with clickable bars that highlight and dim based on user selection. Built as a React and D3.js integration, it uses `ResizeObserver` for responsive dimensions, `scaleBand` and `scaleLinear` for scales, and `axisBottom`/`axisLeft` for axes with gridlines. The bars feature smooth color and opacity transitions, with a static title and axis labels rendered via D3 selections.

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

Fork of React & D3 Vibecoding Starter

A bar chart displays letter frequencies from CSV data, with clickable bars that highlight selections. Built as a React app using hooks for state management and a ResizeObserver for responsive sizing, the visualization combines D3 v7’s scaleBand and scaleLinear for layout with axisBottom and axisLeft for labeled axes and gridlines. Bars transition colors and opacity on interaction.

Ssayedmhasan110@gmail.com
96% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This bar chart displays the frequency distribution of letters from a small CSV dataset. Built with React and D3 v7, it uses `scaleBand` and `scaleLinear` to position bars along categorical and numeric axes, with `axisBottom` and `axisLeft` rendering ticks and gridlines. Clicking a bar toggles its selection, changing its fill color and dimming others via a `ResizeObserver`. The chart re-renders responsively through React state management and D3’s data join pattern.

NNita
96% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example shows a simple bar chart of letter frequencies from a local CSV file. The bars are interactive, so clicking one toggles its selection, highlighting it in a darker color while dimming the others. Built with React and D3.js v7, it uses a declarative `join` pattern to render the SVG elements, `scaleBand` and `scaleLinear` for the axes, and a `ResizeObserver` in React to make the chart responsive to container size changes.

Ccraftinghermit@gmail.com
95% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example shows an interactive bar chart of letter frequencies from a CSV dataset. The visualization renders seven bars with rounded corners and gridlines, where clicking a bar highlights it and dims the others. Built with React and D3 v7, it uses `scaleBand` and `scaleLinear` for scales, `axisBottom` and `axisLeft` for axes, and a `ResizeObserver` in a custom `useDimensions` hook to handle responsive sizing. D3's data joins update the bars, with click handlers managing selection state through React's `useState`.

Ssaiabhishekmunnangi@gmail.com
95% match