{"version":"1.0","type":"rich","title":"Refactoring a Bar Chart with React & D3","description":"This example demonstrates how to refactor a bar chart into reusable React components, combining D3 scales with React’s declarative rendering. It visualizes the top 10 countries by population from a UN 2019 dataset, loaded via `d3.csv`. The code separates axes and marks into `AxisBottom`, `AxisLeft`, and `Marks` components, using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, all rendered as SVG within React’s state management.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/605c696348604de596b979329de53e38?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}