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)

10ba9b966a4845fa817b4abb3f1cc8e3

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

0 stars0🌍 Public
JJyothicherukuri
Last edited Mar 6, 2022
Created on Mar 6, 2022

This visualization shows the top 10 most populous countries in 2019 using horizontal bar marks, with country names on the y-axis and population values on the x-axis. The bars are rendered as SVG rectangles, with blue grid lines and tick labels generated from the linear scale. The code uses React hooks (`useState`, `useEffect`) to load and transform CSV data via `d3.csv`, then creates scales with `d3.scaleBand` and `d3.scaleLinear`. Axes and ticks are manually positioned using React elements rather than D3 axis components, combining React's declarative rendering with D3's data manipulation and scaling utilities.

AI-generated description

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

See also React Starter.