Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Tutorial 1 Question 1

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

ce722d3e58384689a0ff7711fbf9a1a7

Open

Tutorial 1 Question 1

0 stars0🌍 Public
Cchandrikachowdary867@gmail.com
Last edited Apr 13, 2024
Created on Apr 13, 2024
Forked from Activity-6

This visualization presents a horizontal bar chart comparing the populations of ten countries in the year 2000. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis, rendering bars as SVG `rect` elements with tooltips. The code creates axes using custom components that call `d3.axisBottom` and `d3.axisLeft`, while data is loaded from a GitHub-hosted CSV file via `d3.csv`. Population values are formatted using D3's `format` function, transforming labels like "G" to "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.