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)

ec8c1110ad79400dac7650fbc2567e20

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

0 stars0🌍 Public
CCherukuriMilind
Last edited Jun 25, 2022
Created on Jun 25, 2022

This example visualizes the users of OTT platforms as a horizontal bar chart, with each bar’s length encoding the population value. The code uses React’s `useState` and `useEffect` hooks to load CSV data via `d3.csv`, then renders SVG marks using JSX. D3 scales (`scaleBand`, `scaleLinear`) position the bars, while `xScale.ticks()` generates grid lines and tick labels. The data is sourced from a GitHub gist and limited to the first twelve rows.

AI-generated description

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

See also React Starter.