Skip to main content
๐ŸŒ Public

Share visualization

Send this visualization to others.

Refactored Bar Chart

Public visualization

Refactored Bar Chart

0 stars1๐ŸŒ Public
Ddaneslutzky
Last edited Sep 15, 2021
Created on Sep 15, 2021

This example visualizes the population of ten countries from a UN dataset in 2019/2020 using a horizontal bar chart rendered as SVG. The code loads data with `d3.csv` in a React custom hook (`useData`), then builds the visualization with `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Axis tick marks and labels are generated via custom React components (`AxisBottom`, `AxisLeft`), while `Marks` maps each country to a `<rect>` positioned by the computed scales, with margins applied through a translated `<g>` group.

AI-generated description

A program that loads data about CSS named colors and uses React to render the data.

Comments

Sign in to join the discussion.

MIT Licensed