Mohamed Hamza

@HamzaMo·2 public vizzes

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. It shows how to customize D3 axes by removing the domain lines, applying tick formatting with `d3.format` to abbreviate numbers, and adding custom axis labels and a title. The visualization uses D3 v5 with `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, rendering bars in SVG with population scaled to thousands.

Oct 23, 2020

Loading thumbnail…

Stylized Bar Chart

This bar chart displays the top 10 most populous countries in 2020, using horizontal bars ordered by population size. The chart uses React components with d3.scaleBand and d3.scaleLinear for positioning, while data is loaded via d3.csv from the United Nations World Population Prospects 2019 dataset. SVG rectangles render the bars, with d3.format abbreviating axis labels to display values in billions, and the Poppins font styling the clean, minimalist interface.

Oct 23, 2020