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)

6ebfd90137974047b8c77af5b8c43850

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.