Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

Viewing a saved revision (read-only)

b3e230f4df034b608007f4396e05056c

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

0 stars0🌍 Public
SSomu1433
Last edited Mar 11, 2023
Created on Mar 3, 2023
Forked from ICE5

This visualization displays the ten most populous countries as horizontal bars on an SVG canvas, with each bar’s length encoding the population value. Built with React and D3 v5, the code uses `d3.csv` to load data from a remote GitHub Gist, `d3.scaleBand` for the categorical country axis, and `d3.scaleLinear` for the numeric population scale. The bars are rendered as SVG `rect` elements, each assigned a unique color via CSS `nth-of-type` selectors, with tick marks and labels generated using D3’s scale methods.

AI-generated description

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