Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Customizing Axes

Public visualization

Viewing a saved revision (read-only)

dd19a8e42ecd4dc6bccb3dc5eb5fa908

Customizing Axes

0 stars1🌍 Public
Aahmadazharza
Last edited Apr 25, 2019
Created on Apr 25, 2019
Forked from Customizing Axes

This example displays a horizontal bar chart ranking the ten most populous countries, based on 2018 United Nations population estimates. It demonstrates how to customize axis appearance and behavior using D3 v5. The code uses `d3.scaleLinear` and `d3.scaleBand` for scaling, `d3.axisLeft` and `d3.axisBottom` for axes, and custom tick formatting with `d3.format` to abbreviate numbers (e.g., 1.4B). Gridlines are added via axis tick sizes, while axis domains and tick lines are selectively removed for a cleaner look. The chart renders as SVG.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017.