{"version":"1.0","type":"rich","title":"Data visualization ICE-6: Rendering Marks and Channels with React & D3","description":"This example displays the top 10 most populated US states as a horizontal bar chart rendered in SVG. It uses React 16.9 and D3 v5, combining state management via React hooks with D3’s `scaleBand`, `scaleLinear`, and `max` for data mapping. The chart reads a CSV dataset through `d3.csv`, then renders rectangles and axis tick text using JSX. The visualization highlights bar lengths proportional to population, with a blue gridline and custom styling from the embedded CSS.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/7932c598416446459adadd23f8a26441?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}