Stylized bar chart

100%

Stylized bar chart

✓ Published1🌍 Public

Last edited Apr 29, 2023

Created on Apr 29, 2023

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.

AI-generated description

a program that loads in some UN pop data using d3 utilities and uses React to render the data in a bar chart.

MIT Licensed

Similar vizzes

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

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

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

95% match

Loading thumbnail…

Stylized Bar Chart

A stylized horizontal bar chart displays the top ten countries by 2020 population, using React state to manage data loaded via D3's `csv` utility. The chart renders SVG rectangles positioned with `scaleBand` and `scaleLinear`, with D3 axes customized through React components. Styling includes light gray tick lines and a hidden page overflow, while the data originates from a UN population CSV hosted as a GitHub gist.

Bbakstorage00001

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

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

95% match

Loading thumbnail…

Stylized Bar Chart

This example shows a horizontal bar chart of the top 10 countries by 2020 population, with bars rendered in a teal color and labeled axes using the Poppins font. The visualization loads UN population data from a CSV file via `d3.csv`, processes the values, and scales the bars using D3’s `scaleBand` and `scaleLinear`. It is built with React components for the axes and marks, styling ticks and labels through CSS classes. The chart uses D3 v5 and React 16.9, with axes generated from `xScale.ticks()` and `yScale.domain()`.

Wwhyamn

95% match