Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Refactored Bars Chart

Public visualization

Viewing a saved revision (read-only)

89a658251ff9495691ac556537556aab

Refactored Bars Chart

0 stars1🌍 Public
FFulvio Vigilante
Last edited Jul 15, 2021
Created on Jul 15, 2021

This example displays a horizontal bar chart of population data for ten countries, sourced from a UN population CSV loaded via `d3.csv`. The React components `AxisBottom`, `AxisLeft`, and `Marks` render the axes and bars, using `scaleBand` and `scaleLinear` from d3.v7 to compute positions and widths. The visualization introduces a y-axis left with a band scale and an x-axis bottom with a linear scale. The SVG rendering shows the largest population bar extending nearly the full chart width while smaller bars are proportionally shorter. The chart is built with a loading state that displays "Loading..." until the asynchronous data fetch completes.

AI-generated description