ICE-6: Rendering Marks and Channels (Bar Chart)
✓ Published0🌍 Public
SSharmaAshwini
Last edited Mar 9, 2023
Created on Mar 6, 2023
This bar chart displays population density for 20 countries using SVG rectangles as marks, with country names on the y-axis and density values on the x-axis. It uses React hooks (useState, useEffect) to load and sort CSV data via d3.csv, then applies d3.scaleBand and d3.scaleLinear for axes. The code manually renders tick labels and grid lines without d3.axisBottom or axisLeft, instead using xScale.ticks() and yScale.domain() with text and line elements. Purple vertical grid lines mark each x-axis tick.
AI-generated descriptionCSCE 5320 ICE-6 HTML page.
MIT Licensed