Fork of React & D3 Vibecoding Starter

100%

Fork of React & D3 Vibecoding Starter

✓ Published0🌍 Public

Last edited Sep 3, 2025

Created on Sep 3, 2025

Forked from React & D3 Vibecoding Starter

A dual-axis bar chart compares varicella vaccination and case rates across five South American countries in 2020, using a CSV dataset. The visualization is built with React and D3 v7, combining `scaleBand` and `scaleLinear` for positioning. The same chart includes interactive bars that toggle a country's highlight, a rotated x-axis for country labels, and a title rendered in Spanish, all coordinated through a custom `main` function and React state.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Relación entre vacunación contra la varicela y casos en Bolivia, Chile y Perú (2020)

This bar chart visualizes letter frequency data from a CSV file, plotting categorical values along the x-axis against their corresponding counts on the y-axis. Built with React 19 and D3 v7, the visualization uses `d3.scaleBand` and `d3.scaleLinear` for data mapping, with `d3.axisBottom` and `d3.axisLeft` generating labeled axes. An Unsplash background image renders behind the chart with partial opacity, while interactive bars respond to clicks, dimming non-selected elements and recoloring the active bar.

Kkiruthika.jk@kpriet.ac.in

82% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays a horizontal bar chart of COVID-19 case counts for the top 20 countries, using a bar length to encode population values. The chart is built with React and D3 v5, where D3’s `scaleBand` and `scaleLinear` define the y- and x-axes, and React renders SVG `rect` marks for each bar with gridlines and tick labels. Data is loaded from a CSV file via `d3.csv`, with numeric parsing applied to the case count column.

Bblikitha

81% match

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the top 20 countries by reported COVID-19 cases, using horizontal bars to compare values. The visualization loads CSV data via `d3.csv` and slices the first 20 rows, with React managing state and rendering SVG elements. Scales are created using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, with axis ticks manually generated and mapped to React components. Each bar is drawn as a `rect` element, with the x-axis grid lines and tick labels rendered as SVG `line` and `text` elements.

Bblikitha

81% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows a horizontal bar chart of the top 10 countries by active COVID-19 cases, with a blue grid and labeled axes. The visualization is built using React and D3 v5, where D3’s `scaleBand` and `scaleLinear` determine bar positions and lengths, while React renders the SVG elements. Data is loaded asynchronously from a CSV file using D3’s `csv` method, and the chart updates once the data arrives.

RRavi Teja Bonam

81% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows a horizontal bar chart of COVID-19 cases by country, displaying the top 20 countries based on population. The visualization uses React to manage state and render SVG elements, while D3 v5 handles data loading via `d3.csv` and scales with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The chart renders tick marks, labels, and rectangular bars directly as JSX components, with data sourced from a CSV file hosted on GitHub.

81% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart visualizes the top 20 countries by confirmed COVID-19 cases, using horizontal bars to compare population metrics. The visualization is built with React and D3 v5, leveraging `d3.csv` to load the dataset and `d3.scaleBand`/`d3.scaleLinear` for axis scaling. SVG elements are rendered declaratively through React, with `rect` marks for bars and text grids for tick labels, displaying both chart axes and data directly from the raw CSV file.

AArefa Patwary

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

81% match

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This interactive data visualization displays the top 10 most populous countries using a bar chart, with data sourced from a COVID-19 CSV dataset. Built with React and D3 v5, the code implements `scaleBand` and `scaleLinear` for chart axes and `csv` for data loading. It employs an SVG rendering approach, alongside a 3D bar chart visualization created with the d3-x3d library, which is initialized via `d3.x3d.chart.barChartMultiSeries()` to render the multi-series data.

RRavi Teja Bonam

80% match