Skip to main content
SimilarExport ZIP
100%

Customizing Axis

✓ Published1🌍 Public
CCarloGato
Last edited Dec 3, 2019
Created on Dec 3, 2019
Forked from Making a Barchart

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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
93% 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
92% match
Loading thumbnail…

Customizing Axis

This example shows a horizontal bar chart of the nine most populous countries, using population values loaded from a local CSV file. The chart customizes the bottom axis with a tick formatter that converts large numbers into abbreviated units (e.g., "G" becomes "B"), draws light gray grid lines, and removes the default axis domains. It uses D3 v6 APIs like `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the scales and axes, with SVG rectangles for the bars and styled text for labels and title.

JJoachim Klug
92% 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
92% 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
92% match
Loading thumbnail…

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
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