Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Activity6_Tutorial1_Rashmitha

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

ce1c0f8e63c548b1bc711d1f9655a7f1

Open

Activity6_Tutorial1_Rashmitha

0 stars2🌍 Public
Rrashmithatanneru@gmail.com
Last edited Apr 2, 2024
Created on Apr 2, 2024
Forked from Hello VizHub

This example displays a horizontal bar chart of population figures for 30 countries in 2020, sourced from a GitHub-hosted CSV file. The React-based visualization uses D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles, with custom `AxisBottom` and `AxisLeft` components rendering ticks. A tooltip on each bar reveals the exact population, formatted using D3’s `format` function, while green marks and styled axes highlight the data. The chart is rendered entirely as SVG within a React component.

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.