Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited Apr 2, 2020

Created on Apr 2, 2020

This example displays a bar chart of the top 10 most populous countries in 2018, based on United Nations data. It highlights customized D3 axes, including a formatted x-axis using `format('.3s')` to abbreviate population values and gridlines via `tickSize`. The y-axis removes its domain and tick lines for a cleaner look, while axis labels and a title are added using SVG text elements. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to build the visualization.

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 horizontal bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations estimates. It showcases D3 axis customization, including formatted tick labels that convert values to billions, custom tick sizes, and a labeled x-axis. The code uses `d3.csv`, `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `format` from D3 v5, rendering an SVG with styled text and gridlines. The visualization is a refined follow-up to a basic bar chart tutorial.

Ssppcmccoy

96% match

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries in 2018, using population estimates from the United Nations World Population Prospects 2017. The example shows how to customize axes with D3 v5, including tick formatting, axis labels, and grid lines. It uses `d3.csv`, `scaleLinear`, and `scaleBand` to map data, while `axisBottom` and `axisLeft` render the axes with custom tick formats converting values to abbreviated units. The SVG rendering removes default axis domains and applies styled tick lines via CSS.

Ttmrose

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

96% match

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 United Nations estimates, with custom styling applied to the axes. The code uses `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleBand` for scaling, and `d3.axisBottom` and `d3.axisLeft` to render axes. It customizes the x-axis tick format with `d3.format`, removing gridlines and domain lines, and adds axis labels and a title via SVG text elements.

Aalesrinija

95% match

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 United Nations data, and highlights customized D3 axes. The visualization uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, `d3.axisBottom` and `d3.axisLeft` with custom tick formatting that converts values to billions. The code removes default axis domains and tick lines, adds custom axis labels and a title, and renders everything as SVG elements.

CCurran Kelleher

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

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

95% match

Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries using 2018 data from the United Nations World Population Prospects, presented as horizontal bars with population values on the x-axis. It demonstrates customized axes in D3.js: the x-axis uses a linear scale with tick labels formatted in abbreviated units (e.g., “B” for billions), while the y-axis is a band scale for country names, with grid lines and axis labels styled via CSS. The code uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft to render the SVG chart.

Uucsclk

95% match