{"version":"1.0","type":"rich","title":"ICE-6: Rendering Marks and Channels with React &amp; D3","description":"This example displays the basic cost of Netflix subscriptions across 15 countries using a horizontal bar chart. Built with React and D3 v5, it loads CSV data via `d3.csv` and renders SVG marks through React components. The chart uses `d3.scaleBand` for the categorical y-axis (countries) and `d3.scaleLinear` for the quantitative x-axis (cost in USD). Grid lines and axis ticks are generated with `xScale.ticks()`. The underlying dataset is derived from public Netflix pricing information.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/2622f8c44e0a44a5a07c7f2822197c13?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}