Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Fork of Rendering Data with React & D3

Public visualization

Viewing a saved revision (read-only)

cb4f4eaab52d4c44982a43bcdcddef19

Fork of Fork of Rendering Data with React & D3

0 stars2🌍 Public
RRahulSai05
Last edited Mar 8, 2022
Created on Mar 8, 2022

This example shows a horizontal bar chart of student marks, ranking the top 10 students by their scores. The visualization uses React hooks (`useState`, `useEffect`) to load CSV data via `d3.csv`, then renders SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. Axes are drawn manually using mapped tick values rather than D3 axis generators, with React creating the SVG elements. The chart updates reactively as data loads, displaying a loading message until the CSV arrives from the GitHub gist URL.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.