Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Refactored Barchart step 2

Public visualization

Viewing a saved revision (read-only)

a5ca320ce40a450881086835d93c9d25

Refactored Barchart step 2

0 stars1🌍 Public
Ccaineosborne
Last edited Jan 14, 2022
Created on Jan 14, 2022
Forked from Barchart step 2

This example presents a horizontal bar chart displaying population data for the top 10 countries from a UN 2019 dataset. Using D3.js v7 for scales and SVG rendering within a React component, the chart separates axis and mark rendering into modular functions. The bottom axis shows linear population values, while the left axis displays categorical country names using a band scale. React's useState hook manages the asynchronously loaded CSV data, which is parsed and sliced before being converted into rectangular SVG elements via the Marks component.

AI-generated description

A program that loads in some data about CSS named colors using d3 utilities, and uses React state to keep track of the data.