Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published0🌍 Public
AAjayyy
Last edited May 21, 2020
Created on May 21, 2020
Forked from Customizing Axes

This example presents a horizontal bar chart of the top 10 most populous countries, based on 2018 United Nations estimates. It highlights customized D3 axes: the bottom axis uses tick formatting that abbreviates large numbers (e.g., converting millions to "B"), while the left axis removes its domain and tick lines for a cleaner look. The chart is rendered as SVG using d3.scaleLinear, d3.scaleBand, axisBottom, and axisLeft, with gridlines via tickSize(-innerHeight) and a custom title and 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. 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 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 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
96% match
Loading thumbnail…

Customizing Axes

This example shows a bar chart of the top 10 most populous countries using 2018 data from the United Nations, and it demonstrates how to customize D3 axes. The chart uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.axisBottom with a custom tick format that converts billions to "B". The code removes axis domains and tick lines, applies custom styling via CSS, and appends axis labels and a title. Rendering is done with SVG via D3 v5.

Xxiaopangzi2333
96% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries using 2018 United Nations population estimates, with custom tick formatting and axis styling. It builds on a basic bar chart by using D3’s `axisBottom` and `axisLeft` to render axes, while removing default domain lines and tick lines. The x-axis ticks use `format('.3s')` to abbreviate numbers and replace ‘G’ with ‘B’ for billions, and a custom label is appended. The chart also removes the y-axis’s domain and tick lines, leaving only country labels.

Yynot-krats
95% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries using 2018 United Nations population estimates, with customized axes. It builds on a basic bar chart by applying D3’s `axisBottom` with a tick format that abbreviates large numbers (e.g., converting billions to “B”) and removing default axis domain lines. The left axis uses `axisLeft` with its domain and tick lines stripped. The visualization uses `d3.scaleLinear` and `d3.scaleBand` for scales, with SVG rendering, and includes styled axis labels and a title via CSS.

Hharshitveda
95% match
Loading thumbnail…

Customizing Axes

This horizontal bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with a customized D3 v5 axis design. The vertical axis labels are left intact while the axis line and tick marks are removed, and the horizontal axis uses a custom tick format (converting G to B for billions) with grid lines extending across the plot. The chart uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` from D3, renders as SVG, and applies styling through an external CSS file for font sizes and colors.

Ssubburaj16061927
95% match
Loading thumbnail…

Customizing Axes

This horizontal bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with a customized D3 v5 axis design. The vertical axis labels are left intact while the axis line and tick marks are removed, and the horizontal axis uses a custom tick format (converting G to B for billions) with grid lines extending across the plot. The chart uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` from D3, renders as SVG, and applies styling through an external CSS file for font sizes and colors.

Ssubburaj16061927
95% 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 2017. It demonstrates customization of D3 axes, including removing default domains, using a custom tick formatter that converts billions to a readable format, and applying gridlines. The chart is rendered as SVG, with axes created via `d3.axisBottom` and `d3.axisLeft`, and styling applied through CSS classes.

Aa-ydobon
95% match