Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

Viewing a saved revision (read-only)

e28655ce388f4b429557909dd632cb4f

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

0 stars0🌍 Public
MMounika0927
Last edited Mar 9, 2023
Created on Mar 3, 2023
Forked from React Starter

This example visualizes the annual salaries of 20 employees as a horizontal bar chart, with each bar’s length encoding salary magnitude and yellow fill distinguishing marks. Built with React for component state and D3 v5 for scales and data loading, it uses `d3.csv` to fetch a remote dataset, `scaleBand` for y-axis positioning, and `scaleLinear` for x-axis values. Custom SVG rendering draws axis ticks, gridlines, and rectangles, while manual text labels replace D3’s axis generators.

AI-generated description

React Starter code.