Skip to main content
Log in
A

ahmadazharza

@ahmadazharza·3 public vizzes

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render an SVG, with a custom tick formatter converting abbreviations (e.g., “1.4G” to “1.4B”). The chart removes default axis domains and tick lines, adds gridlines via negative tick sizes, and labels the axes and title in styled text.

Apr 25, 2019
Loading thumbnail…

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.

Apr 25, 2019
Loading thumbnail…

Making a Bar Chart

This bar chart displays the 2018 population estimates for the ten most populous countries, sourced from the United Nations World Population Prospects 2017. The chart uses horizontal bars, with countries on the y-axis and population on the x-axis, rendered as an SVG. The visualization is built with D3 v5, employing `scaleLinear` and `scaleBand` for scales, and `axisLeft` and `axisBottom` to draw the axes. Data is loaded from a CSV file using D3’s `csv` function, and population values are multiplied by 1000 to reflect the actual figures.

Apr 25, 2019