Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published2🌍 Public
Ssakhabutdinov
Last edited Oct 21, 2019
Created on Oct 19, 2019
Forked from Bar Chart

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

Customizing Axes

This example shows a horizontal bar chart of the populations of the ten most populous countries, using a CSV data source. D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` position the bars and axes, while the bottom axis’s tick labels are formatted with `format(".2s")` and a custom replacement of ‘G’ with ‘B’. The chart removes default axis domain lines and y-axis tick marks to create a cleaner look, and appends custom text elements for the axis label and title.

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

customizing axis

This example shows a horizontal bar chart of the world’s top 10 most populous countries, using population data from a CSV file. The chart customizes its axes by removing default domains and tick lines, applying a tick format that abbreviates large numbers (e.g., converting billions to “B”), and adding a styled axis label. Built with D3 v6, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG, with a custom `tickFormat` for the x-axis.

Llarsboergo
92% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the population of the ten most populous countries, using CSV data loaded with `d3.csv`. The chart customizes its axes with `d3.axisBottom` and `d3.axisLeft`, applying a `d3.format` tick formatter that converts values from G to B. `d3.scaleLinear` and `d3.scaleBand` position the bars, while gridlines are created by extending x-axis ticks with a negative tick size. The y-axis’s domain and tick lines are removed for a cleaner look.

1123fischer
92% match