Making a bar chart (customized axes)

100%

Making a bar chart (customized axes)

✓ Published1🌍 Public

Last edited Oct 31, 2022

Created on Jul 27, 2022

This example visualizes the population of the top 10 most populous countries using a horizontal bar chart, based on 2018 estimates from the United Nations World Population Prospects. It demonstrates customized D3 axes, including a formatted bottom axis that abbreviates large numbers (e.g., converting billions to "B") and a left axis with tick labels and grid lines. The code uses D3 v5 APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format`, rendering the chart as SVG with styled rectangles and text labels.

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

94% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It demonstrates how to customize D3 axes, including a custom tick format that abbreviates large numbers with the `format('.3s')` method and replaces 'G' with 'B'. The visualization uses `d3.csv` to load data, `scaleLinear` and `scaleBand` for scaling, and `axisLeft` and `axisBottom` to render the axes. The chart is rendered as SVG with steelblue bars and labeled axes.

MMargaret Yao

94% match

Loading thumbnail…

Customizing Axes

This bar chart shows the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization highlights customized D3 axes, including a horizontal axis formatted with abbreviated numbers (using `d3.format` to convert millions and billions) and a vertical axis with large tick labels. Using D3 v5, the code employs `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, while rendering as SVG. Grid lines extend across the chart, and the axis labels and title are styled via CSS for clarity.

MMartin Lauf

94% match

Loading thumbnail…

Fork of Making a bar chart (customized axes)

This bar chart visualizes the population of the top 10 most populous countries using data from the 2018 United Nations World Population Prospects, with values scaled by a thousand. It demonstrates customizing D3 axes by removing default domain lines, using a custom tick formatter that converts numbers to billion units, and applying styled horizontal grid lines. The visualization is rendered as an SVG using D3 v5's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, with data loaded from a CSV file.

AAbdouEnsaj

94% 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 visualization highlights customized D3 axes, including a horizontal axis that converts large population values into abbreviated units like “1.4B” and styled tick lines and labels. Built with d3.v5, the code uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to position bars and axes, with data loaded from a CSV file and rendered as SVG.

AAbhijeet Panda

94% match

Loading thumbnail…

Customizing Axes

AAbhijeet Panda

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

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

93% match