{"version":"1.0","type":"rich","title":"ICE-6: Rendering Marks and Channels with React & D3","description":"This example shows the relationship between customer age and annual income using a horizontal bar chart of the first 15 records from a CSV dataset. Each bar’s length encodes income via a linear scale, while age categories are positioned on a band scale. The visualization is built with React components that render SVG marks, using D3 v5 utilities like `scaleLinear`, `scaleBand`, and `max` for data processing and scaling. Grid lines and axis ticks are generated from the linear scale’s tick values, with the dataset loaded asynchronously via `d3.csv`.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/305fee2ed5614174b7386c10e887d55f?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}