Skip to main content
SimilarExport ZIP
100%

Cusomizing Axis

✓ Published1🌍 Public
HHadi Boukdir
Last edited Jul 16, 2019
Created on Jul 16, 2019
Forked from Making a Bar Chart

This example shows a horizontal bar chart of regional populations, with a customized axis that formats large numbers (e.g., converting billions to a compact "B" suffix) and removes default axis domain lines. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, along with the `format` API for tick labels. Data is loaded from a CSV via `d3.csv` and rendered as SVG rectangles. The chart also includes a titled label for the population axis and light-green bars.

AI-generated description

bar chart

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of country populations, with a custom tick format that abbreviates large numbers from billions (G) to billions (B). It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to position bars and axes, with data loaded from a CSV via `d3.csv`. The axis ticks are formatted using D3’s `format` function and the bars are styled with a blue fill in SVG.

LLonwabo11
90% 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
90% 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
90% match
Loading thumbnail…

customizing axis

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()`.

AAkash
90% match
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
90% 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
90% match
Loading thumbnail…

Customizing Axis

This example shows a horizontal bar chart of population data for ten countries, with a customized axis layout using margins to position the labels and tick marks. The visualization uses D3 v5 with an SVG rendering approach, importing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from the D3 library. Population values from the CSV file are multiplied by 1000 before being mapped to the x-axis scale, while country names are mapped to the y-axis band scale. The chart displays the data as steelblue rectangles, with the bottom axis explicitly translated to the inner chart height.

RRenato Francia Castillo
90% match
Loading thumbnail…

Customizing Axis (own)

This example shows a horizontal bar chart of country populations using D3 v5, with a custom-styled y-axis and numeric labels for each bar. The chart loads population data from a CSV file, scales the values to a linear x-axis and a banded y-axis, and renders filled steel-blue rectangles via SVG. It uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with margins and a translated group element to position the axes and bars.

JJustinS1209
89% match