Skip to main content
100%

Stylizing Bar Chart

✓ Published1🌍 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

MIT Licensed

Similar vizzes