Skip to main content
SimilarExport ZIP
100%

Fork of Stylized Bar Chart

✓ Published0🌍 Public
Aarchob
Last edited May 24, 2022
Created on May 24, 2022
Forked from 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.

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
96% match
Loading thumbnail…

Fork of Fork of Stylized Bar Chart

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.

Bblueyjuice
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 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 Fork of Stylized Bar Chart

This interactive bar chart visualizes the top 10 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. The visualization is implemented in React and uses d3’s `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. A custom `useData` hook fetches the CSV data, and d3’s `format` function converts large numbers into abbreviated tick labels. The chart includes axes with styled ticks and a hover tooltip revealing the exact population via SVG `<title>` elements.

Iindushashi.g@gmail.com
96% 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 uses React components to render SVG elements, with D3 v5 functions including `scaleBand`, `scaleLinear`, `max`, and `format` to handle scaling and axis tick formatting. Horizontal bars represent population values with tooltips showing formatted numbers, while custom Axis components generate the tick marks and labels.

MMaxim
96% 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

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