Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Margins And Axis United Nations Bar Char

Public visualization

Viewing a saved revision (read-only)

c514f9383187498a9873bb78597a44d2

Margins And Axis United Nations Bar Char

0 stars1🌍 Public
LLeandro Da Souza
Last edited Mar 30, 2021
Created on Mar 29, 2021

This example visualizes the top 10 most populous countries in 2019 using a horizontal bar chart, rendered as an SVG via React components. The chart encodes population values with bar widths and country names along the y-axis, employing D3’s `scaleBand` and `scaleLinear` for positioning. The code fetches data from a CSV using `d3.csv`, then maps it to React elements, with margins applied through a translated `<g>` group. D3’s `xScale.ticks()` generates grid lines and tick labels for the x-axis, while y-axis labels are manually positioned.

AI-generated description

using React to render and visualize United Nation Population in 2019

I dont know why this doesn't work