{"version":"1.0","type":"rich","title":"Margin Convention Rendering BAR data with React","description":"A bar chart rendered with SVG displays car data, showing average cylinder counts by origin for three countries. The React component uses `d3.csv` to load data and `scaleBand` with `scaleLinear` to position bars and axes. Red tick lines and labels for the x-axis are generated from `xScale.ticks()`, while y-axis labels use the band scale's domain. Margins are applied via a translated SVG `<g>` element, keeping the plot area separate from the chart edges.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/40f4d97e52ea4b72b41159141a790aec?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}