Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published1🌍 Public
Aarun-subba
Last edited Aug 25, 2020
Created on Aug 24, 2020
Forked from Making a Bar Chart

This example displays a horizontal bar chart of the top 10 most populous countries, using data from the United Nations World Population Prospects 2019. It demonstrates how to customize chart axes: the y-axis labels are left-aligned without tick lines, while the x-axis uses a custom tick formatter to convert large numbers (using `d3.format`’s `.3s` notation) to display billions as "B" instead of "G". The chart also includes vertical gridlines created by setting a negative tick size on the bottom axis. The visualization is built with D3 v5, using `d3.select`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, rendering to an SVG element with CSS styling for fonts and colors.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

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 shows a horizontal bar chart of the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The visualization highlights custom axis styling, removing default domain lines and tick lines on the y-axis while adding grid lines and a formatted x-axis that converts values from billions to a "B" suffix. The code uses D3.js v5, scaling data with `scaleLinear` and `scaleBand`, and configures axes via `axisBottom`, `axisLeft`, and `.tickFormat`. Custom fonts, colors, and labels are applied through CSS, with SVG rendering for the output.

Ttkreglhn
95% match
Loading thumbnail…

Customizing axes

This example displays a horizontal bar chart of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects estimate. The chart’s axes are customized: the y-axis labels appear in red with tick lines removed, while the x-axis uses a tick format that converts values to billions with a ’B’ suffix. Built with D3 v5, it employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG, and includes green tick lines and a purple title.

PPragati Porwal
95% match
Loading thumbnail…

Customizing Axes

This example presents a horizontal bar chart ranking the top 10 most populous countries (from a 2018 UN World Population Prospects estimate) by their population. The visualization stands out through its custom axes: the y-axis strips away default domain lines and tick lines, while the x-axis uses a custom tick format (d3.format('.2s')) and extends grid lines across the plotting area. Built with d3.v5, the code uses `scaleLinear` and `scaleBand` to map data to coordinates, `axisLeft` and `axisBottom` to generate axes, and SVG for rendering, with extensive styling applied via CSS.

AAna
94% match
Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The D3 v6 code imports `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` to construct the visualization. It customizes the x-axis by using a formatter that converts large numbers to abbreviated units and replaces the default "G" suffix with "B". Axis grid lines extend across the chart, while the y-axis labels and domain lines are removed, and the chart is rendered as SVG.

Ddata-inside
94% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries in 2018, using population estimates from the United Nations World Population Prospects. It builds on the basic bar chart by customizing D3 axes, removing the default domain lines and tick marks, and reducing y-axis clutter. The x-axis uses a custom tick format to abbreviate large numbers (e.g., “1.4B”), and both axis labels and the title are styled via CSS. The implementation uses D3 v5's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs with an SVG rendering.

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