{"version":"1.0","type":"rich","title":"ICE-6_PY_DATA_VIZ: Rendering Marks and Channel w/React","description":"This example shows a horizontal bar chart comparing the horsepower of ten cars, using SVG marks and channels rendered through React components. It imports data from a CSV file with d3.csv, then uses d3.scaleBand and d3.scaleLinear to map car names and horsepower values to screen positions. The code generates axis ticks and gridlines manually with JSX, while React’s useState and useEffect manage asynchronous data loading. D3 v5 and React 16.13.1 work together to produce the visualization.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/63819c612f7c4a088e1a0109a9268f13?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}