🌍 Public
Viewing a saved revision (read-only)
7d4c8d3a88d44622b8209ee76b484535
ICE-6: Rendering Marks and Channels with React & D3
This example renders a horizontal bar chart of Netflix subscription costs across 15 countries using React and D3 v5. It shows the relative pricing differences by encoding the cost values as bar lengths, with country names on the y-axis and a linear cost scale on the x-axis. The code loads CSV data via `d3.csv`, uses `scaleBand` and `scaleLinear` for positioning, and generates SVG rectangles for the bars. Custom tick labels and grid lines are drawn manually using the scale ticks, while React manages the component state and rendering lifecycle.
AI-generated descriptionA demonstration of how to start using D3 version 6.