Fork of Stylized Bar Chart

100%

Fork of Stylized Bar Chart

✓ Published0🌍 Public

Last edited Jul 6, 2021

Created on Jul 6, 2021

This bar chart displays the top 10 most populous countries for 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 country labels and `scaleLinear` for the population axis. Each bar is rendered as an SVG rectangle, with tick marks generated by custom `AxisBottom` and `AxisLeft` components. The chart includes formatted population labels in billions and a tooltip showing exact values via the native SVG `<title>` element.

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 horizontal bar chart displays the top 10 most populous countries for 2020, using data from the UN World Population Prospects 2019. The chart visualizes population values with horizontal bars, ordered from largest to smallest, and includes axis labels and tick marks. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and renders SVG rect elements with tooltips via the `title` element.

PPrasun Saurabh

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

Ssnehareddygurram

96% match

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries for 2020, sourced from United Nations World Population Prospects 2019 data. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the population values on the x-axis. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components, with tick labels formatted using D3’s `format` to abbreviate millions as “B”. Each bar is a `rect` element with a native SVG `<title>` tooltip, styled with a teal fill and Poppins font.

Pperformautodev

96% match

Loading thumbnail…

Fork of Stylized Bar Chart

This interactive bar chart displays the top 10 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. Rendered as an SVG with React and D3 v5, the visualization employs `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with bars styled in a teal color. Axes are drawn using custom components, and hovering over a bar reveals a tooltip via an SVG `<title>` element, which formats population values using D3's `format` function (e.g., converting to billions).

VViktorLnt

96% match

Loading thumbnail…

Fork of Stylized Bar

This bar chart displays the top 10 most populous countries in 2020, using data from the United Nations World Population Prospects 2019. The visualization uses React with D3 v5 scales (`scaleBand` and `scaleLinear`) to map country names to the y-axis and population values to the x-axis. Each bar is rendered as an SVG rectangle, with axes and tick labels drawn from the `AxisBottom` and `AxisLeft` components. The chart's styling is defined in a separate CSS file, and data is loaded asynchronously via D3's `csv` function.

SSnapika

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