Skip to main content
SimilarExport ZIP
100%

Bar chart UN data

✓ Published1🌍 Public
FFlorian Maas
Last edited Feb 24, 2022
Created on Feb 24, 2022

This example shows a horizontal bar chart displaying the top ten countries by 2020 population, as sourced from UN population data. The bars are rendered as green SVG rectangles, with the bar lengths proportional to population values from the CSV file. Built with React and D3 v5, the chart uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The visualization includes axis ticks, labels, and a gridline.

AI-generated description

Follow the mouse and resize.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart vertical

This example renders a vertical bar chart from UN population data for 2019, displaying the top ten countries by population. The chart uses React to manage state and render SVG rectangles, while D3 utilities load and parse the CSV data. Specifically, `d3.csv` fetches the dataset, `scaleLinear` maps country names to the y-axis, and `scaleBand` maps population values to bar widths. The bars extend horizontally from the left edge, with the y-axis positioned vertically to show country rankings.

AAndres Perdomo
93% match
Loading thumbnail…

Bar chart

A horizontal bar chart displays the top ten countries by population for 2020, sourced from a UN population CSV file. The chart encodes each country's population as the width of a rectangle, using D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The visualization is built with React, rendering SVG elements directly into the DOM.

SShashwat Kumar
93% match
Loading thumbnail…

Bar Chart

This chart uses a horizontal bar layout to display the top 10 countries from the 2019 UN Population dataset. React manages the asynchronous data loading from a CSV file, while D3 scales—specifically `scaleBand` for the categorical country axis and `scaleLinear` for the population values—determine the bar positions and widths. The SVG rectangles are rendered directly by React, with each bar’s length proportional to the 2020 population estimate. D3’s `csv` utility parses the remote data file.

Yyejichun@naver.com
93% match
Loading thumbnail…

UN Population Bar Chart v3

This visualization displays the populations of the top ten countries from a UN 2020 dataset as horizontal bars, using a bar chart format. The chart scales population values linearly on the x-axis and country names using a band scale on the y-axis. Built with React and D3 v7, it loads the CSV data via `d3.csv` and renders SVG elements directly, including axis ticks and grid lines. The visualization fills the browser window and updates asynchronously once the data is fetched.

JJohn Lewis
92% match
Loading thumbnail…

bar_chart

This example shows a horizontal bar chart displaying the top 10 countries by population in 2020, based on data from a UN population CSV file. The chart uses React with hooks to load and process the data, and renders bars as SVG rectangles scaled with D3’s `scaleLinear` and `scaleBand`. Axis ticks are drawn using D3’s `ticks()` method, and both countries and population values are labeled directly within the visualization. The bars are vertically centered on each band using the scale’s `bandwidth()` function.

Ssagar limbu
92% match
Loading thumbnail…

bar chart

This bar chart displays the top 10 countries by 2020 population, with horizontal bars encoded by length and ordered by country name. The visualization uses React to manage state and render SVG elements, while D3 v7 handles data loading via `csv()` and scales through `scaleBand` and `scaleLinear`. Population data comes from a UN gist CSV file. Loading text appears until data arrives, and the chart currently lacks axis labels or text annotations.

MMalcolm Mead
92% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the population of the top ten countries, ranked by their 2020 estimates. The chart is rendered as a horizontal bar chart with a distinctive green color scheme for axes and teal bars. Built using React and D3 v5, the code loads a CSV file of UN population data and uses `scaleBand` and `scaleLinear` to map countries and populations. SVG elements are generated via React components, with custom tick labels formatting values in billions.

FFonda Irena Santoso
92% match
Loading thumbnail…

UN data

This bar chart displays the top ten countries by population in 2020, based on UN population data loaded from a CSV file. The visualization uses React for component structure and D3 v7 for scales, axes, and SVG rendering. The `scaleBand` positions the country labels on the y-axis, while `scaleLinear` maps population values to bar widths, with gridlines and tick labels generated from the x-scale. The data is fetched asynchronously via `csv()` and sorted alphabetically before being rendered as SVG rectangles.

JJosh Zalcman
92% match