Customizing Axes

100%

Customizing Axes

✓ Published1🌍 Public

Last edited May 7, 2019

Created on May 7, 2019

This bar chart displays the populations of billionaires Jeff Bezos and Bill Gates, using a horizontal bar layout with customized axes. The data is loaded from a CSV file and scaled with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. It uses `d3.axisBottom` and `d3.axisLeft` to render ticks, with a custom `d3.format` function that converts values to abbreviated units. The chart removes default axis domain lines and adds custom labels and a title via SVG text elements.

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 the populations of the world’s top billionaires as a horizontal bar chart, using data from a sample CSV with United Nations estimates. It builds on a basic bar chart by customizing both axes: the left y-axis labels are cleaned of tick lines and the domain, while the bottom x-axis uses `scaleLinear` and `axisBottom` with a custom tick format that converts billions to "B". The chart is rendered in SVG using D3 v5, with margins and labels styled via external CSS.

Ddavid-fon

85% match

Loading thumbnail…

Customizing Axes

This visualization displays a bar chart of estimated billionaire populations from 2018 United Nations data, comparing the top 10 countries by wealth. The chart customizes D3 axes by removing default domain lines, using a custom tick format that converts abbreviations like 'G' to 'B', and adding axis labels and a title. It uses d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom from D3 v5, with SVG rendering and CSS styling for tick text, lines, and labels. The margins and inner dimensions are computed to position the chart within a 960×500 SVG canvas.

AAjayyy

81% match

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the populations of ten countries in millions, with axes customized to improve readability. The y-axis labels are cleanly positioned without tick lines, while the x-axis uses abbreviated number formatting, converting values like “1.42B” from gigabytes notation to billions. SVG rendering leverages D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, with tick formatting via `d3.format`. Data loads from a CSV file, and both axis domains and tick marks are selectively removed for a minimalist presentation.

Kkb1ngram4

79% match

Loading thumbnail…

Customizing Axes

A bar chart displays the population of the top 10 countries, with a custom x-axis that formats large numbers into billions (e.g., "3.41B"). Built with D3 v5, the visualization uses `d3.scaleLinear` and `d3.scaleBand` for the axes, and `d3.axisBottom` with a custom tick format. The y-axis labels are left-aligned, and gridlines extend across the chart via `tickSize`. Data is loaded from a CSV file using `d3.csv`, and the squares are rendered as SVG rectangles.

ZZY Huang

79% match

Loading thumbnail…

Customizing Axes - 072019

This bar chart displays the populations of ten countries, with bars ordered alphabetically along the vertical axis and population values on the horizontal axis. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map data from a CSV file, and `axisBottom` with a custom tick format that abbreviates numbers (e.g., converting gigabytes to billions). The SVG rendering includes a left axis stripped of domain and tick lines, while the bottom axis removes its domain line, creating a clean, minimal appearance with steelblue bars.

Sshallowater

78% match

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top 10 most populated countries, with population values scaled in billions and abbreviated tick labels. The chart customizes its axes by removing domain lines and tick marks from the y-axis, while the x-axis uses a custom tick format that converts G (giga) to B (billion). Built with D3 v7, the visualization loads data from a CSV file and renders to SVG, using scales like `scaleLinear` and `scaleBand` alongside `axisLeft` and `axisBottom` to position bars and labels.

Ddaniel

78% match

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top 10 most populous countries using data from a CSV file, with population values formatted in billions. The chart uses `d3.scaleLinear` and `d3.scaleBand` for positioning, and customizes both axes by removing domain lines, adding grid lines via `tickSize`, and applying a tick format that converts G to B. The left axis labels are positioned with `d3.axisLeft`, while the bottom axis uses `d3.axisBottom`.

BbeauMarko

78% match

Loading thumbnail…

Customizing Axes

This example displays the populations of the top ten most populous countries as a horizontal bar chart. It customizes the axes by removing the default domain lines and using a custom tick format that converts large numbers into abbreviated forms like “B” for billions via D3’s `format` function. The bar chart is rendered with SVG, using `d3.scaleLinear` and `d3.scaleBand` for the x and y scales, `d3.axisBottom` for the x-axis, and `d3.axisLeft` for the y-axis. Data is loaded from a CSV file.

MMajaha21

78% match