Skip to main content
SimilarExport ZIP
100%

customizing axis

✓ Published1🌍 Public
AAkash
Last edited Apr 22, 2022
Created on Mar 23, 2022
Forked from Making bar chat

This example shows a horizontal bar chart of population by country, with a customized x-axis that reformats large numeric values from scientific notation to abbreviated text (e.g., "1.44B" instead of "1.44G"). Using D3 v7, it loads data from a CSV file and maps population to a linear scale and country names to a band scale for the bars. The axes are generated with `axisLeft` and `axisBottom`, while the tick formatter uses `d3.format` with string replacement. Bars are drawn as SVG rectangles with heights derived from `yScale.bandwidth()`.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axis

This example highlights how axis customization can clarify large-number data, using a horizontal bar chart of top countries by population. The chart displays population values in billions, with custom tick formatting that converts D3’s scientific notation (e.g., “1.41G”) into a clearer “B” suffix. The bar chart is rendered in SVG using D3 v7’s scaleLinear, scaleBand, axisBottom, and axisLeft. Data is loaded from a CSV file via d3.csv, with population figures multiplied by 1000. Styling uses CSS for the steelblue rectangles and sans-serif text.

Bbharatbobby
92% match
Loading thumbnail…

Customizing axes

This example shows how to customize axes in a bar chart of country populations, formatting tick labels to abbreviate billions as "B" and removing axis domain lines for a cleaner look. A vertical band scale positions countries, while a linear scale maps population values to bar widths. The code uses d3.csv to load data, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, with SVG rendering and CSS styling for tick colors and font sizes.

Aakshayms0
92% match
Loading thumbnail…

Customizing Axis

This example demonstrates a horizontal bar chart of population data for selected countries, with customized axis formatting. The visualization uses a linear scale for population values and a band scale for country names, rendering bars as SVG rectangles filled with steelblue. It customizes the x-axis tick labels using `d3.format` to abbreviate large numbers with SI prefixes, while the y-axis displays country names. Data is loaded from a CSV file using `d3.csv`, and the chart layout applies explicit margins and padding.

SSophia Murage
91% match
Loading thumbnail…

Customizing Axis

This example demonstrates a horizontal bar chart of population data for selected countries, with customized axis formatting. The visualization uses a linear scale for population values and a band scale for country names, rendering bars as SVG rectangles filled with steelblue. It customizes the x-axis tick labels using `d3.format` to abbreviate large numbers with SI prefixes, while the y-axis displays country names. Data is loaded from a CSV file using `d3.csv`, and the chart layout applies explicit margins and padding.

SSophia Murage
91% match
Loading thumbnail…

Customizing Axis

This example displays a horizontal bar chart of countries with over 100 million inhabitants, using population data from a CSV file. The chart shows a highly customized axis: the y-axis has its tick lines and domain removed entirely, while the x-axis uses a custom tick formatter that abbreviates numbers (e.g., converting 1.4G to 1.4B) and displays gridlines across the full chart height. The code leverages D3 v5 functions like `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `format` to achieve these modifications.

CCarloGato
91% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population figures for nine countries, with a customized x-axis that uses abbreviated tick labels (e.g., “1.50M”). The chart is rendered as SVG using D3 v5, with data loaded from a local CSV file. The code employs `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, `d3.axisLeft`, and `d3.format` to position bars and axes. The y-axis lists country names, while the x-axis range is set from zero to the maximum population value.

LLonwabo11
91% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population data for ten countries, with customized axes. The y-axis displays country names using a band scale, while the x-axis uses a linear scale with tick labels formatted in abbreviated units (e.g., “1.42B”) via d3.format and a custom replace function. The chart is rendered as SVG using d3-scale, d3-axis, and d3-selection, with data loaded from a CSV file and styled through external CSS.

MMarrnj2
91% match
Loading thumbnail…

Customizing axis

This example shows a horizontal bar chart of the top 10 most populous countries, with the x-axis customized to display population values in billions using the `d3.format` function with a `.3s` specifier and a text replacement of 'G' to 'B'. The chart uses `d3.scaleLinear` for the population scale and `d3.scaleBand` for the country categories, rendered as SVG rectangles. The y-axis grid lines and domain are removed, while the x-axis includes custom tick formatting and a labeled axis using `d3.axisBottom`. Data is loaded from a CSV file and multiplied by 1000 to convert values to actual population figures.

Bbcwein
91% match