Skip to main content
SimilarExport ZIP
100%

UN Population Bar Chart - Stylized

✓ Published1🌍 Public
Ppranav-vis
Last edited Sep 6, 2021
Created on Sep 6, 2021

This example visualizes the top five most populous countries from the UN World Population 2019 dataset as a horizontal bar chart. Each bar’s length encodes the estimated population for 2020, with tooltips showing the value in billions. Using React and D3 v7, the chart employs `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and custom React components for axes. The SVG bars are rendered with `<rect>` elements, while axes use D3’s tick generation with SI formatting that converts billions to “B”.

AI-generated description

Rendering CSS named colors from MDN.

MIT Licensed

Similar vizzes

Loading thumbnail…

18. Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset, using a horizontal layout with a teal fill and a minimal gray axis. Built with React and SVG, it leverages d3’s `scaleBand` for categorical y-axis positioning and `scaleLinear` for population magnitudes, while custom `AxisBottom` and `AxisLeft` components render ticks and labels from the `d3` API. The chart includes formatted population values (e.g., “1.44B”) via `d3.format` and tooltips provided by SVG `<title>` elements, all styled with the Poppins font.

PPrashish Paudel
91% match
Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data, with horizontal bars ordered by country name. The visualization leverages React for component structure and D3 v5's `scaleBand`, `scaleLinear`, `csv`, and `format` APIs for data loading and scaling. SVG rectangles render the marks with native tooltips, while custom `AxisBottom` and `AxisLeft` components generate tick lines and labels. The chart includes an "Population" axis label and formats large values using SI notation converted from billions to the "B" suffix.

AAliaksandr
91% match
Loading thumbnail…

Stylized Bar Chart

This bar chart visualizes the ten most populous countries using United Nations World Population Prospects 2019 data. The chart uses horizontal bars, with country names on the y-axis and a formatted population scale (in billions) on the x-axis. Built with React and D3 v5, the visualization separates axes and marks into reusable components—`AxisBottom`, `AxisLeft`, and `Marks`—which render SVG elements. The linear scale maps population values, while the band scale handles categorical country labels with built-in padding. Tooltips display the population value when hovering over each bar.

Yyogichoudhary
91% match
Loading thumbnail…

Stylized Bar Chart

This example presents a horizontal bar chart ranking the top 10 most populous countries using United Nations World Population Prospects 2019 data, with population values labeled in billions. The visualization is built with React components that render SVG elements, using D3 v5’s `scaleBand` for the categorical country axis and `scaleLinear` for the population axis. Each bar is a `<rect>` element with a native SVG `<title>` tooltip showing the formatted population value. Custom axis components generate tick marks and labels, while the D3 `format` function converts raw numbers into compact “B” suffix notation.

PPatric Tysk
91% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries based on 2019 United Nations World Population Prospects data, with horizontal bars representing each nation’s population. The visualization uses React with D3 v5 libraries, employing `scaleBand` and `scaleLinear` for positioning axes and marks. SVG rectangles render the bars, with custom `AxisBottom` and `AxisLeft` components generating tick marks and labels. Population values are formatted using D3’s `format` function, converting numbers to abbreviated notation like “1.4B”.

AAhmad Butt
91% match
Loading thumbnail…

UN Population Bar Chart v5

This horizontal bar chart displays the 20 most populous countries in 2020, with bars extending left-to-right from a shared baseline. The visualization uses D3 v7’s scaleBand and scaleLinear to map country names to y-axis positions and population values to bar widths, rendered as SVG rectangles in React. The data is loaded from a remote CSV, with tick labels formatted using D3’s format function, converting values to billions. The chart includes styled axes and a population label, with hover tooltips provided by native SVG `<title>` elements.

JJohn Lewis
91% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the population of the ten most populous countries for 2020, sourced from the UN Population dataset. The horizontal bars extend from zero based on a linear scale, with a custom formatter converting values (e.g., "1.4B"). Built with React and rendered as SVG, the visualization employs `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, drawing tick marks via `AxisBottom` and `AxisLeft`. Hovering over a bar reveals its exact population through a native `<title>` tooltip.

AAndre J Denais
91% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset, with each bar’s length representing population. The visualization uses React components and D3.js APIs, including `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements for the bars. The y-axis lists country names, while the x-axis uses a custom SI formatter (replacing 'G' with 'B') to display population in billions. The chart’s aesthetic styling—Poppins font, teal bar color, and muted grid lines—enhances readability.

Aaleemali027
91% match