{"version":"1.0","type":"rich","title":"Customizing axes","description":"This example shows a horizontal bar chart of the top 10 most populous countries, with population values converted from raw numbers to thousands and formatted with abbreviated tick labels (e.g., “1.41B”) using D3’s `format` and `.replace('G','B')`. The chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with custom axis styling applied via CSS classes like `.tick text` and `.axis-label`. Grid lines are created by setting `tickSize(-innerHeight)` on `d3.axisBottom`, while the y-axis’s domain and tick lines are removed. Data comes from a local CSV file, and the SVG rendering is driven by React and D3 v7.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/65d0e604ce6a41cc86928f06296c73c6?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}