Skip to main content
100%

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

✓ Published0🌍 Public
IIsabella Jaya Rani C
Last edited Mar 9, 2023
Created on Mar 5, 2023
Forked from HTML Starter

This bar chart displays the top 15 telecom circles in India ranked by their highest recharge plan expenditure, with each bar’s length encoding cost in INR and its color alternating between salmon and lightpink. Built with React and D3 v5, the visualization uses d3.csv to load the dataset, d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and custom SVG elements for axes and bars. The rendering relies on React’s useState and useEffect hooks to fetch and manage data, while d3’s scale and tick functions generate the gridlines and labels.

AI-generated description

Implementation of Marks and Channels

MIT Licensed

Similar vizzes