{"version":"1.0","type":"rich","title":"ICE-6: Marks and Channels","description":"This example displays product costs as a horizontal bar chart using React and D3 v5. The visualization maps product names to the y-axis with a band scale and costs to the x-axis with a linear scale, rendering blue rectangles with yellow strokes. The component loads CSV data from a GitHub gist, slices it to the first ten items, and uses D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions within a React functional component with hooks. Custom tick marks and gridlines are drawn manually rather than using axis generators.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/a041f53632e04638a370ff3df2567256?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}