Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Activity 6_Task1

Public visualization

Viewing a saved revision (read-only)

5731e6dc00ba4a1c986da4eb0cb8b456

Activity 6_Task1

0 stars1🌍 Public
HHarshita Vairagade
Last edited Apr 13, 2024
Created on Apr 13, 2024

This example shows a horizontal bar chart of the 30 most populous countries from a 2020 dataset, using population values displayed on the x-axis and country names on the y-axis. The React-based visualization uses D3 v5’s `scaleBand` and `scaleLinear` for positioning, with bars rendered as SVG `<rect>` elements via the `Marks` component. Data is loaded asynchronously from a CSV using `d3.csv`, with axes generated by `AxisBottom` and `AxisLeft` components. The chart includes formatted tick labels (e.g., converting billions) and a title, with green bars styled via CSS.

AI-generated description

A demonstration of how to start using D3 version 6.