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)

cec805dcda1342e7b31eb5fef78f0490

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