Skip to main content
SimilarExport ZIP
100%

Fork of Stylized Bar Chart

✓ Published0🌍 Public
RRahulSai05
Last edited Mar 8, 2022
Created on Mar 8, 2022
Forked from Stylized Bar Chart

This bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data, with population values formatted in billions. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map country names and population sizes to screen coordinates, rendering SVG rectangles for each bar. The chart includes styled axes with formatted tick labels, a population axis label, and native SVG tooltips via `<title>` elements, all styled with the Poppins font.

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 visualization uses a horizontal bar chart to display the top 10 most populous countries, sourced from United Nations World Population Prospects 2019 data. The React-based implementation leverages d3.scaleBand, d3.scaleLinear, and d3.format to render SVG rectangles, with population values formatted in billions. Axis components are custom-built using d3 scale ticks, and hovering over a bar reveals its precise value via a native `<title>` tooltip. The chart includes labeled axes and uses a Poppins font styling throughout.

NNikithakatta30
96% match
Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data, with population values converted to billions. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the population x-axis, and SVG `<rect>` elements rendered by the `Marks` component. The chart includes formatted tick labels via `d3.format` and interactive tooltips using SVG `<title>` elements.

RRoberto
96% match
Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data, with population values converted to billions. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the population x-axis, and SVG `<rect>` elements rendered by the `Marks` component. The chart includes formatted tick labels via `d3.format` and interactive tooltips using SVG `<title>` elements.

RRoberto
96% match
Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data, rendered as horizontal bars in an SVG. Population values are formatted with abbreviating tick labels that convert gigabytes to billions. The visualization uses React components with d3.scaleBand and d3.scaleLinear for scales, while the axis and mark components map data to styled rectangles. A sans-serif Poppins font and teal bar color give the chart a distinctive appearance.

KKaushik Mishra
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 with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis, rendering SVG rectangles via the Marks component. Axes are generated with custom AxisBottom and AxisLeft components, while tooltips are provided through SVG title elements. Population values are formatted using d3.format to abbreviate large numbers, and the chart applies a Poppins font with a teal color scheme.

EEevikettu
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 chart uses SVG rendering within a React component, leveraging D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. Axes are drawn with custom React components (`AxisBottom`, `AxisLeft`), while `Marks` renders each bar with a tooltip. Population values are formatted with D3’s `format` function, converting large numbers to billions with a "B" suffix.

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

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data. The visualization uses React and D3 v5 with SVG rendering, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. The code implements custom `AxisBottom` and `AxisLeft` components, with `Marks` rendering population bars as rectangles. A `format('.2s')` function converts large numbers to abbreviated labels (e.g., "B" for billions), while CSS styling with the Poppins font gives the chart its stylized appearance.

KKIRRAN P L
95% match