{"version":"1.0","type":"rich","title":"Barchart Styling","description":"This example demonstrates a horizontal bar chart visualizing the population of ten countries, sourced from a UN 2019 dataset. The bars are styled with a distinct teal fill and black outlines, while the chart employs a categorical y-axis and a quantitative x-axis. Using React state via the `useData` hook to manage fetched CSV data, the visualization is rendered as SVG through components that build the axes and marks. The code leverages d3's `scaleBand` and `scaleLinear` for scaling, `format` for tick labels, and custom reusable React components for marks and axes.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/01568e864e6f4ed99dd52c62435dda23?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}