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)

c5732e3c7c4f4ee6a3bc4ff835caee9d

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

0 stars0🌍 Public
AAditya Pujari
Last edited Mar 6, 2022
Created on Mar 6, 2022
Forked from D3 Starter

This example shows the cost of Netflix subscriptions across twelve countries using horizontal bars, where bar length encodes price and country names appear on the y-axis. Built with React and D3, the component loads CSV data via `d3.csv`, then renders SVG marks directly in JSX using `scaleBand` for country categories and `scaleLinear` for cost values. Axes are drawn manually with `xScale.ticks()` and `yScale.domain()`, while `useEffect` fetches the data asynchronously.

AI-generated description

A demonstration of how to start using D3 version 6.