Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Activity 7

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

97b76c84a4204f18bbf5b450ca6224a2

Open

Activity 7

0 stars0🌍 Public
MManideeprenikindi
Last edited Jul 22, 2023
Created on Jul 22, 2023
Forked from Hello VizHub

This example displays a horizontal bar chart of 2020 population data by country, with green bars and blue axis ticks styled via CSS. It uses React for component structure, rendering SVG elements like `rect`, `text`, and `line` directly. D3 v5 utilities such as `scaleBand`, `scaleLinear`, `max`, and `format` handle scaling and tick formatting, with custom `AxisBottom` and `AxisLeft` components defining the axes via JSX. The chart loads data through a custom `useData` hook and includes tooltips via SVG `<title>` elements.

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.