Stylized Bar Chart

100%

Stylized Bar Chart

✓ Published1🌍 Public

Last edited Mar 15, 2021

Created on Mar 13, 2021

A stylized bar chart displays the top 9 countries by projected 2020 population from a UN dataset. The code uses D3's `scaleBand`, `scaleLinear`, `max`, and `format` to map values, while React components `AxisBottom`, `AxisLeft`, and `Marks` render the SVG axes and bars. Population values are formatted with SI prefixes, and the chart loads data via `csv` with a custom row parser.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to keep track of the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylised Bar Chart

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.

SSabin Bhandari

93% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the populations of ten countries using data from the UN Population 2019 dataset. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear mapping countries and population values to screen coordinates. Custom AxisBottom and AxisLeft components generate tick marks and labels, while the Marks component renders rectangles with tooltips. The chart features a clean design with Poppins typography, a teal color scheme, and formatted population labels using d3.format.

TThomas Cormican

93% match

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the top ten countries by population for 2020. D3’s `scaleBand` and `scaleLinear` map country names to horizontal bars and population values to widths, with rounded corners and custom axis ticks formatted using D3’s `format` API. React state, managed in a custom `useData` hook, loads the UN Population 2019 CSV via `d3.csv` and renders the SVG.

Jjbruzzo

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

This stylized bar chart visualizes the top ten countries by 2021 population, using horizontal bars to encode values. The visualization is built with React and SVG, leveraging D3 v7 utilities such as `scaleBand` and `scaleLinear` for positioning and scaling. Data is loaded as CSV from a UN population dataset via D3’s `csv` method. Axes are rendered through custom React components (`AxisBottom` and `AxisLeft`), while the bars themselves are drawn as `rect` elements in a `Marks` component.

TTakashi-KK

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

92% match

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

92% match

Loading thumbnail…

Stylized bar chart

A stylized bar chart displays the top 10 countries by population in 2020, using the UN Population 2019 dataset loaded via D3’s `csv` utility. React renders SVG marks, with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. D3’s `format` abbreviates tick labels (e.g., “B” for billions). The chart includes a loading state and styled axes with an Oswald font.

Ssmile2git

92% match