ICE-6: Rendering Marks and Channels with React & D3 - Bar Chart
✓ Published0🌍 Public
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 descriptionImplementation of Marks and Channels
MIT Licensed