Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

activity 6_Task 1

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

6afbdc1094d242cda7456e30c79fee33

Open

activity 6_Task 1

0 stars1🌍 Public
Sssuryateja804@gmail.com
Last edited Oct 21, 2024
Created on Oct 21, 2024

This example shows a horizontal bar chart of the top 30 countries by population in 2020, sourced from a CSV file via `d3.csv`. The chart uses D3 v5's `scaleBand` for the y-axis (countries) and `scaleLinear` for the x-axis (population), rendered as SVG rectangles in React. Bars are colored light green, with a blue axis line and tick marks, and a formatted axis label "POPULATION-2020". Hovering over a bar reveals a tooltip via the `<title>` element, showing the population value formatted with `d3.format` to replace "G" with "B" for billions.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.