Skip to main content
SimilarExport ZIP
100%

Customizing Axis

✓ Published1🌍 Public
PPredrag Nikolic
Last edited Apr 3, 2021
Created on Apr 3, 2021
Forked from Making a bar chart

This example shows a horizontal bar chart of the world’s most populous countries, ranking China, India, and the United States at the top by population. It uses D3 v6’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the axes and bars in SVG. The x-axis uses `tickFormat` to abbreviate large numbers and `tickSize` to draw grid lines. Data loads from a CSV file and is parsed with `d3.csv`, while axis labels and a title are styled via CSS.

AI-generated description

This is Free Code Camp course code

MIT Licensed

Similar vizzes

Loading thumbnail…

customizing Axis

This example presents a horizontal bar chart ranking the world’s most populous countries, with population values on the x-axis and country names on the y-axis. The code uses `d3.csv` to load the data and `scaleLinear` and `scaleBand` for positioning. Axis customization is central: the x-axis uses a custom tick formatter to abbreviate large numbers, while the y-axis removes its domain and tick lines. The chart is rendered as SVG, with grid lines drawn via `tickSize` and formatted using `d3.format`.

Aaidanoconnor1
92% match
Loading thumbnail…

Customizing Axis

This example displays a horizontal bar chart of the world’s most populous countries, with China leading and the United Kingdom at the bottom. The code uses D3 v6 with SVG rendering, reading population data from a CSV file. It customizes both axes by removing domain lines and tick marks, applying a tick format that converts large numbers to abbreviations like “1.44B”, and adding an axis label. The bars are colored steelblue, with a title and sans-serif text styling from the included stylesheet.

Xxsg13
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
91% 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
91% match
Loading thumbnail…

Customizing Axes

This example demonstrates a bar chart displaying the population of ten countries, including China and India, sorted by value, with customized axes. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map population counts and country names, while `axisBottom` and `axisLeft` render the axes. The x-axis applies a `tickFormat` with the `.3s` specifier to abbreviate large numbers. Data is loaded from a CSV file via `csv`, and the visualization is rendered as SVG rectangles with steelblue fills.

ZZY Huang
91% 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
91% 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
91% 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
91% match