Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

Viewing a saved revision (read-only)

9191d80975e0481bb47db555cbfe100c

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

0 stars0🌍 Public
SSharanya1307
Last edited Mar 23, 2023
Created on Mar 23, 2023

This visualization displays the basic cost of Netflix subscriptions across twelve countries using horizontal bars. The React component loads data from a CSV file, and D3’s `scaleBand` and `scaleLinear` map country names and costs to x/y positions, rendering `<rect>` marks within an SVG. Axes and ticks are generated manually via `xScale.ticks()` and D3’s `scaleBand` domain, with the y-axis labels positioned by `yScale`. The chart is updated asynchronously via `useEffect` and `csv` from D3 v5.

AI-generated description

A bare minimum HTML page.