Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

6_Task 1

Public visualization

Viewing a saved revision (read-only)

fc2979b0dda142bebedc22ff0e77627d

6_Task 1

0 stars0🌍 Public
Llingaladineshteja23@gmail.com
Last edited Apr 6, 2024
Created on Apr 6, 2024
Forked from Hello VizHub

This visualization displays the population of the top 30 countries in 2020 as a horizontal bar chart. Population values, read via `d3.csv` from a remote GitHub dataset, are formatted with `d3.format` and converted from raw values to millions. The chart is built with React, rendering SVG rectangles for each bar, with axes generated by custom `AxisBottom` and `AxisLeft` components using `d3.scaleBand` and `d3.scaleLinear`. A tooltip, implemented as an SVG `<title>` element, shows the formatted population on hover. The axis tick marks and labels are styled with CSS, and the x-axis is labeled "POPULATION-2020."

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.