{"version":"1.0","type":"rich","title":"ICE-6: Rendering Marks and Channels with React & D3","description":"A bar chart displays the top 20 cosmetic products by revenue, using horizontal bars to compare product ratings against their identifiers. The visualization splits responsibilities between React state management and D3 scales, with `scaleBand` mapping ratings to the y-axis and `scaleLinear` mapping anime IDs to bar widths. SVG rendering handles all marks and channels, while custom axis ticks are generated manually through React components rather than D3 axis helpers. Data loads asynchronously from a CSV file via `d3.csv`.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/fb357c5ae04c4e789e6056510ac34e6a?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}