{"version":"1.0","type":"rich","title":"ICE - 6: Rendering Marks and Channels","description":"This example displays a horizontal bar chart of the top 10 most paid celebrities in 2020, with earnings in USD millions. The chart uses React with D3.js version 5, rendering SVG rectangles for bars and manually drawn axes with gridlines via `scaleBand` and `scaleLinear`. Data is loaded asynchronously from a CSV file using `d3.csv`, and the visualization includes custom tick labels and red vertical gridlines. The code initializes React state with `useState` and `useEffect` to fetch and process the dataset, demonstrating a clean composition of React components with D3 scales and marks.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/ec82d2ca709b4d26af721417e4436817?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}