🌍 Public
Viewing a saved revision (read-only)
e81c5c7c880e49d196952e4f669ed048
ICE-6 Rendering Marks and Channels with React & D3
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 descriptionAn example showing the capabilities of VizHub:
- Loads D3 via UNPKG.
- Demonstrates use of
importfrom"d3". - Demonstrates use of
importfrom local ES6 modules.