{"version":"1.0","type":"rich","title":"Rendering Marks and Channels with React & D3","description":"This example shows motorcycle sales data across 20 countries as a horizontal bar chart, using blue rectangles positioned with `d3.scaleBand` and `d3.scaleLinear`. The code initializes React state with `useState` and loads CSV data asynchronously via `d3.csv`. Axes are manually drawn using React elements and `xScale.ticks()`, while `d3.max` computes the domain. The SVG rendering is handled entirely through React components, demonstrating how D3 scales and data join with React’s declarative approach.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/908c474bb1c5416f89a5b1c9b54ab17a?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}