Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Marks and Channels with React & D3

Public visualization

Viewing a saved revision (read-only)

a552f0d8d6ac4962849802349405787c

Rendering Marks and Channels with React & D3

1 star0🌍 Public
SSumanya4
Last edited Mar 7, 2022
Created on Mar 7, 2022

This example shows motorcycle sales data across 20 countries as a horizontal bar chart, using blue rectangles positioned with `d3.scaleBand` and `d3.scaleLinear`. The code initializes React state with `useState` and loads CSV data asynchronously via `d3.csv`. Axes are manually drawn using React elements and `xScale.ticks()`, while `d3.max` computes the domain. The SVG rendering is handled entirely through React components, demonstrating how D3 scales and data join with React’s declarative approach.

AI-generated description

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

See also React Starter.