Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published0🌍 Public
Nnoelmiranda
Last edited Jul 18, 2019
Created on Jul 18, 2019
Forked from Making a Bar chart

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.

AI-generated description

country,population China,1415046 India,1354052 United States,326767 Indonesia,266795 Brazil,210868 Pakistan,200814 Nigeria,195875 Bangladesh,166368 Russia,143965 Mexico,130759

MIT Licensed

Similar vizzes

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
95% 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
94% 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
94% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the world’s ten most populous countries, with a customized axis layout. It uses d3.csv to load population data, then applies d3.scaleBand and d3.scaleLinear to map countries and values, and d3.axisLeft plus d3.axisBottom to render the axes. The x-axis ticks are formatted with d3.format and custom labels, while grid lines extend across the chart.

Hhugomell
94% match
Loading thumbnail…

Customizing Axes

This example creates a horizontal bar chart of the world's ten most populous countries, using D3.js version 5 with an SVG rendering approach. The bars are scaled linearly by population, with a custom axis formatter that converts values to billions using D3's `format` function and a `.replace('G', 'B')` call. The chart displays a title, an x-axis label, and removes default axis lines using `.remove()`. The data is loaded from a CSV file using `d3.csv`, with population values multiplied by 1000.

Ppadmanabhan-rajendrakumar
94% match
Loading thumbnail…

Customising Axes

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.

Yyktan89
94% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the ten most populous countries, with a customized axis layout and formatting. It uses D3 v5 with `csv`, `scaleLinear`, and `scaleBand` to map population values and country names, while `axisBottom` and `axisLeft` render the axes. Axis ticks are formatted with `format(".3s")` to abbreviate numbers, and grid lines are styled via CSS. The SVG is drawn with `select` and appended `rect` elements, and the legend titles are added as text elements.

JJefferson Abreu
93% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, with custom formatting on the population axis that converts values into billions using a "B" suffix. It loads data from a CSV file and renders SVG bars using D3 v5, applying a linear scale for population and a band scale for countries. The chart uses `d3.axisLeft` and `d3.axisBottom` with tick customization, removes default axis lines, and adds a title and axis label.

Mmatthewfresh
93% match