{"version":"1.0","type":"rich","title":"ICE-6 Rendering Marks and Channels with React & D3","description":"This example shows a horizontal bar chart of 2019 telecom sale charges for the top 10 countries by population, rendered as purple SVG rectangles. It uses React hooks (`useState`, `useEffect`) to load and parse CSV data from a GitHub gist via `d3.csv`, then maps the values to a `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The chart includes custom grid lines and tick labels generated from the scales, with the bars positioned through React’s JSX and D3’s scale functions.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/220013ee9e0c41fd9c34cb00eeba9965?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}