Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ICE-6 Rendering Marks and Channels with React & D3

Public visualization

Viewing a saved revision (read-only)

e81c5c7c880e49d196952e4f669ed048

ICE-6 Rendering Marks and Channels with React & D3

0 stars1🌍 Public
SShishiraRudrabhatla
Last edited Jun 25, 2022
Created on Jun 25, 2022
Forked from Hello VizHub

This example shows a horizontal bar chart of 2019 telecom sale charges for the top 10 countries by population, rendered as purple SVG rectangles. It uses React hooks (`useState`, `useEffect`) to load and parse CSV data from a GitHub gist via `d3.csv`, then maps the values to a `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The chart includes custom grid lines and tick labels generated from the scales, with the bars positioned through React’s JSX and D3’s scale functions.

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.