Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published0🌍 Public
Aamazighy
Last edited May 18, 2020
Created on May 18, 2020
Forked from 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.

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 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 displays a horizontal bar chart of the top 10 most populous countries using 2018 United Nations population estimates. It highlights customization of D3 axes, including removing the domain lines and tick marks on the left axis, formatting bottom axis tick labels with `d3.format` to abbreviate values, and adding a custom axis label. The chart uses `d3.scaleLinear` and `d3.scaleBand` with SVG rendering.

Nnifemi-sys
95% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with population values scaled in thousands. It demonstrates customized D3 axes: the y-axis removes all tick lines and domain, while the x-axis uses a custom tick format that abbreviates large numbers with suffix letters (e.g., converting 'G' to 'B' for billions). The chart is built using D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, rendering as SVG.

LLittledevil7
94% match
Loading thumbnail…

Customizing Axes

This bar chart visualizes the top 10 most populous countries using 2018 United Nations population estimates. It shows how to customize D3 axes within an SVG rendering. The code uses `d3.scaleLinear` for the population axis and `d3.scaleBand` for countries, applying custom tick formatting via `d3.format` to convert values into billions. The chart also removes axis domains, adds grid lines via negative tick sizes, and includes styled labels, all demonstrated through D3 v5 and CSV-loaded data.

AAltxis
94% match
Loading thumbnail…

Customizing Axes

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.

Aahmadazharza
94% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It demonstrates customization of D3 axes, including abbreviated tick labels using `d3.format`, horizontal grid lines via `tickSize`, and removal of axis domains and tick lines. The chart uses `d3.scaleLinear` and `d3.scaleBand` for positioning, with SVG rendering and custom labels for the title and x-axis.

VVadim Jouk
94% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, using population values multiplied by 1000. The visualization emphasizes customized axes: the left axis removes domain and tick lines, while the bottom axis uses a tick format that converts gigabytes to billions. Built with D3 v5, it employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG chart, with styled tick text, axis labels, and a title defined in CSS.

EErichOh
94% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, using population values multiplied by 1000. The visualization emphasizes customized axes: the left axis removes domain and tick lines, while the bottom axis uses a tick format that converts gigabytes to billions. Built with D3 v5, it employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG chart, with styled tick text, axis labels, and a title defined in CSS.

EErichOh
94% match