Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Stylizing Bar Chart

Public visualization

Stylizing Bar Chart

0 stars1🌍 Public
Aangelathacker123
Last edited Feb 18, 2022
Created on Feb 18, 2022

This example shows a horizontal bar chart of the top ten countries by 2020 population, rendered as SVG within a React component. The bars are styled with a teal fill, and both the plot area and labels use a Poppins font, with custom tick colors. The chart reads data from a CSV file provided by the `d3.csv` loader and uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. The code manually creates axis tick marks and uses a `tickFormat` function with `d3.format` to abbreviate large numbers, converting units from "G" to "B".

AI-generated description

Uses React to render data

Comments

Sign in to join the discussion.

MIT Licensed