Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ICE - 6: Rendering Marks and Channels

Public visualization

Viewing a saved revision (read-only)

cb5989e15885414e875a6521ee5be89c

ICE - 6: Rendering Marks and Channels

0 stars0🌍 Public

This example displays a horizontal bar chart of the top 10 most paid celebrities in 2020, with earnings in USD millions. The chart uses React with D3.js version 5, rendering SVG rectangles for bars and manually drawn axes with gridlines via `scaleBand` and `scaleLinear`. Data is loaded asynchronously from a CSV file using `d3.csv`, and the visualization includes custom tick labels and red vertical gridlines. The code initializes React state with `useState` and `useEffect` to fetch and process the dataset, demonstrating a clean composition of React components with D3 scales and marks.

AI-generated description

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

See also React Starter.