{"version":"1.0","type":"rich","title":"Refactoring a Bar Chart (5:18:00)","description":"This example shows a horizontal bar chart of population data for the top 10 countries, loaded from a CSV file. The visualization is built with React and rendered as SVG, using D3 v7 utilities for data loading, scaling, and axis generation. A linear scale maps population values to bar widths, while a band scale positions each country on the vertical axis. The code refactors axis rendering into separate components, with `AxisBottom` generating tick lines and labels from the scale’s `ticks()` method and `AxisLeft` placing domain labels.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/8138b04ee0ea44a1a62acb13aaad21d5?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}