Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Customizing aXis

Public visualization

Viewing a saved revision (read-only)

792af23eca674f69801240ef00f862c5

Customizing aXis

0 stars1🌍 Public
Llwinmgsoe
Last edited Apr 23, 2020
Created on Apr 23, 2020
Forked from Customizing aXis

This example visualizes the top ten countries by population using a bar chart rendered as circles, with data sourced from the United Nations. It shows how to customize D3 axes by using `d3.axisBottom` with a custom tick formatter that abbreviates numbers using `d3.format('.3s')` and replaces the 'G' suffix with 'B' to display values in billions. The chart applies `d3.scaleLinear` and `d3.scaleBand` for positioning, and renders SVG circles scaled by population. The axis labels and tick formatting are explicitly styled via CSS, demonstrating custom axis configuration.

AI-generated description

First barchat by D3.js Dataset source UN