Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published0🌍 Public
EEbenezer Oladutemu
Last edited May 29, 2020
Created on May 15, 2020
Forked from Customizing Axes

This example visualizes the population of the top 10 most populous countries from the United Nations' 2018 World Population Prospects, using a bar chart with customized axes. The chart displays country names on the y-axis and population values on the x-axis, with gridlines extending across the plot. Built with D3 v5, the code uses `d3.axisBottom` and `d3.axisLeft` to generate axes, and customizes tick formatting via `d3.format` (converting "G" to "B" for billions). The x-axis label and title are added as text elements, while tick lines and domain paths are selectively removed or styled through CSS.

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 bar chart displays the population of the top 10 most populous countries using 2018 data from the United Nations World Population Prospects. It showcases customized D3 axes, with a linear scale for population on the x-axis and a band scale for country names on the y-axis. The chart uses `d3.axisBottom` and `d3.axisLeft` to generate axes, with custom tick formatting that converts large numbers to abbreviations. The `.tick line` and `.domain` elements are selectively removed to clean up the visual layout, while SVG text elements add titles and axis labels.

YYINGNAN DENG
96% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries from the 2018 United Nations World Population Prospects estimate. It demonstrates customized D3 axes, including a bottom axis with abbreviated tick labels (converting billions to “B”) and a left axis with removed domain and tick lines. The code uses D3 v5 APIs such as `csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, rendering SVG elements inside a fixed-width viewport. Custom tick formatting and axis label styling are applied via the `format` module and CSS.

AAronNaylor
96% match
Loading thumbnail…

Customizing Axes

This bar chart visualizes the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The visualization demonstrates customized D3 axes: the left axis removes its domain and tick lines, while the bottom axis uses a custom tick format that abbreviates large numbers (converting 'G' to 'B' for billions) and extends tick lines across the chart. The code employs d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom, and d3.format, rendering as SVG with data loaded from a CSV file.

MMatthewJSonnen
95% match
Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects estimate. It demonstrates customized D3 axes: the y-axis removes domain lines and ticks for a cleaner look, while the x-axis formats population values with abbreviations (e.g., “B” for billions) and adds a descriptive axis label. The code uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format`, rendering as SVG.

Ccbruml
95% match
Loading thumbnail…

Customizing Axes

This bar chart visualizes the population of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects. The chart shows animated bars that grow in width over five seconds, using a linear scale for the population axis and a band scale for country names. Customized D3 axes are implemented via `axisBottom` and `axisLeft`, including a tick format that converts large numbers to billions. The y-axis lines and domain are removed, while grid lines extend across the chart, with labels styled through CSS.

Ttusharsharma10
95% match
Loading thumbnail…

Customizing Axes

This example displays the population of the top 10 most populous countries as a horizontal bar chart, using data from the 2018 United Nations World Population Prospects. It highlights customized axis styling, including removed tick lines and domain paths, custom tick label formatting that converts G to B for billions, and styled text using `d3.axisBottom` and `d3.axisLeft`. The visualization leverages d3.scaleLinear and d3.scaleBand for scales, d3.format for number formatting, and renders SVG with margins and labels like "Population".

Xxiaopangzi2333
95% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects estimate. It builds on a basic bar chart example by customizing the axes: the y-axis removes its default domain and tick lines, while the x-axis uses a custom tick format that converts abbreviations (G to B) and draws horizontal gridlines via negative tick sizes. The chart is rendered using D3 v5's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` within an SVG, with styling applied through CSS classes.

RRemustus
95% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects estimate. It builds on a basic bar chart example by customizing the axes: the y-axis removes its default domain and tick lines, while the x-axis uses a custom tick format that converts abbreviations (G to B) and draws horizontal gridlines via negative tick sizes. The chart is rendered using D3 v5's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` within an SVG, with styling applied through CSS classes.

RRemustus
95% match