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 shows a bar chart of the 30 most populous cities worldwide using React and D3 v7, with population values displayed in millions on the y-axis and city names on the rotated x-axis. The chart renders as SVG and supports interactive selection—clicking a bar highlights it in red. Data loads from a raw GitHub Gist URL and is parsed manually into an array of city-population objects. The visualization builds scales with `d3.scaleBand` and `d3.scaleLinear`, renders axes via `d3.axisBottom` and `d3.axisLeft`, and uses React hooks for container dimensions and state management.

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

86% match

Loading thumbnail…

Fork of Population BarChart (React & D3)

This example shows the ten most populous countries in a horizontal bar chart, ordered by their sales values. The chart uses React for component structure and D3 v5 for data loading and scales, specifically `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The data is fetched as CSV from a GitHub gist, and the SVG rendering displays tick lines, tick labels, and green rectangles for each bar. The visualization centers itself within the viewport and includes a distinct left margin for country labels.

Aarchanagoli@my.unt.edu

84% match

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a horizontal bar chart of the ten most populous countries in 2020, using a bar width proportional to each country’s population. It loads CSV data from a GitHub gist via `d3.csv`, then maps each row’s population string to a number. The React component uses `useState` and `useEffect` to fetch and store the data, while `d3.scaleBand` and `d3.scaleLinear` position and size the rectangles. React renders the final SVG, with each country’s name on the y-axis and its population scaled along the x-axis.

Iisavedalex

84% match

Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This example visualizes the top 10 most populous countries using a horizontal bar chart, with each bar’s length proportional to population. The chart is rendered as SVG using React components, with scales from d3.scaleBand and d3.scaleLinear handling positioning. Axes are custom-built in React, and tooltips are provided via SVG `<title>` elements. Data comes from the UN World Population Prospects 2019, loaded and parsed with d3.csv.

Ssainitish1999

84% match

Loading thumbnail…

Fork of Stylised Bar chart

This horizontal bar chart displays the populations of major US cities in millions, using rectangles whose length encodes value and whose vertical position encodes city. Built with React and D3 v7, the visualization loads data from a remote CSV, applies a linear scale for the population axis and a band scale for the categorical city axis, and includes gridlines, axis labels, and hover opacity effects for readability.

Kkhushburajan2015@gmail.com

84% match

Loading thumbnail…

Fork of refactoring bar chart with react and d3

This interactive bar chart displays population data for ten countries, sourced from a CSV file, using horizontal bars to encode each country's population value. Built with React and D3.js v7, the visualization renders entirely as SVG elements, with the `AxisBottom`, `AxisLeft`, and `Marks` components constructing the tick marks, axis labels, and rectangular bars. The chart uses D3's `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population axis, while React's `useState` and `useEffect` hooks manage asynchronous data loading.

Mmeghshah612

84% match

Loading thumbnail…

Fork of Rendering data with React

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, using D3 utilities to load and scale the data and React to render the SVG bars. The code uses `d3.csv` to fetch population data from a gist, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the quantitative x-axis. Each country is drawn as a React `<rect>` component within an SVG, with bar widths proportional to population values.

Jjiro2017

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