{"version":"1.0","type":"rich","title":"ICE-6: rendering Marks and channels with react and D3","description":"This example visualizes the top 100 movies by IMDB rating as a horizontal bar chart, though it currently displays only the first five entries from a CSV dataset. The chart uses React for component state management, with D3 v5 handling scales, axes, and data loading via `d3.csv`. Marks are rendered as SVG `<rect>` elements, with `scaleBand` for the y-axis and `scaleLinear` for the x-axis, and the code draws custom tick labels and gridlines. It encodes movie names and ratings through spatial position and bar length.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/b96e1f5ca42243b4bc6b26439217d0c1?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}