Customizing Axes

100%

Customizing Axes

✓ Published1🌍 Public

Last edited Nov 30, 2020

Created on Nov 30, 2020

This bar chart displays the top 10 most populous countries using a horizontal layout, with country names on the y-axis and population values on the x-axis. The visualization highlights custom axis styling, including removed default axis lines, tick marks with a gray tone, and formatted population labels that abbreviate large numbers using D3's `format` function. It uses `d3.csv` to load population data, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the numeric x-axis, rendering with SVG. The chart also adds 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 displays a horizontal bar chart of the top 10 most populous countries, with population values on the x-axis and country names on the y-axis. The chart uses custom tick formatting to abbreviate large numbers (e.g., converting billions to "B") and removes axis domains and tick lines, replacing them with subtle gridlines. Rendered as SVG, the visualization is built with D3 v5, using `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, `d3.axisLeft`, and `d3.format`. Data is loaded from a CSV file and parsed into numeric population values.

CClara Hu

94% match

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top 10 most populous countries using population data from a CSV file. The chart customizes both axes: a linear x-axis formats population values in billions with a custom tick formatter, while a band y-axis lists country names without domain lines. Built with D3 v5, the visualization uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles, with hover effects changing bar colors to red.

SSadi Hassan

93% match

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries, with a horizontal layout and customized axes. The y-axis removes its domain and tick lines, while the x-axis uses a custom tick format that abbreviates large numbers and replaces 'G' with 'B' for billions. The chart is rendered with SVG using D3 v5, loading population data from a CSV file. The code uses `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` to create and customize the visualization.

VVeena Muralidharan

93% match

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, with countries on the y-axis and population values on the x-axis. The visualization customizes both axes by removing default domain lines and tick marks, adding custom tick formatting that converts large numbers to abbreviations like "B" for billions, and appending axis labels. It uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisBottom and d3.axisLeft to generate the axes. Rectangles are drawn in SVG, styled with CSS, and the chart includes a title.

CCaleb

93% match

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries, using horizontal bars ordered by population. The chart customizes axes by applying a tick format that abbreviates large numbers (converting G to B) and removing domain lines for a cleaner look. Built with d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, it renders to SVG and includes labeled axes and a title.

BBarryC7

93% match

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using horizontal bars, with population values on the x-axis and country names on the y-axis. It uses D3 v6 with `scaleLinear` and `scaleBand` for scaling, `axisLeft` and `axisBottom` for customized axes, and `format` to abbreviate large numbers. The chart removes default axis lines, adds grid lines via tick sizes, and includes a title and axis label. Data comes from a CSV file with country and population values.

OOleg

93% match

Loading thumbnail…

Customizing Axes

This bar chart visualizes the top 10 most populous countries using D3.js v7 with an SVG rendering. It highlights customized axes: the y-axis displays country names without an axis line, and the x-axis uses a custom tick formatter converting values from millions to billions (e.g., 'G' replaced with 'B'). Grid lines extend from the x-axis ticks. Population data is loaded from a CSV file via `d3.csv` and scaled linearly for the x-axis and with `d3.scaleBand` for the y-axis. Axis labels and a title are added as text elements.

CChangbeom Shim

93% match

Loading thumbnail…

Customizing Axes

This example demonstrates a horizontal bar chart of the top 10 most populous countries, using a custom-styled axis to improve readability. The chart maps population values to bar lengths and country names to vertical bands, with the x-axis formatted in compact notation (e.g., “1.41B”) via `d3.format`. The bar chart is rendered in SVG using D3 v6, with `d3.scaleLinear` for the x-scale and `d3.scaleBand` for the y-scale. Both axes are customized by removing default domain lines and adding tick marks that extend across the plot. Population data is loaded from a CSV file and multiplied by 1000 before rendering.

GGordon Yang

93% match