Customize Axis for a Bar Chart

Customizing Axis

This example displays a horizontal bar chart of the top 10 most populous countries, with population values read from a CSV file. The chart customizes both axes: the y-axis removes domain lines and ticks, while the x-axis uses `d3.axisBottom` with a custom formatting function that converts millions to abbreviations like “B” for billion. The SVG rendering uses `d3.scaleLinear` and `d3.scaleBand` to map data, with grid lines created via the x-axis tick size.

RRod Potter

Customizing axes

This example shows a horizontal bar chart of the top 10 most populous countries, using population data loaded from a CSV file. It customizes the axes by removing domain lines and tick lines from the y-axis, while the x-axis uses a custom tick format that abbreviates large numbers (e.g., converting billions to "B") via d3.format. The chart is rendered with SVG using d3.scaleBand for the categorical country labels and d3.scaleLinear for population values. Axis generation relies on d3.axisBottom and d3.axisLeft, with tick size extended across the plot for grid lines, and a title and axis label added as text elements.

AAnita Tse

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

Customizing axes

This example shows a horizontal bar chart of the top 10 most populous countries, with population values displayed along the x-axis and country names on the y-axis. It customizes axis elements by removing domain lines, using abbreviated tick labels that convert "G" to "B" via `format('.3s')`, and adding a rotated axis title. The chart is built with D3 v5, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, rendering to SVG from a CSV file. Grid lines are created through `tickSize(-innerHeight)`, and the y-axis’s domain and tick lines are removed.

HHasideluxe

PPedro Ernesto Tramontina

Customize Axis

This example displays a horizontal bar chart of the populations of the top ten most populous countries, with a customized axis. D3’s `axisBottom` and `axisLeft` are used to generate the scales, with the x-axis formatted via `tickFormat` to abbreviate numbers and replace 'G' with 'B'. Grid lines are extended using `tickSize`, while axis domains are removed. The chart renders as an SVG and reads data from a CSV file.

Customizing Axis

This bar chart displays the population of the top 10 most populous countries, using a horizontal layout with steel-blue bars. The axes are customized: the y-axis removes its domain line and tick lines, while the x-axis uses a custom tick formatter via `d3.format` to abbreviate values (e.g., converting “G” to “B”) and includes grid lines extending across the chart. Built with d3.v5 and SVG, the code employs `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`. Population data is read from a CSV file and multiplied by 1000 to reflect actual counts.

MMateus Farias

Customizing Axis

MMateus Farias

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, with population values displayed in billions on a custom axis. The code uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisBottom with a custom tick format that abbreviates numbers (e.g., converting "G" to "B"). The left axis hides its domain and tick lines, while a title and axis label are added as SVG text elements.

RRiccardo Pressiani