{"version":"1.0","type":"rich","title":"ICE-6: Rendering Marks and Channels (Bar Chart)","description":"This example renders a horizontal bar chart using React and D3 v5, displaying the 2022 population for three countries from a CSV dataset. The visualization uses SVG marks and channels, with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. React state manages the asynchronous CSV loading via D3’s `csv` function, while the code manually draws axis ticks, gridlines, and colored rectangles. The chart includes a purple vertical grid and labeled axes, with data filtered to the first three rows of the source CSV.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/1111697bb0974085a41452929cb13d0c?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}