🌍 Public
Viewing a saved revision (read-only)
debc761726d64b5f97bdd94dfd26749a
ICE-6: Rendering Marks and Channels with React & D3
99176371431
Last edited Mar 9, 2023
Created on Mar 9, 2023
This example uses a horizontal bar chart to display the basic cost of Netflix in fifteen countries, loaded from a remote CSV file. React manages the application state and renders the SVG marks, while D3’s `scaleBand` positions the categorical country labels and `scaleLinear` maps the continuous cost values to bar widths. The code manually constructs tick marks and gridlines using `xScale.ticks()` and `yScale.domain()`, drawing each rectangle bar and axis text as React components within an SVG container.
AI-generated descriptionReact Starter code.