Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Refactored Bar Chart

Public visualization

Viewing a saved revision (read-only)

bb950bea31f74c739be6286abde7c8c7

Refactored Bar Chart

0 stars1🌍 Public
Wwindwaver
Last edited Mar 24, 2021
Created on Mar 23, 2021

This example displays the population of the top ten countries from the UN Population 2019 dataset as a horizontal bar chart. React components render the SVG marks and axes, while D3 utilities handle the data loading and scale calculations. The chart uses a `scaleBand` for the categorical y-axis, a `scaleLinear` for the quantitative x-axis, and `csv` for fetching the data. Each component (`AxisBottom`, `AxisLeft`, `Marks`) is modularized and receives the scales and data via props, highlighting a reusable and refactored architecture for visualization.

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!