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 stars1🌍 Public
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 description

React Starter code.

Comments

Sign in to join the discussion.

MIT Licensed