Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Stylized Bar Chart

Public visualization

Viewing a saved revision (read-only)

da67c990501e476b943e0f67642b51aa

Stylized Bar Chart

0 stars1🌍 Public
CChristian Potdevin
Last edited Mar 27, 2021
Created on Mar 27, 2021

This stylized bar chart displays the ten most populous countries in 2020, using a horizontal layout with labels on the left and a proportional population axis on the bottom. The visualization is built with React and D3 v5, where `d3.scaleBand` positions the country categories and `d3.scaleLinear` maps population values to bar widths. The code uses custom React components for the axes and marks, rendering as SVG rectangles with native tooltips. Data loads asynchronously from a CSV file via `d3.csv`, and the axis labels apply a customized tick formatter that converts values into billions.

AI-generated description

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