{"version":"1.0","type":"rich","title":"Fork of ICE-6: Rendering Marks and Channels with React & D3","description":"This example shows the total cost of living for 15 U.S. cities using a horizontal bar chart rendered as SVG. The React component loads data from a CSV file with d3.csv, then uses d3.scaleBand and d3.scaleLinear to map city names and costs to positions and bar widths. Custom tick marks are drawn manually using array mapping, with d3.format applied to axis labels. The visualization demonstrates integrating React state management with D3’s scaling and data-loading utilities for a static, styled bar chart.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/d8ac7cd6f2d94dfe91e920a19acd5525?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}