Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Stylized Bar Chart

Public visualization

Viewing a saved revision (read-only)

64e018e2de4b44eeaa6e9a1b35991fdd

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.