Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Refactored Bar Chart

Public visualization

Viewing a saved revision (read-only)

df2dd9a93c41493b8f27c1ee776ed769

Refactored Bar Chart

0 stars1🌍 Public
HHaris Abdullah
Last edited Oct 3, 2021
Created on Sep 30, 2021

This example shows a horizontal bar chart of population data for 80 countries, rendered as SVG rectangles with axes, using React components for the marks and scales. The data is loaded as CSV via D3’s `csv` utility, with the x-axis scaled linearly by population and the y-axis as a band scale for country names. Custom React components `AxisBottom`, `AxisLeft`, and `Marks` handle tick labels and bars, while `scaleBand` and `scaleLinear` from d3.v5 position the elements. The chart updates asynchronously once the dataset is fetched.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!