Skip to main content
SimilarExport ZIP
100%

Making a Bar Chart and Customizing Axes

✓ Published1🌍 Public
CChristine
Last edited Mar 19, 2020
Created on Mar 17, 2020

This example shows a horizontal bar chart of the population of the top 10 most populous countries, with a title, axis labels, and grid lines drawn using SVG rectangles. The D3 v5 code loads `data.csv` with the `csv` function, then uses `scaleLinear` for the population axis and `scaleBand` for the country categories. Axes are generated with `axisBottom` and `axisLeft`, and tick labels are formatted with a custom function that replaces 'G' with 'B'. The chart applies a margin convention and removes default domain lines to clean up the presentation.

AI-generated description

Making a Bar Chart and Customizing Axes

Topics:

	(1) Representing a data table in JavaScript 
  (2) Creating rectangles for each row
  (3) Using linear and band scales (to make bars)
  (4) The margin convention
  (5) Adding axes

  (6) Formatting numbers
  (7) Removing unnecessary lines
  (8) Adding a visualization title
  (9) Adding axis labels
MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart/Customizing Axis

This example displays a horizontal bar chart of the top 10 most populous countries, using population data loaded from a CSV file. The chart customizes its axes, removing domain lines and using a D3 formatter to abbreviate large population numbers, such as converting billions to "B". The code relies on D3 v7 modules including `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom`. SVG rectangles are drawn to represent each bar, with the chart rendered entirely through D3’s data join and SVG manipulation.

Aadelgrosso
94% match
Loading thumbnail…

Making a bar chart. Customizing the axis.

This example shows a horizontal bar chart ranking the ten most populous countries, with each bar’s length representing population in thousands and a customized bottom axis displaying abbreviated tick labels (e.g., “1B” for billions). The chart uses d3.csv to load the data, then applies scaleLinear and scaleBand for positioning, while axisBottom and axisLeft generate the axes. Grid lines are drawn via tickSize(-innerheight), and the axis labels and title are manually added as SVG text elements. The y-axis ticks are stripped of their default lines and domain for a cleaner look.

XX. N. Chu
92% match
Loading thumbnail…

customizing axes

This example shows a horizontal bar chart of the top 10 most populous countries, with custom axis styling. It uses d3.csv to load population data, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the numeric x-axis. The code removes default axis domains and gridlines via selections, applies custom tick formatting with `format('.3s')` to abbreviate large numbers, and adds axis titles and a graph title. All rendering is done with SVG elements, with bar colors and text styles defined in an external stylesheet.

Ttheaddies
92% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, with population values displayed in billions on a custom axis. The code uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisBottom with a custom tick format that abbreviates numbers (e.g., converting "G" to "B"). The left axis hides its domain and tick lines, while a title and axis label are added as SVG text elements.

RRiccardo Pressiani
92% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries using data from a CSV file, with population values in thousands rendered as circles on a linear scale. The code customizes both axes by removing default domain lines, adding truncated tick labels formatted with d3.format (e.g., changing G to B for billions), and extending tick lines across the chart via tickSize. It uses d3.csv, scaleLinear, scalePoint, axisLeft, and axisBottom in D3 v5, with an SVG rendered scatter-style layout.

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

Customizing Axes of Bar Chart

This example shows a horizontal bar chart ranking the top 10 most populous countries, drawn as SVG rectangles scaled by population values loaded from a CSV. It demonstrates customizing axes: the y-axis uses `d3.scaleBand` with tick lines removed, while the x-axis uses `d3.scaleLinear` with a `d3.axisBottom` that applies a custom tick formatter (converting abbreviations like “B” for billion) and negative tick sizes to create gridlines. The chart also adds axis labels and a title via SVG text elements, using D3 v5’s `select`, `csv`, and `scaleBand` APIs.

JJohn Hamilton Bradford
92% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, using population data from the World Bank. It demonstrates customizing D3 axes by removing the default domain lines and gridlines, formatting tick labels to abbreviate large numbers (e.g., "G" to "B"), and adding custom axis titles and a data source citation. The code uses `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG chart.

YYifei Liu
92% match