Skip to main content
SimilarExport ZIP
100%

Stylised Bar chart

✓ Published5🌍 Public
MMark Simpson
Last edited Jan 28, 2026
Created on Oct 15, 2025

A stylized bar chart displays the populations of ten countries in 2020, sourced from the UN Population CSV file. Built with React and D3 v5, it renders as SVG, using `scaleBand` for the categorical Y-axis and `scaleLinear` for the numeric X-axis. The code defines custom `AxisBottom` and `AxisLeft` components, while each bar includes a native SVG `<title>` element for hover tooltips. The chart features a large Poppins font, teal bars, and a formatted axis label that abbreviates billions as “B”.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the populations of ten countries from a 2019 UN dataset, using horizontal bars sorted by country name. The visualization renders in SVG via React, with D3 v5 scales (`scaleBand` for the y-axis and `scaleLinear` for the x-axis) and includes axis components and tooltips showing formatted population values. Data is loaded asynchronously with `d3.csv`, with population values computed from the dataset’s “2020” column. The chart’s styling uses Poppins font and teal bars against a minimal, clean background.

EEvan Misshula
95% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the populations of ten countries for 2020, sourced from UN data loaded via D3's `csv` utility. The horizontal bars, rendered as SVG `rect` elements, use a teal fill and Poppins typography. React state manages the fetched data, while D3's `scaleBand` and `scaleLinear` position the bars and axes. A `<title>` element provides tooltips, and the x-axis tick labels are formatted using D3's `format` function.

Ddiska432
94% match
Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the populations of ten countries in 2020, using data from the United Nations population dataset. Horizontal bars are rendered as SVG rectangles, with country names on the y-axis and population values on the x-axis, formatted in billions. The chart uses React with D3 v7, leveraging `scaleBand` and `scaleLinear` to map data, and custom axis components to render ticks.

Ddanielscheeper@gmail.com
94% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the populations of the top 10 countries in 2020, sourced from the UN Population dataset. The data is loaded via `d3.csv` and rendered as SVG rectangles using React components, with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Axis ticks are generated by `xScale.ticks()` with `d3.format` for SI-prefix labels, converting gigabytes to billions. The chart uses the Poppins font, teal marks, and a clean layout with custom margins and axis styling.

Qqtrfx
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
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the populations of the top ten countries in 2020 using horizontal bars. The visualization uses React state to load and manage data from a UN Population CSV file, with D3 v5 utilities like `csv()`, `scaleBand()`, and `scaleLinear()` to map values. SVG rectangles render the bars, colored orange with a Poppins font, while axes include formatted tick labels using `format('.2s')`. Tooltips appear via SVG `<title>` elements, and the chart is fully responsive to its 960x500 frame.

Ccynichole
94% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart presents the 2020 populations of twelve countries from a UN dataset, loading the CSV via D3's `csv` utility and rendering each row as an SVG `rect` with React. The chart uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with the custom `AxisBottom`, `AxisLeft`, and `Marks` components generating ticks and bars. D3 v5 handles data loading and scaling, while React 16.9 manages the component-based SVG output, styled with a distinctive font and muted tick colors.

Nnexus1058
94% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the population of ten countries for 2020, drawing on United Nations World Population Prospects data loaded via `d3.csv`. The visualization uses SVG rendering through React, with `scaleBand` positioning horizontal bars and `scaleLinear` mapping population values to bar widths. D3’s `format` helper converts large numbers into abbreviated tick labels (e.g., “1.2B”), while custom axis components generate gridlines and text. The chart uses a muted teal fill for bars and the Poppins font.

TTousifAhamed
94% match