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)

66b775274e734cda9fb54e5000e0e60d

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

0 stars0🌍 Public
Uubl2
Last edited Mar 10, 2022
Created on Mar 1, 2022
Forked from HTML Starter

This example shows a bar chart of the top 10 countries by GDP per capita, using green rounded rectangles to encode values. Data is loaded from a CSV via d3.csv and sorted by slicing the first ten rows. The visualization uses React hooks (useState, useEffect) to manage state, while D3 scales (scaleBand, scaleLinear) and SVG elements are rendered declaratively. Axis ticks and grid lines are generated manually using xScale.ticks() and DOM elements, without axis helper components.

AI-generated description

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

See also React Starter.