{"version":"1.0","type":"rich","title":"ICE-6: Rendering Marks and Channels with React & D3","description":"This example displays a horizontal bar chart of the top 15 movies by Meta_score, sourced from a CSV file of population-by-country data loaded via D3’s `csv` function. Using React with hooks (`useState` and `useEffect`) and D3 scales (`scaleBand`, `scaleLinear`), the SVG renders rectangles for each movie, with axes drawn manually from `xScale.ticks()` and the band domain. The chart demonstrates mark (rect) and channel (length) mapping, with all visualization elements generated in JSX.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/b3dc67e8ad09432e9a5afcaf2292830c?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}