Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Stylized Refactored Bar chart

Public visualization

Viewing a saved revision (read-only)

825fd29c69914cbb89f035678022642d

Stylized Refactored Bar chart

0 stars1🌍 Public
Kkragovic
Last edited Apr 1, 2021
Created on Apr 1, 2021

This stylized bar chart visualizes the top ten countries by population, using horizontal bars where length encodes the population value. Built with React and rendered as SVG, it fetches UN Population 2019 data via the `d3.csv` utility, and uses React state to load and store the dataset. The chart’s axes are generated with `d3.scaleLinear` and `d3.scaleBand`, while custom React components (`AxisBottom`, `AxisLeft`, and `Marks`) draw the ticks and rectangles. A hover tooltip, formatted with `d3.format`, displays the population value in billions, and the chart’s styling uses the Poppins font and a teal color scheme.

AI-generated description

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