Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Stylizing Bar Chart

Public visualization

Viewing a saved revision (read-only)

0357a0652e8b4dfca57995cb5eb27585

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