Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

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

0 stars0🌍 Public
99176371431
Last edited Mar 9, 2023
Created on Mar 9, 2023
Forked from React Starter

This example shows the basic monthly cost of Netflix in different countries using a horizontal bar chart rendered with React and D3. The visualization maps country names along the y-axis using `d3.scaleBand` and pricing values along the x-axis with `d3.scaleLinear`, displaying red rectangles as marks. Data is loaded from a CSV file via `d3.csv` and limited to the first 20 entries. The chart uses React hooks (`useState`, `useEffect`) to manage data fetching, while D3 generates SVG scales, axes, and grid lines for the static rendering.

AI-generated description

React Starter code.

Comments

Sign in to join the discussion.

MIT Licensed