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 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.

Comments

Sign in to join the discussion.

MIT Licensed