Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Task 8_Tutorial1

Public visualization

Viewing a saved revision (read-only)

7e4b501c9a554891982a7607fe2174df

Task 8_Tutorial1

0 stars1🌍 Public
KKeerthi
Last edited Apr 10, 2024
Created on Apr 10, 2024
Forked from Hello VizHub

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, with each bar’s length proportional to population and a tooltip displaying the value in billions. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates. Data is loaded via `d3.csv` from a GitHub repository, axes are rendered as SVG elements with tick marks, and bars are drawn as `rect` elements using the `Marks` component. The chart includes a labeled x-axis and uses a green fill for all bars.

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.