{"version":"1.0","type":"rich","title":"ICE-6: Rendering Marks and Channels with React & D3","description":"This example visualizes the top 15 movies by metascore as a horizontal bar chart, using the length of each bar to encode the score. The visualization is rendered as an SVG element, with axes and tick labels drawn manually using D3 functions like `scaleBand`, `scaleLinear`, and `max`. The code loads data from a CSV file via `d3.csv` and integrates D3’s scaling and tick-generation methods within React’s component structure, using `useState` and `useEffect` to manage the asynchronous data loading. The chart is built with React’s declarative syntax, producing SVG rectangles and text elements.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/8cbb17b37a294929a70f1b6a8af62dda?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}