{"version":"1.0","type":"rich","title":"ICE-6:Rendering Marks \n  and Channels with react & D3","description":"Single-page React app renders six small SVG charts with D3 v5, each demonstrating a distinct mark or channel used in data visualization. Vertical strips show x-position, y-position, size, length, shape, and hue encoding via circles, rectangles, and D3 symbols. The charts use data arrays mapped through D3 selections with `.join()` for bound updates. React manages the container and rendering lifecycle, while individual modules like `xPosition.js` and `size.js` apply channel-specific scales, and `hue.js` uses `schemeCategory10`.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/a9badec2371f439dbf04b6ba34821c90?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}