Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

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

0 stars1🌍 Public

This example displays the top 10 most populated US states as a horizontal bar chart rendered in SVG. It uses React 16.9 and D3 v5, combining state management via React hooks with D3’s `scaleBand`, `scaleLinear`, and `max` for data mapping. The chart reads a CSV dataset through `d3.csv`, then renders rectangles and axis tick text using JSX. The visualization highlights bar lengths proportional to population, with a blue gridline and custom styling from the embedded CSS.

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