Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Activity 6_Task 1

Public visualization

Viewing a saved revision (read-only)

d06075c822a14e389d80c7d3ea34dc3a

Activity 6_Task 1

0 stars0🌍 Public
SShasankreddyganta@my.unt.edu
Last edited Apr 11, 2024
Created on Apr 11, 2024
Forked from Hello VizHub

This example shows a horizontal bar chart of the 20 most populous countries in 2010, with population values on the x-axis and country names on the y-axis. It uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars, while custom `AxisBottom` and `AxisLeft` components render tick marks and labels. Data is loaded asynchronously from a CSV via `d3.csv` and `useEffect`, with population converted from thousands. A `Marks` component draws each rectangle and includes a `title` element for hover tooltips.

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.