Customising Axes

100%

Customising Axes

✓ Published1🌍 Public

Last edited Jan 5, 2020

Created on Jan 5, 2020

This example shows a horizontal bar chart ranking the world’s most populous countries, with custom styling for both axes. The chart uses D3’s `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates, while `axisBottom` and `axisLeft` produce the ticks and grid lines. The y-axis’s default domain and tick lines are removed, and the x-axis labels are formatted using `format('.3s')` to abbreviate large numbers (e.g., converting G to B). The bars themselves are purple SVG rectangles, and the data comes from a CSV file listing population figures.

AI-generated description

This bar chart data comes from (https://datahub.io/JohnSnowLabs/population-figures-by-country#resource-population-figures-by-country-csv).

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This example displays a bar chart of the world's most populous countries, using a horizontal layout where bar length encodes population. The code demonstrates custom axis styling with D3 v5, applying tick formatting that converts large numbers to abbreviated forms and removing default axis lines. It uses `d3.scaleLinear` and `d3.scaleBand` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.format` to customize tick labels. The chart is rendered as SVG, with data loaded from a CSV file.

Nnoelmiranda

94% match

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart ranking country populations, with a linear x-axis and a categorical y-axis. D3’s `scaleLinear` maps population values to bar widths, while `scaleBand` positions the country labels with padding. Axes are generated using `axisBottom` and `axisLeft`, with tick labels formatted via `format('.3s')` to display compact numbers like “1.41M”. The chart updates from a CSV file, which the code loads with `d3.csv` and multiplies each population value by 1000.

MMajaha21

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

Loading thumbnail…

Customizing axes!

This example shows a horizontal bar chart ranking the top ten most populous countries, with population on the x-axis and country names on the y-axis. The visualization customizes both axes by removing domain lines, adding a formatted tick label that converts large numbers into billions, and including a descriptive axis title. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the chart as SVG, pulling data from a local CSV file. The bars are colored steelblue, and text styling is applied via an external stylesheet.

WWai Kit Tsang

93% match

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the world’s ten most populous countries, using population data from a CSV file rendered as SVG. It demonstrates customizing D3 v4 axes by removing domain lines and tick marks, applying a tick format that abbreviates large numbers with `d3.format`, and adding custom axis labels and a title. The chart uses `d3.scaleLinear` and `d3.scaleBand` for positioning, with styled tick text and gridlines defined in CSS.

IIan Russell

93% match

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart ranking the ten most populous countries, with values reformatted from raw numbers into readable abbreviations (e.g., "1.42B"). Custom axis styling removes default domain lines and tick marks, adds a centered "Population" label, and applies a large, muted color palette to text and gridlines. Built with D3 v5, it uses `scaleLinear` and `scaleBand` to map population and country names, `axisBottom` and `axisLeft` for axes, and `csv` to load the data, which is multiplied by 1000 during preprocessing. The chart is rendered as SVG with rectangles filled in steel blue.

DDan Henri

93% match

Loading thumbnail…

customizing Axis

This example presents a horizontal bar chart ranking the world’s most populous countries, with population values on the x-axis and country names on the y-axis. The code uses `d3.csv` to load the data and `scaleLinear` and `scaleBand` for positioning. Axis customization is central: the x-axis uses a custom tick formatter to abbreviate large numbers, while the y-axis removes its domain and tick lines. The chart is rendered as SVG, with grid lines drawn via `tickSize` and formatted using `d3.format`.

Aaidanoconnor1

92% match

Loading thumbnail…

Customizing Axes

This example demonstrates a horizontal bar chart of the world’s most populous countries using a CSV dataset of population figures. It customizes the axes by removing default domain lines, styling tick marks and labels, and formatting tick values with a `.3s` format specifier that converts billions to “B”. The chart uses `d3.scaleLinear` and `d3.scaleBand` to position bars and applies `d3.axisLeft` and `d3.axisBottom` to render SVG axes.

Ssakhabutdinov

92% match