Population over the years

100%

Population over the years

✓ Published1🌍 Public

Last edited Dec 7, 2019

Created on Dec 2, 2019

A horizontal bar chart displays the populations of the top 15 countries for a selected year, using data from the United Nations World Population Prospects 2019. A dropdown menu lets the viewer change the year, updating the bar lengths accordingly. The visualization uses React with D3 v5 scales (`scaleBand` and `scaleLinear`) to position bars and axes, and renders SVG elements for the chart. Population values are formatted using D3's `format` with SI prefixes, and each bar includes a tooltip showing the exact value.

AI-generated description

Show the top 10 countries populations over a range of years. Allow the user to select the year to view.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Population Bar Chart

This chart displays the 20 most populous countries in 2020 as horizontal bars, with country names on the y-axis and population values scaled along the x-axis. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` for the axes and renders SVG rectangles. Population figures come from the United Nations’ 2019 World Population Prospects, formatted with d3’s `format` to show billions or millions. Native SVG `<title>` elements provide tooltips on each bar.

EElementargeist

90% match

Loading thumbnail…

UN Population Data

A horizontal bar chart displays the populations of ten countries in 2020, sourced from UN data loaded via a CSV file. The visualization uses React to render SVG elements, with D3 v6 scales (scaleBand and scaleLinear) positioning bars and axes. Custom React components handle the axes and bars, with native SVG `<title>` elements providing tooltips. Population values are formatted using D3's `format` function, converting values like billions into abbreviated labels.

LLaura Johnson

88% match

Loading thumbnail…

5) Bar Chart - Styling

This bar chart displays the top 10 countries by population in 2020, using data from the United Nations World Population Prospects 2019. The chart is rendered with SVG in React, leveraging D3 v5 scaleBand and scaleLinear for axes and positioning. Custom axis components generate ticks, while a marks component maps data to styled rectangles with tooltips. The chart uses the Poppins font, a teal fill for bars, and formats population values with d3.format for readability.

Bbrunoevione

88% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data, with population values rendered as horizontal bars scaled by d3.scaleLinear and category positions via d3.scaleBand. The React and D3 v5 implementation uses SVG rendering, with custom AxisBottom, AxisLeft, and Marks components handling ticks, labels, and interactive tooltips through SVG <title> elements. Population values are formatted as billions using d3.format, and the chart is styled with the Poppins font and a teal color scheme.

Ttayyabanisar

88% match

Loading thumbnail…

Untitled

This bar chart displays the top 10 most populous countries for the year 2020, using data from the United Nations World Population Prospects 2019. The visualization uses a horizontal bar layout, where each bar’s length encodes population, with a formatted axis label converting values into a readable "B" (billions) format. Built with React and D3 v5, the code constructs a linear scale (`d3.scaleLinear`) for the x-axis and a band scale (`d3.scaleBand`) for the categorical y-axis. The rendering is SVG-based, with interactive tooltips showing exact population values on hover. The chart is styled with a teal color for bars and a clean sans-serif font, presenting the data in an accessible, static format.

HHaileabGH

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

88% match

Loading thumbnail…

Bar Chart

This example displays a horizontal bar chart of 2020 population estimates for the top 10 countries, sourced from UN Population Prospects data loaded via d3.csv (d3-fetch). The React 17 app uses d3.scaleBand for the country axis and d3.scaleLinear for population, rendering SVG rectangles with native `<title>` tooltips. Axes are built manually through React components (AxisBottom, AxisLeft), while d3.format formats population values with SI notation, converting 'G' to 'B'. The chart is styled with a teal fill and Poppins font.

CCarlos Caballero

88% match

Loading thumbnail…

Bar Chart

This bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses React and D3 v5, with SVG rendering for the marks and axes. Population values are formatted in billions using D3’s `format` function, while `scaleBand` and `scaleLinear` position the bars. Hovering over each bar reveals a tooltip with the population figure via the native SVG `title` element.

Zzarioualid@gmail.com

88% match