Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Stylized Bar Chart

✓ Published0🌍 Public
Bblueyjuice
Last edited Nov 18, 2021
Created on Nov 18, 2021

This bar chart displays the top 10 most populous countries in 2020 using data from the UN World Population Prospects 2019, presented as horizontal bars labeled with country names and population values. The React-based visualization uses D3 v5 scales (`scaleBand` and `scaleLinear`) to position bars and axes, with population formatted in billions via D3’s `format` function. Styled with the Poppins font and turquoise bars, the SVG rendering includes axis tick lines, labels, and hover tooltips through native SVG `<title>` elements.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart shows the top 10 most populous countries in 2020, using data from the United Nations World Population Prospects 2019. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. Population values are formatted with D3’s `format('.2s')` to display values in billions. The SVG rendering includes custom axis components and hover tooltips via native `<title>` elements, all styled with the Poppins font and teal bars.

SStudentCZ
97% match
Loading thumbnail…

Fork of Stylized Bar Chart

This interactive bar chart visualizes the top 10 most populous countries in 2020 using data from the United Nations World Population Prospects 2019. It displays population values as horizontal bars, ordered by country, with a formatted x-axis using d3.format to abbreviate large numbers. Built with React and rendered as an SVG, the chart uses d3.scaleBand and d3.scaleLinear for positioning, with a Poppins font and a teal color scheme.

YYedrup
97% match
Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization ranks countries along a horizontal axis by their 2020 population estimates, with a teal color scheme and Poppins font. Built with React and rendered as SVG, the chart uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and the d3.csv loader to fetch and parse the data. Axis components generate tick marks, while tooltips appear via SVG title elements.

SSamuel Baik
97% match
Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Each horizontal bar represents a country, with population values formatted in billions. The visualization uses React with D3 v5 scales (scaleBand and scaleLinear) for layout, and renders SVG rectangles. Axis components are custom-built, and a native SVG `<title>` element provides tooltips showing population values.

Mmavercikalvin
96% match
Loading thumbnail…

Fork of Stylized Bar Chart

This interactive bar chart displays the top 10 most populous countries in 2019, using data from the United Nations World Population Prospects. The visualization employs horizontal bars sorted by population, with a formatted x-axis showing values in billions. Built with React and D3 v5, the code uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG rectangles for the marks. Each bar includes a tooltip via the `<title>` element, while the Poppins font and custom color scheme provide a stylized presentation.

MMarvin
96% match
Loading thumbnail…

Fork of Stylized Bar Chart

This fork of a stylized bar chart displays the top 10 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. The visualization renders horizontal bars as SVG rectangles via React components, with populations formatted using `d3.format` to abbreviate values like billions. Axes are built with `scaleBand` and `scaleLinear` from D3 v5, and the chart includes hover tooltips via SVG `<title>` elements. The layout uses fixed margins and a Poppins font, loading data asynchronously through a custom `useData` hook.

Aarchob
96% match
Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries for 2020, sourced from the United Nations World Population Prospects 2019. Each bar’s length encodes population using a linear scale, while country names are arranged on a band scale. The visualization is built with React and D3 v5, rendering bars and axes as SVG elements. It includes custom axis components, a formatted tick label that abbreviates billions as "B", and a tooltip showing the exact population value.

Ssnehareddygurram
96% match
Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries for 2020, sourced from the United Nations World Population Prospects 2019. Each bar’s length encodes population using a linear scale, while country names are arranged on a band scale. The visualization is built with React and D3 v5, rendering bars and axes as SVG elements. It includes custom axis components, a formatted tick label that abbreviates billions as "B", and a tooltip showing the exact population value.

Ssnehareddygurram
96% match