Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Making a Bar Chart and Customizing Axes

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

2c7efe40b82442dcaa9c32df42bbcb12

Open

Making a Bar Chart and Customizing Axes

0 stars1🌍 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