{"version":"1.0","type":"rich","title":"ICE-6: Rendering Marks and Channels with React & D3","description":"This example visualizes the top 10 food-producing countries using a horizontal bar chart rendered as SVG within a React component. It loads CSV data from a GitHub gist via `d3.csv`, scales the bars with `scaleBand` and `scaleLinear`, and draws tick marks and labels manually using `xScale.ticks()`. The code integrates React hooks (`useState`, `useEffect`) with D3 v5 selection and scale APIs, producing a clean, data-driven layout with orange bars and labeled axes.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/abcac201f767431182177d657691d08e?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}