Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited Sep 23, 2019

Created on Sep 23, 2019

This example shows a bar chart of the top 10 most populous countries in 2018, based on United Nations data, with customized axes. It builds on a basic bar chart by removing default axis lines, adding grid lines through tick sizing, and formatting population labels with suffixes like “B” for billions. The code uses D3 v5 APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, along with SVG rendering. Population values from the CSV are multiplied by 1000 to reflect true counts.

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 example shows a horizontal bar chart of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It builds on a basic bar chart by customizing the D3 axes, removing default tick lines, and reformatting population values with abbreviations like "B" for billions. The code uses D3 v5 APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, rendering to SVG. Population data is loaded from a CSV file and multiplied by 1000 to reflect actual values.

Eedishin

96% match

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 United Nations estimates. It demonstrates customized D3 axes, removing default domain lines and tick lines while applying custom tick formatting and labels. The code uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft from D3 v5 to render the SVG, with population values multiplied by 1000 and formatted using d3.format.

IIgor Oliveira

96% match

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It highlights customized D3 axes, including formatted tick labels that abbreviate large numbers, removed axis lines, and custom gridlines. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the chart in SVG. The population values are multiplied by 1000 from the CSV data, and a custom tick format converts billions to "B".

YYifu Chen

95% match

Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects. The chart highlights custom axis formatting and styling, including a tick format that converts large numbers (e.g., G to B) and the removal of default axis lines. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and axes within an SVG canvas. A CSV file supplies the data, and CSS styles the text and tick marks.

DDaniel Piqué

95% match

Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries in 2018, using population estimates from the United Nations World Population Prospects. It builds on the basic bar chart by customizing D3 axes, removing the default domain lines and tick marks, and reducing y-axis clutter. The x-axis uses a custom tick format to abbreviate large numbers (e.g., “1.4B”), and both axis labels and the title are styled via CSS. The implementation uses D3 v5's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs with an SVG rendering.

NNita

95% match

Loading thumbnail…

Customizing Axes

This example shows a bar chart of the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects. The chart customizes both axes: the y-axis removes the domain line and tick lines, while the x-axis applies a custom tick format that abbreviates large numbers using the `d3.format` function, replacing 'G' with 'B'. Built with d3.v5, it uses `scaleLinear` and `scaleBand` for positioning, with `axisBottom`, `axisLeft`, and SVG rendering to display the data.

AAveryBurke

95% 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

95% match

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects. It demonstrates customized D3 axes by removing default domain lines, adding axis labels with large fonts, and applying tick formatting. The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, with SVG rendering. Axes are manually styled via CSS classes, and the x-axis ticks are sized to span the chart height.

Kkesmith21

95% match