Fork of Stylized Bar Chart

100%

Fork of Stylized Bar Chart

✓ Published1🌍 Public

Last edited May 23, 2021

Created on May 22, 2021

This stylized bar chart displays the top 10 most populous countries using horizontal bars. Built with React and rendered as SVG, it uses D3 v5 scales (`d3.scaleBand`, `d3.scaleLinear`) to map categories and values. The data comes from the UN World Population Prospects 2019 via a JSON endpoint. Tooltips show formatted values, replacing 'G' with 'B' for billions.

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

95% match

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the top 10 most populous countries using a horizontal bar chart, with population values formatted in billions (e.g., "G" replaced by "B"). The chart is built with React and D3 v5, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and loading data from a CSV of the United Nations World Population Prospects 2019 via `useData`. SVG rectangles represent each bar, while `AxisBottom` and `AxisLeft` generate ticks and labels, with styling applied through CSS classes. Native SVG `<title>` elements provide tooltips.

Gghose-gh

95% match

Loading thumbnail…

Fork of Stylized Bar Chart

A horizontal bar chart displays the top 10 most populous countries, using data from the United Nations World Population Prospects 2019. The chart presents population values formatted in billions, with country names on the y-axis and a labeled x-axis. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` for positioning, and SVG `rect` elements from the `Marks` component to render bars with tooltips.

EEmma kim

95% 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. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, with `format('.2s')` to abbreviate population numbers (e.g., "1.4B"). The visualization renders as SVG with custom axis components and a tooltip via the `<title>` element, styled with Poppins font and a teal color scheme.

HHaileabGH

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

95% match

Loading thumbnail…

Fork of Stylized Bar Chart

A bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses React to render SVG elements, with d3-scale functions `scaleBand` and `scaleLinear` for positioning, and d3-format for tick labels that convert values to billions. The chart includes styled axes, a labeled x-axis, and interactive tooltips using SVG `<title>` elements.

JJean David

95% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the y-axis and population counts on the x-axis. It uses React components and d3.scaleBand and d3.scaleLinear to map data from the United Nations World Population Prospects 2019 dataset. The SVG rendering includes d3.csv for data loading, custom tick formatting with d3.format, and tooltips via SVG title elements.

MMercPai

95% match

Loading thumbnail…

Fork of Stylized Bar Chart

This chart displays the top 10 most populous countries as horizontal bars, ranked by population. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars and axes, rendering SVG elements via JSX components. Population values from the UN World Population Prospects 2019 are formatted using D3’s `format` function, with tooltips generated by native SVG `<title>` elements.

AAga Domanska

95% match