Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited Jan 31, 2019

Created on Jan 31, 2019

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.

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

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

97% 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 visualization demonstrates customized D3 axes, including a bottom axis with tick labels formatted in abbreviated units (converting "G" to "B") and tick lines spanning the full chart height, while the left axis removes its domain and tick lines entirely. The chart is rendered as SVG using D3 v5, with scales from `d3.scaleLinear` and `d3.scaleBand`, and axes from `d3.axisBottom` and `d3.axisLeft`. Labels are styled via external CSS.

Ttracy3057

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

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

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

YYF

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 bar chart visualizes the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It shows population values on a horizontal axis with country names on a vertical axis, using D3’s `scaleLinear` and `scaleBand`. The example demonstrates axis customization, including a custom tick format that abbreviates numbers and converts G to B, and removes default axis lines and ticks. It builds on a previous bar chart example, rendering in SVG with D3 v5.

Yylzami40

96% match