Stylized Bar chart (CSS)

100%

Stylized Bar chart (CSS)

✓ Published0🌍 Public

Last edited May 22, 2021

Created on May 22, 2021

Forked from Fork of reformat Bar chart (access data)

A stylized horizontal bar chart displays the top 15 countries by projected 2020 population from the UN World Population Prospects 2019 dataset. The chart uses a teal fill for bars, with CSS-styled axes and gridlines, and labels populations in billions with an "B" suffix. Built with React and D3 v5, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders as SVG. Tooltips appear on hover via native SVG `title` elements, while axis components generate ticks and text elements programmatically.

AI-generated description

Reformat bar chart (axis)

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by projected 2020 population from a United Nations dataset, using horizontal bars with a teal fill and a Poppins font. The example highlights labeled axes and a population label, with tooltips showing formatted values. Built with React and D3 v6, it uses scaleBand and scaleLinear for layout, and formats tick labels with a custom SI-formatting function that converts billions from “G” to “B”. The SVG rendering is driven by reusable AxisBottom, AxisLeft, and Marks components.

PPratik Gohil

93% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes projected population figures for fifteen countries in 2060, sourced from UN population projection data. The chart uses a horizontal bar layout, making country names easy to read along the y-axis. Built with React and D3 v5, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the population x-axis, and custom components (`AxisBottom`, `AxisLeft`, `Marks`) to render SVG elements. Hovering over a bar reveals the precise value via a native SVG `<title>` tooltip.

KKai Stewart

93% match

Loading thumbnail…

Stylized bar chart

A stylized bar chart displays the top ten countries by 2020 population, using horizontal bars with rounded, teal fill and labeled axes. The data is loaded from a CSV of UN population figures via the `csv` function. The chart is built with React and rendered as SVG using D3 v5 scales: `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `scaleLinear` ticks for the bottom axis. Tooltips show formatted population values, with axis labels styled via Poppins font.

Rrsulli4

93% match

Loading thumbnail…

Stylized Bar chart

This stylized bar chart displays the top 10 countries by projected 2020 population, using horizontal bars whose lengths encode the population values. The visualization pairs a D3.js v5 linear scale for the x-axis with a band scale for categorical country labels, while React renders each bar as an SVG rectangle. The design features custom fonts (Pacifico and Open Sans Condensed) and a distinct color palette for axis ticks and marks. Data originates from a CSV file of UN Population 2019 estimates, loaded via D3's `csv` function, and includes tooltips formatted in billions using `d3.format`.

CChira Cezara Victoria

93% match

Loading thumbnail…

Stylized bar chart

A stylized bar chart displays the top ten countries by 2020 population, using teal rectangular marks scaled by linear population values. Built with React and D3 v5, the SVG visualization incorporates custom axis components and a Poppins typeface. Data originates from the UN's 2019 population estimates, with D3's `scaleBand` and `scaleLinear` handling layout while `format` converts tick labels from gigabytes to billions.

Ssxtnxy

93% match

Loading thumbnail…

Stylized Bar Chart

A horizontal bar chart displays the top ten countries by population in 2020, using data from the UN Population 2019 CSV. D3 v7 scales and axes are applied: `scaleBand` positions each country, while `scaleLinear` maps population values. React components render the SVG, with axes and marks built from `scaleLinear` ticks and `scaleBand` domains. The chart uses a custom "Poppins" font, teal bars, and a formatted tick label replacing "G" with "B" via `format('.2s')`.

Rrmgoldberg24

92% match

Loading thumbnail…

Stylized Bar Chart

A stylized horizontal bar chart displays the populations of the top 10 countries from the 2019 UN population dataset. Rendered with SVG, the chart uses React components for the axes and marks, with D3's `scaleBand` and `scaleLinear` for positioning. The bars are colored teal, with gray axis lines and labels, and include hover tooltips via SVG `<title>` elements. The x-axis labels are formatted with D3's `format(".2s")` to convert values from gigabytes to billions.

TTaweewat Somboonpanyakul

92% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by 2020 population, using horizontal bars with a teal fill against a clean, muted axis. The visualization is built with React and D3 v5, employing `scaleBand` for the categorical country axis and `scaleLinear` for the population values. An SVG renders the marks with tooltips, while axes are generated via reusable components, and the data originates from a UN Population CSV file.

Rrstrauss127

92% match