xiaopangzi2333

@xiaopangzi2333·3 public vizzes

Customizing Axes

This example shows a bar chart of the top 10 most populous countries using 2018 data from the United Nations, and it demonstrates how to customize D3 axes. The chart uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.axisBottom with a custom tick format that converts billions to "B". The code removes axis domains and tick lines, applies custom styling via CSS, and appends axis labels and a title. Rendering is done with SVG via D3 v5.

Jun 27, 2020

Loading thumbnail…

Customizing Axes

This bar chart shows the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It demonstrates how to customize D3 axes, including removing the y-axis domain and tick lines, formatting x-axis tick labels with `d3.format` to abbreviate numbers, and adding axis labels and a title. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to generate the axes, rendered as SVG.

Jun 27, 2020

Loading thumbnail…

Customizing Axes

This example displays the population of the top 10 most populous countries as a horizontal bar chart, using data from the 2018 United Nations World Population Prospects. It highlights customized axis styling, including removed tick lines and domain paths, custom tick label formatting that converts G to B for billions, and styled text using `d3.axisBottom` and `d3.axisLeft`. The visualization leverages d3.scaleLinear and d3.scaleBand for scales, d3.format for number formatting, and renders SVG with margins and labels like "Population".

Jun 27, 2020