Skip to main content
100%

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

✓ Published0🌍 Public
MMgk1255
Last edited Jun 24, 2022
Created on Jun 24, 2022
Forked from Cat smiley

This example shows the cost of a basic Netflix subscription in twelve countries using horizontal bars, with countries labeled along the vertical axis and cost values on the horizontal axis. Built with React and D3 v5, it uses `d3.csv` to load data from a GitHub gist, then creates SVG bar marks with `scaleBand`, `scaleLinear`, and `max` for layout. Axis ticks are rendered manually from `xScale.ticks()` and `yScale.domain()`, while each rectangle’s width encodes the numeric cost channel.

AI-generated description

A whole smiley face

MIT Licensed

Similar vizzes