Fork of Refactored Bar chart with React & D3

100%

Fork of Refactored Bar chart with React & D3

✓ Published0🌍 Public

Last edited Feb 18, 2026

Created on Feb 18, 2026

Forked from Refactored Bar chart with React & D3

This example shows a horizontal bar chart of country populations for the year 2020, sourced from the UN Population 2019 dataset. Rendered as SVG via React components, it uses d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis, with separate AxisBottom, AxisLeft, and Marks components. The code loads data asynchronously with d3.csv and slices the first ten entries, while the axes and bars are generated using React’s map function and JSX.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Refactored_bar_chart

This bar chart displays the 2020 population estimates for ten countries, using horizontal bars ordered by country name. The visualization is built with React and D3 v7, where `d3.scaleBand` positions the categorical y-axis and `d3.scaleLinear` maps population values to bar widths. SVG rectangles are rendered through the custom `Marks` component, with axes generated by `AxisBottom` and `AxisLeft`. The data originates from a CSV file of UN Population 2019 data, loaded asynchronously and processed to extract the 2020 values.

Ssagar limbu

92% match

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of population data for the top 10 countries in 2020, using React to render SVG elements. It fetches the UN Population dataset via `d3.csv`, then uses `scaleBand` and `scaleLinear` from D3 v7 to map country names and population values to screen coordinates. The chart is composed of three reusable React components for the bottom axis, left axis, and the bars themselves, with each axis tick and bar generated as separate SVG elements. The visualization demonstrates a modular, component-based approach to building D3 charts within a React framework.

GGabriel Dias Menezes

92% match

Loading thumbnail…

Fork of Refactored Bar Chart

This example visualizes the top 10 most populous countries as horizontal bars, using SVG rendering within a React app. The chart displays population values against country names, with no axes initially, though it includes bottom and left axis components built from D3 scales. Data comes from the UN World Population Prospects 2019 CSV, loaded via `d3.csv`. The code uses React hooks (`useState`, `useEffect`) and D3 v5 functions like `scaleBand` and `scaleLinear` to position marks and axes, with all rendering handled by React elements.

KKRITIKA RAI DWIVEDI

92% match

Loading thumbnail…

Fork of Refactor Bar Chart woth React & D3

This visualization presents a horizontal bar chart of the ten most populous countries, sourced from the UN’s 2019 population dataset, using React to manage the component structure and D3’s `scaleBand` and `scaleLinear` to compute the layout. The code renders bars as raw SVG `<rect>` elements, with axes generated as SVG `<line>` and `<text>` elements via custom `AxisBottom` and `AxisLeft` components. Data loading is handled through a custom `useData` hook that fetches and parses the remote CSV file with D3’s `csv` function.

Bbassra

91% match

Loading thumbnail…

Refactored Bar Chart

This example presents a horizontal bar chart of country populations using React components to structure the visualization. The chart loads data from a CSV file containing 2020 UN population estimates, slicing the dataset to show the top ten countries. D3 v5 utilities handle data parsing and scale generation, with `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Each bar’s width corresponds to the population value, rendered as SVG rectangles within a React component hierarchy, with separate component files managing the axes and marks.

TTroy Marchesseault

91% match

Loading thumbnail…

Fork of Refactored Bar Chart

This example displays a horizontal bar chart of the top 10 most populous countries using React and D3 v5. The bars are rendered as SVG rectangles, with the x-axis showing population values and the y-axis listing country names. Data comes from the United Nations World Population Prospects 2019 CSV, loaded via d3.csv. The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, with custom React components for the axes and marks.

SSpuddy2884

91% match

Loading thumbnail…

Fork of Refactored Bar Chart

This example displays the top 10 most populous countries as horizontal bars, using React for component structure and D3 v5 for scales and data loading. The chart renders as SVG, with `d3.scaleBand` positioning categorical country labels on the y-axis and `d3.scaleLinear` mapping population values to bar widths. Axis components (`AxisBottom`, `AxisLeft`) draw tick marks and labels from the scales, while `Marks` generates each rectangle. Data comes from the United Nations World Population Prospects 2019 CSV, loaded asynchronously with D3’s `csv` function.

KKIRRAN P L

91% match

Loading thumbnail…

Fork of Refactored Bar Chart

This example displays the top 10 most populous countries as horizontal bars using React and D3 v5. It loads UN World Population Prospects 2019 data via d3.csv, sorts by 2020 population, and renders SVG rectangles with d3.scaleBand, d3.scaleLinear, and d3.max. The component structure separates axis and mark rendering into reusable functions, with d3.ticks generating the bottom axis labels and scaleBand domains for the left axis.

RReymond Mesuga

91% match