{"version":"1.0","type":"rich","title":"Fork of ICE-6: Rendering Marks and Channels with React & D3","description":"This example displays a bar chart of office supply sales data for fifteen countries, with economic cost on the x-axis and country names on the y-axis. It combines React hooks (`useState`, `useEffect`) for data loading and D3 v5 utilities `csv`, `scaleBand`, and `scaleLinear` to fetch and scale the data, rendering bars and axis ticks as SVG elements. The visualization uses React’s declarative rendering to generate each rectangle and text label, with axes drawn manually via `scale.ticks()` and gridlines.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/b9cd9a34f0304c1e86db8bc3a25e2095?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}