Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of ICE-6: Rendering Marks and Channels with React & D3

Public visualization

Viewing a saved revision (read-only)

9c9e20b7412c4e11a89c1509325b793c

Fork of ICE-6: Rendering Marks and Channels with React & D3

0 stars0🌍 Public
SSheshidharreddy
Last edited Mar 8, 2022
Created on Mar 8, 2022

This visualization displays a horizontal bar chart of the top 10 most populous countries in 2019, using React and D3 v5. The code fetches CSV data from a GitHub gist and renders SVG marks with React components, while D3’s `scaleBand`, `scaleLinear`, `csv`, and `max` handle data loading and scaling. Axes are drawn manually from `xScale.ticks()` and y-scale domains, with bars encoded by rectangular marks. The React `useState` and `useEffect` hooks manage asynchronous data loading before rendering the chart.

AI-generated description

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

See also React Starter.