Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Marks and Channels with React & D3

Public visualization

Rendering Marks and Channels with React & D3

0 stars0🌍 Public
PPlatoch
Last edited Mar 1, 2022
Created on Mar 1, 2022

This example displays a horizontal bar chart of the top 10 most populous countries for 2019, rendered as SVG within a React application. The chart uses React for component structure and state management, with D3's `scaleBand` and `scaleLinear` to map country names and population values to visual positions. Axis ticks are generated via `xScale.ticks()`, and population data is loaded asynchronously from a CSV file using D3's `csv` function. The bars are drawn as `rect` elements, with axis tick marks and labels created from the scales.

AI-generated description

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

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed