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)

e8cfff3f075b4db0b69de0c705dc4c76

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

0 stars1🌍 Public
RRakshithaRao27
Last edited Mar 7, 2022
Created on Mar 7, 2022

This visualization displays the top 10 most populous countries as a horizontal bar chart rendered with SVG. The chart uses React with hooks `useState` and `useEffect` to load and manage CSV data from a GitHub gist, while D3 v5 provides `csv`, `scaleBand`, and `scaleLinear` for data parsing and scaling. Interactive features include grid lines and axis tick labels generated with D3's `scaleLinear.ticks()`. The bars visually encode population values through their width, with country names positioned along the y-axis.

AI-generated description

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

See also React Starter.