{"version":"1.0","type":"rich","title":"Lokesh_Rendering Marks and Channels using React and D3.js","description":"This example shows the top speeds of fifteen electric vehicles using a horizontal bar chart, with brand names on the y-axis and speed values on the x-axis. It uses React hooks (`useState`, `useEffect`) to load data from a CSV file via `d3.csv`, then renders SVG rectangles with dimensions computed by D3’s `scaleBand` and `scaleLinear`. Custom tick marks and gridlines are drawn manually, and the chart updates through React’s declarative rendering without D3’s join/update pattern.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/ee09bcf5c7eb4bee82680fad53b594d5?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}