Customizing axes

100%

Customizing axes

✓ Published1🌍 Public

Last edited Oct 30, 2018

Created on Sep 9, 2018

This example shows a horizontal bar chart of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart customizes both axes by removing default domain lines and tick lines, and formats population labels to abbreviate numbers with a "B" suffix. Built with d3.v5, it uses `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG, with tick lines extended across the plot area and a custom axis label.

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

97% match

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

97% match

Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It demonstrates customizing D3 v5 axes, including a bottom axis with formatted tick labels that abbreviate population numbers and remove the domain line, a left axis stripped of its domain and ticks, and custom axis labels. The chart uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG visualization.

CCurran Kelleher

96% match

Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. It visualizes population values with horizontal bars and customizes the axes: the y-axis labels are kept, while grid lines are removed, and the x-axis uses a `format('.3s')` tick formatter to abbreviate numbers (with 'G' replaced by 'B' for billions). Built with D3 v5, it uses `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom`, rendering SVG elements directly within a pre-sized `<svg>` container.

Eexcalibur1987

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

96% match

Loading thumbnail…

Customizing Axes

This example shows a bar chart of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017. It highlights customized D3 axes: the y-axis removes its domain and tick lines, while the x-axis uses a custom tick format that abbreviates numbers and converts 'G' to 'B'. The chart uses d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft, rendering to SVG with a margin-based layout.

LLittledevil7

96% match

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population for the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It demonstrates how to customize D3 axes by removing domain lines, adjusting tick sizes and formats (using d3.format to abbreviate large numbers), and adding axis labels. The visualization uses D3 v5 with d3.scaleBand and d3.scaleLinear for scales, and d3.axisLeft and d3.axisBottom for rendering axes as SVG elements, with custom styling applied via CSS.

Jjacobs-splunk

96% 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. The chart customizes its axes by removing default domain lines and tick marks, applying a custom tick format that abbreviates large numbers (e.g., converting billions to "B"), and adding descriptive axis labels. Built with d3.v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG, with data loaded from a CSV file.

Ddtdenver

96% match