{"version":"1.0","type":"rich","title":"ICE-6: Rendering Marks and Channels with React D3","description":"This visualization displays a horizontal bar chart of the top 15 countries by basic cost using 2019 World Population data. The chart renders as an SVG within a React app, with blue grid lines and numeric labels along the x-axis and country names on the y-axis. The code uses React hooks (`useState`, `useEffect`) to load and manage CSV data via `d3.csv`, then applies `scaleBand` for categorical positioning and `scaleLinear` for quantitative scaling. D3’s `max` function computes the domain for the cost values.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/69e5db479c7846759c54f80778d2deb1?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}