Skip to main content
SimilarExport ZIP
100%

Refactored Fork of Bar chart UN data

✓ Published1🌍 Public
FFlorian Maas
Last edited Feb 25, 2022
Created on Feb 24, 2022
Forked from Bar chart UN data

This example displays a horizontal bar chart of United Nations population data for the top 10 countries. It uses React with D3 v5's `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. The chart is rendered directly as SVG elements, with axes built from D3's tick marks, and it loads its dataset from a CSV file using D3's `csv` function. The visualization maintains a fixed layout.

AI-generated description

Follow the mouse and resize.

MIT Licensed

Similar vizzes

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

Fork of Refactored Bar Chart

This fork of a refactored bar chart displays the top 10 most populous countries from United Nations World Population Prospects 2019 data, rendered as horizontal bars without axes. The React-based SVG visualization uses D3 v5’s `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with dedicated components for left and bottom axes and marks. Data is loaded asynchronously from a CSV file using D3’s `csv` function, and the chart is drawn with SVG `<rect>` elements.

Bbillmccabeusa@hotmail.com
93% match
Loading thumbnail…

Fork of Refactored Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the left and a linear population scale along the bottom. It uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning and scaling. The data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv` and sliced to the first ten rows. Axes are custom components using D3 tick generation.

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

Fork of Refactored Bar Chart

This fork of a refactored bar chart displays the top 10 most populous countries using horizontal bars, with population values on the x-axis and country names on the y-axis. The visualization uses React components with D3 scales, including `scaleBand` for the y-axis and `scaleLinear` for the x-axis, rendering SVG rectangles as marks. Axes are drawn via custom React components that map D3 ticks to SVG elements, with tooltips formatted using D3’s `format` function. Data comes from the United Nations World Population Prospects 2019, loaded as CSV and processed with D3’s `csv` method.

Sseanmdalrymple@protonmail.com
93% 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. It renders SVG elements with scales from `d3.scaleBand` and `d3.scaleLinear`, while custom React components handle axis ticks and bar marks. Data is loaded asynchronously via `d3.csv` from a United Nations World Population Prospects 2019 dataset, then sliced to the first ten entries. The chart includes both bottom and left axes, positioned within specified margins.

PPratik Raja
93% match
Loading thumbnail…

Fork of Refactored Bar Chart

This example displays a horizontal bar chart of the top 10 most populous countries, using React to render SVG elements and D3 v5’s `scaleBand`, `scaleLinear`, and `max` to map country names and population values. Axis components built with D3 scales draw ticks and labels, with custom CSS styling for green tick lines and orange text. The data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv` and filtered to the first 10 rows. The chart intentionally omits axis titles and value labels, presenting only the bars and tick marks.

KKonJoDot
93% match