Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ICE-6 Rendering Marks and Channels with React and D3

Public visualization

ICE-6 Rendering Marks and Channels with React and D3

0 stars0🌍 Public
DDan Waters
Last edited Mar 8, 2022
Created on Mar 8, 2022
Forked from React Starter

This example visualizes the top 10 most expensive Netflix Basic package prices by country using a horizontal bar chart. It renders with React and D3 v7 in SVG, loading CSV data from a GitHub gist, sorting it in descending order, and encoding cost values with bar width and a sequential color scale via `scaleLinear` and `scaleBand`. The chart includes custom axes and gridlines computed from `xScale.ticks()`, with colors defined in an array and applied through `rect` elements.

AI-generated description

React Starter code.

Comments

Sign in to join the discussion.

MIT Licensed