Skip to main content
SimilarExport ZIP
100%

Stylized bar chart

✓ Published0🌍 Public
FFlorian Maas
Last edited Feb 25, 2022
Created on Feb 25, 2022

This stylized bar chart displays the populations of the top 10 countries from a 2019 UN dataset, using a horizontal layout with green rectangles. The visualization is built with React and D3 v5, leveraging `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. SVG rendering draws axes, tick marks, and a population label, while tooltips appear on hover through `title` elements. The chart resizes to fill the browser window, and the Roboto font provides a clean, minimal aesthetic.

AI-generated description

Follow the mouse and resize.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized bar chart

This stylized bar chart displays the populations of the top 10 countries from the UN Population 2019 dataset. It uses React with D3 v6’s `scaleBand` and `scaleLinear` to map countries and population values, rendering bars as SVG rectangles with tooltips via the `<title>` element. The chart includes formatted axis ticks using `d3.format` and a Poppins font, with axes built from custom React components.

BBurak Senel
95% 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
95% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the populations of the top ten countries from the UN Population 2019 dataset, rendered as horizontal bars with a teal color scheme and large, clean axis labels. The visualization uses React to manage the component state (via hooks like `useState` and `useEffect`) and D3 v5 functions (`scaleBand`, `scaleLinear`, `csv`, `format`) to handle data loading, scaling, and tick formatting. SVG elements are generated through React components for the axes and marks, with tooltips provided by native SVG `<title>` elements.

Mmscoop16
94% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by population from the UN Population 2019 dataset, with horizontal bars ranked by country name. The visualization uses React and D3 v7 to render SVG elements, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis. A custom tick formatter converts large population values into abbreviated SI units, and CSS styling applies a teal bar color with Poppins font, while hover tooltips reveal exact values via SVG `<title>` elements.

GGonzalo Alarcón Usui
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

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 visualizes the top 10 countries by population in 2020, sourced from the UN Population 2019 dataset. Horizontal bars display population values, with a linear x-axis formatted to use "B" for billions and a categorical y-axis listing country names. The visualization is built with React, D3 v7 (using `scaleBand`, `scaleLinear`, and `format`), and rendered as SVG. It demonstrates proper margin handling, custom axis components (`AxisBottom`, `AxisLeft`), and a tooltip via `<title>` elements.

SSong Tao Chen
93% 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
93% match