Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited Dec 6, 2020

Created on Dec 6, 2020

This example displays the populations of the world’s top billionaires as a horizontal bar chart, using data from a sample CSV with United Nations estimates. It builds on a basic bar chart by customizing both axes: the left y-axis labels are cleaned of tick lines and the domain, while the bottom x-axis uses `scaleLinear` and `axisBottom` with a custom tick format that converts billions to "B". The chart is rendered in SVG using D3 v5, with margins and labels styled via external CSS.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This visualization displays a bar chart of estimated billionaire populations from 2018 United Nations data, comparing the top 10 countries by wealth. The chart customizes D3 axes by removing default domain lines, using a custom tick format that converts abbreviations like 'G' to 'B', and adding axis labels and a title. It uses d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom from D3 v5, with SVG rendering and CSS styling for tick text, lines, and labels. The margins and inner dimensions are computed to position the chart within a 960×500 SVG canvas.

AAjayyy

87% match

Loading thumbnail…

Customizing Axes

This example displays the populations of the top ten most populous countries as a horizontal bar chart. It customizes the axes by removing the default domain lines and using a custom tick format that converts large numbers into abbreviated forms like “B” for billions via D3’s `format` function. The bar chart is rendered with SVG, using `d3.scaleLinear` and `d3.scaleBand` for the x and y scales, `d3.axisBottom` for the x-axis, and `d3.axisLeft` for the y-axis. Data is loaded from a CSV file.

MMajaha21

87% match

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. The example showcases customized D3 axes, including a horizontal axis with tick labels formatted in abbreviated units (e.g., "B" for billion) and a vertical categorical axis stripped of its domain line and tick marks. Built with D3 v5, the visualization uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG bars and customized axes, with data loaded from a CSV file.

Ccbruml

86% match

Loading thumbnail…

Customizing Axes

This horizontal bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations estimates. It showcases D3 axis customization, including formatted tick labels that convert values to billions, custom tick sizes, and a labeled x-axis. The code uses `d3.csv`, `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `format` from D3 v5, rendering an SVG with styled text and gridlines. The visualization is a refined follow-up to a basic bar chart tutorial.

Ssppcmccoy

86% match

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the populations of the top 10 most populous countries, using 2018 United Nations estimates. The chart customizes both axes: the left axis removes domain and tick lines, while the bottom axis uses `d3.axisBottom` with a tick format converting billions to 'B' and adds a "Population" label. The code relies on `d3.csv`, `d3.scaleLinear`, and `d3.scaleBand` to render SVG rectangles with steelblue fills.

SSteven Prichard

86% match

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It emphasizes axis customization, including formatted tick labels (e.g., “1.42B”), horizontal grid lines, and a custom axis label, all rendered as SVG. The code uses D3 v5 with `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, and loads data from a CSV file via `csv()`. Population values are multiplied by 1,000 to reflect actual figures.

Nnicfavfar

86% match

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. It demonstrates customized D3 axes: the y-axis removes its domain and tick lines, while the x-axis uses a custom tick format that converts values like "1.42G" to "1.42B" and includes a label. The chart is rendered as SVG with D3 v5, using `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`.

Jjnpatel

86% match

Loading thumbnail…

Customizing Axes

This bar chart shows the population of the top 10 most populous countries, ordered vertically by country name, with a horizontal axis for population values. The chart highlights customized axes: the y-axis removes its domain line and tick lines, while the x-axis uses a custom tick format via `d3.format` that replaces 'G' with 'B' (e.g., 1.4B) and draws grid lines with `tickSize`. The SVG is built using `d3.scaleLinear` and `d3.scaleBand`, with axes rendered by `d3.axisBottom` and `d3.axisLeft`. Data comes from the 2018 UN World Population Prospects estimate.

YYogesh Joshi

85% match