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)

7920c84f469f45c4a93ca829de0434a5

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

0 stars1🌍 Public
Ssrividyabachina22
Last edited Mar 3, 2023
Created on Mar 3, 2023
Forked from React Starter

This example displays the basic monthly cost of Netflix across 15 countries as horizontal bars, using bar length to encode price. It renders SVG marks with React, building scales and axes through D3’s `scaleBand` and `scaleLinear`, and draws tick lines and labels manually via `ticks()`. Data is loaded asynchronously from a CSV URL using D3’s `csv` function. The chart uses blue gridlines and text labels, with margins and dimensions fixed in the code.

AI-generated description

React Starter code.