Fork of CV: Bar Chart

100%

Fork of CV: Bar Chart

✓ Published0🌍 Public

Last edited Mar 9, 2026

Created on Mar 9, 2026

This example displays a bar chart of country populations, where each bar is initially black. Clicking a bar turns it white with a black stroke, visually selecting it. The chart is built with React and D3 v7, using D3’s `scaleBand` and `scaleLinear` for axes, and SVG rendering. Data loads from a CSV file, and bar interactions trigger re-renders with updated styling.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of CV: Bar Chart

This interactive bar chart displays the population of ten countries using SVG rectangles rendered through a React component. The visualization uses d3.scaleBand and d3.scaleLinear to map country names and population values to x and y positions, with d3.axisBottom and d3.axisLeft generating the axes. Population data loads from a CSV file via d3.csv, and clicking a bar highlights it with a white fill and black stroke. The chart updates dynamically through a ResizeObserver that tracks container dimensions, while d3 joins manage bar and axis rendering.

Cchenyuguo851@gmail.com

87% match

Loading thumbnail…

Fork of Fork of data visulization

This example shows a horizontal bar chart of country populations, using bar length to encode population values and vertical position to encode country names. The visualization renders as SVG with steel-blue bars and axes, drawing from a CSV file that is loaded asynchronously and preprocessed by multiplying population values by 1,000. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `max` within a React context, though the primary rendering is handled directly with D3 selections and SVG elements.

Yyingzhe-z

85% match

Loading thumbnail…

Fork of data visulization

This bar chart displays the populations of 335 country codes, where each bar's length corresponds to the population value. The visualization uses D3.js v6 within a React framework to render the data as SVG. The code loads data from a CSV file, scales the population values (multiplied by 1000), and uses `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Axis labels are generated using `axisLeft` and `axisBottom`, while the bars themselves are appended as SVG rectangles.

HHarsh Patel

85% match

Loading thumbnail…

Fork of d3js

This example renders a horizontal bar chart of country populations using a React-free HTML page. It loads data from data.csv via `d3.csv`, then scales the values by 10 million. The visualization uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` to draw the axes. Bars are appended as SVG `rect` elements within a grouped `<g>` transform, with height set by `yScale.bandwidth` and width proportional to population.

BBloodmark

85% match

Loading thumbnail…

Fork of bar chart with react and d3

This fork of a bar chart combines React and D3 to visualize population data for the top ten countries, loaded from a CSV file via a Gist URL. The SVG rendering uses D3's `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and `max` to determine the domain. React manages the data state, displaying a "Loading..." message until the CSV is parsed. Both x-axis gridlines with tick labels and y-axis country labels are drawn using SVG elements within a transformed group.

Mmeghshah612

84% match

Loading thumbnail…

Fork of bar_char 2

This example visualizes the population of ten countries in 2020 using horizontal bars in an SVG rendered by React. It loads data from a CSV file via D3’s `csv` utility, parses the population column, and stores it in React state. A D3 `scaleBand` positions each country along the y-axis, while a `scaleLinear` maps population values to bar widths, with margins applied to the chart layout.

TTanupat B.

84% match

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays population values for various countries using a horizontal layout with colored bars. It loads CSV data from an external gist URL using D3’s `csv` utility, then applies `scaleLinear` and `scaleBand` to position bars and axes. React components render the SVG elements, including custom axes and marks, with D3’s `max` and `format` functions handling data scaling and tick label formatting. The chart includes a loading state and applies a Poppins font from Google Fonts.

TTousifAhamed

84% match

Loading thumbnail…

Fork of Refectoring a Bar Chart

This visualization displays the population of ten countries as a horizontal bar chart, rendered as SVG elements within a React application. The chart uses D3 scales (`scaleBand` and `scaleLinear`) to map country names and population values to screen coordinates, while React components like `AxisBottom`, `AxisLeft`, and `Marks` manage the rendering of axes and rectangles. Data is loaded asynchronously from a CSV file using D3’s `csv` utility, with population values parsed from the 2020 column.

TtrwMK

83% match