Stylised Bar Chart

100%

Stylised Bar Chart

✓ Published2🌍 Public

Last edited May 29, 2021

Created on May 29, 2021

This stylised bar chart displays the top 10 countries by projected 2020 population, sourced from UN population data. Built with React and rendered as SVG using D3 v6 utilities, the chart uses a horizontal bar layout with a linear scale for population and a band scale for countries. The code imports `scaleBand`, `scaleLinear`, and `format` from D3, while custom React components handle axis and bar rendering. Population values are formatted with SI prefixes, converting gigabytes to billions for tick labels and tooltips.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render data.

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

95% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by their 2020 population, sourced from a UN dataset. It uses a horizontal bar format with a styled dark teal fill and a clean, modern design. The chart is built with React and D3 v7, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG rendering. Population values are formatted with a custom tick label function that converts large numbers to a readable "B" suffix for billions.

KKevin McMorrow

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

95% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by population, using the UN Population 2019 dataset. Each horizontal bar is rendered as an SVG rectangle, with country names on the y-axis and population values on the x-axis, formatted using d3.format. The chart prominently features a large title and axis labels styled with the Poppins font. Built with React and D3 v6, it uses scaleBand and scaleLinear to position bars and generate ticks, while the d3.csv loader parses the data and scales population values by 1000.

Fforcox43

95% match

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the top 10 countries by 2020 population, sourced from the UN_Population_2019.csv data. The visualization uses an SVG rendering with React and D3 v7, employing `scaleBand` and `scaleLinear` to map country names and population values. Horizontal bars include native tooltips via SVG `<title>` elements, with axes labeled using a custom SI format that converts gigabytes to billions. The chart applies a Poppins font and custom styling for a clean, minimal aesthetic.

JJun Suzuki

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

94% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the populations of the top ten countries for 2020, sourced from UN Population data. The chart uses horizontal bars, colored in a teal tone, with a clean, minimal aesthetic. Built with React and D3 v6, the visualization leverages `scaleBand` and `scaleLinear` for layout, and renders as an SVG. The code uses React components, including custom `AxisBottom`, `AxisLeft`, and `Marks`, and includes interactive tooltips powered by the `<title>` element to show precise population values.

MMario Ibarra

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

94% match