Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Customizing Axis with D3.js

Public visualization

Viewing a saved revision (read-only)

a551c0c8e7b64e10844f56e9f8a35e9f

Customizing Axis with D3.js

0 stars1🌍 Public
CCarloWK1202
Last edited Jul 6, 2022
Created on Jul 6, 2022

This example shows a horizontal bar chart ranking the ten most populous countries, with custom-formatted axis labels and styled gridlines. It uses D3.js v7's `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` modules to position bars and ticks. The chart loads population data from a CSV file, multiplies the values by 1000, and renders bars as SVG rectangles. Custom tick formatting converts values to abbreviated notation, and chart elements are styled via CSS.

AI-generated description