Customizing Axes

100%

Customizing Axes

✓ Published1🌍 Public

Last edited Apr 25, 2019

Created on Apr 25, 2019

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.

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries using 2018 United Nations population estimates. It highlights how to customize D3 axes, including removing domain lines and tick lines, adding an axis label, and formatting tick values with `d3.format` to abbreviate large numbers. The chart uses `d3.scaleLinear` and `d3.scaleBand` for positioning, with SVG rendering and custom tick styling via CSS.

Yylzami40

95% match

Loading thumbnail…

Customizing Axes

This example presents a horizontal bar chart of the top 10 most populous countries using 2018 United Nations population estimates. The chart demonstrates D3 axis customization, using `d3.axisBottom` with `.tickFormat` to abbreviate population numbers (converting "G" to "B"), custom tick sizes that extend through the chart, and hidden domain lines. It also uses `d3.scaleBand` and `d3.scaleLinear` to map countries and populations, with SVG rendered bars and styled text labels.

Xxuinleaf849

95% match

Loading thumbnail…

Customizing Axes

This example presents a horizontal bar chart ranking the ten most populous countries in 2017, using population data from the United Nations World Population Prospects. The visualization customizes both axes: the y-axis displays country names with gridlines removed, while the x-axis uses `d3.axisBottom` with a tick formatter that converts large numbers (e.g., G to B) and adds horizontal gridlines via `tickSize`. Built with d3.v5, it employs `scaleLinear` and `scaleBand` to map data, rendering SVG rectangles styled with a gold fill.

OOvxOO

95% match

Loading thumbnail…

Customizing Axes

This example presents a horizontal bar chart ranking the top 10 most populous countries (from a 2018 UN World Population Prospects estimate) by their population. The visualization stands out through its custom axes: the y-axis strips away default domain lines and tick lines, while the x-axis uses a custom tick format (d3.format('.2s')) and extends grid lines across the plotting area. Built with d3.v5, the code uses `scaleLinear` and `scaleBand` to map data to coordinates, `axisLeft` and `axisBottom` to generate axes, and SVG for rendering, with extensive styling applied via CSS.

AAna

94% match

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries using 2017 United Nations population estimates, with country names on the y-axis and population on the x-axis. The visualization highlights axis customization in D3 v5, including a formatted tick label that abbreviates large numbers with the `d3.format` function, a removed domain line, and custom tick marks that extend across the chart. The code uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG, with teal bars and styled text labels.

Cchang ho lee

94% match

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The visualization highlights custom axis styling, removing default domain lines and tick lines on the y-axis while adding grid lines and a formatted x-axis that converts values from billions to a "B" suffix. The code uses D3.js v5, scaling data with `scaleLinear` and `scaleBand`, and configures axes via `axisBottom`, `axisLeft`, and `.tickFormat`. Custom fonts, colors, and labels are applied through CSS, with SVG rendering for the output.

Ttkreglhn

94% match

Loading thumbnail…

Customizing Axes

This horizontal bar chart displays the top 10 most populous countries using 2018 United Nations estimates. It shows how D3 axes can be customized by removing gridlines and domain paths, adding a pink axis label, and formatting population values using `d3.format('.3s')`. The chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, rendered as SVG via D3 v5.

Aamazighy

94% match

Loading thumbnail…

Customizing Axes

This example presents a horizontal bar chart of the top 10 most populous countries, based on 2018 United Nations estimates. It highlights customized D3 axes: the bottom axis uses tick formatting that abbreviates large numbers (e.g., converting millions to "B"), while the left axis removes its domain and tick lines for a cleaner look. The chart is rendered as SVG using d3.scaleLinear, d3.scaleBand, axisBottom, and axisLeft, with gridlines via tickSize(-innerHeight) and a custom title and axis label.

AAjayyy

94% match