Skip to main content
SimilarExport ZIP
100%

Stylized Bar Chart

✓ Published0🌍 Public
IIhorFedorkiv94
Last edited Aug 10, 2020
Created on Aug 10, 2020
Forked from Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. The chart uses horizontal bars with a clean Poppins font, teal-colored marks, and formatted population labels that convert abbreviations like “G” to “B”. Built with React and D3 v5, it employs `scaleBand` for the categorical country axis, `scaleLinear` for the numeric population axis, and custom `AxisBottom` and `AxisLeft` components to render SVG ticks and labels.

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…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using the United Nations World Population Prospects 2019 dataset. The visualization uses a horizontal bar layout with a clean, minimalist design, featuring a teal color scheme and Poppins font. The chart includes axes with formatted tick labels (converting values to billions) and a "Population" axis label. Built with React and D3 v5, the code uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The SVG rendering is composed of custom components (AxisBottom, AxisLeft, and Marks) that map data to rectangular bars, with interactive tooltips showing population values via the `format` API.

Ttirumalaikumaar
96% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Horizontal bars encode population values on a linear scale, with country names on a band scale and formatted tick labels that convert units to billions. The visualization is built with React and D3 v5, using `scaleBand`, `scaleLinear`, and `format` for axes and data transformation, while marks render as SVG rectangles with hover tooltips. The Poppins font and teal color scheme give the chart a modern, clean aesthetic.

Eedpmay
96% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset, with each bar’s length representing population. The visualization uses React components and D3.js APIs, including `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements for the bars. The y-axis lists country names, while the x-axis uses a custom SI formatter (replacing 'G' with 'B') to display population in billions. The chart’s aesthetic styling—Poppins font, teal bar color, and muted grid lines—enhances readability.

Aaleemali027
96% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset, using horizontal bars encoded with a linear scale for population and a band scale for country names. The visualization is built with React and D3 v5, rendering SVG elements through reusable components like AxisBottom, AxisLeft, and Marks, while tooltips show formatted population values in billions.

HHarr
96% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart shows the top 10 most populous countries using United Nations World Population Prospects 2019 data, with population values on the x-axis and country names on the y-axis. The visualization is built with React and D3 v6, using `scaleBand` for the categorical y-axis, `scaleLinear` for the population scale, and SVG rectangles for the bars. Custom `AxisBottom` and `AxisLeft` components render tick marks, while a native SVG `<title>` element provides tooltips. The chart uses a Poppins font and a minimal color palette for a clean, stylized appearance.

WWolfgang
96% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Written in React and rendered as SVG with D3 v5, the visualization uses horizontal bars whose lengths are scaled by population, with axes and tick labels styled using the Poppins font. The code leverages D3's `scaleBand` and `scaleLinear` for positioning, while `AxisBottom`, `AxisLeft`, and `Marks` components handle the chart elements, and tooltips show formatted population values via the `title` element.

AAlejandro Zamora Esquivel
96% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Written in React and rendered as SVG with D3 v5, the visualization uses horizontal bars whose lengths are scaled by population, with axes and tick labels styled using the Poppins font. The code leverages D3's `scaleBand` and `scaleLinear` for positioning, while `AxisBottom`, `AxisLeft`, and `Marks` components handle the chart elements, and tooltips show formatted population values via the `title` element.

AAlejandro Zamora Esquivel
96% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. It uses React with D3.js v5 functions like `scaleBand` and `scaleLinear` to map country names and population values, rendering horizontal bars as SVG rectangles. The chart includes formatted axis ticks via d3's `format` API, with axis labels and tooltips styled through a Poppins font and custom CSS. All marks, axes, and labels are built from modular components (AxisBottom, AxisLeft, Marks) that leverage React's component structure.

Cctarmey
96% match