{"version":"1.0","type":"rich","title":"ICE-6: Rendering Marks & Channels with \"React & D3\"","description":"This example visualizes the salary estimates for the top 10 data scientist job titles using horizontal bars rendered as SVG rectangles. The React component manages state with `useState` and `useEffect`, loading and parsing CSV data via `d3.csv` while the D3 scales (`d3.scaleBand`, `d3.scaleLinear`) compute bar positions. Each bar’s width maps to salary values, with rendered axis ticks and labels. D3 v5 handles the data loading and scaling, while React elements compose the final SVG output within an HTML page that loads both libraries from a CDN.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/e6b38bf3c59e4d5da65359f9c269a923?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}