Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Customizing Axes

Public visualization

Viewing a saved revision (read-only)

ae99f1edfeda46ebb27e52a658d71673

Customizing Axes

0 stars1🌍 Public
Uujjwalgarad
Last edited Dec 8, 2020
Created on Dec 8, 2020
Forked from Shapes with SVG

This visualization displays the populations of the ten most populous countries as horizontal bars, demonstrating customized axes in D3 v6 within a React framework. It uses `d3.scaleLinear` and `d3.scaleBand` to position bars, while `d3.axisBottom` and `d3.axisLeft` render the axes. The bottom axis applies a custom tick format via `d3.format` (converting billions to "B"), and both axes have their domain lines and ticks partially removed for a cleaner look. Data comes from an external CSV file loaded with `d3.csv`.

AI-generated description

React Starter code.