{"version":"1.0","type":"rich","title":"ICE-6: Rendering Marks and Channels with React & D3","description":"The visualization shows the average house prices for fifteen U.S. cities, rendered as a horizontal bar chart using React and D3.js. It loads comma-separated data from a GitHub Gist, maps each city to a band scale on the y-axis, and linearly scales the price to the x-axis. The SVG output uses React DOM elements to draw the tick marks, axis labels, and price bars. The code leverages `d3.csv`, `d3.scaleBand`, and `d3.scaleLinear` to fetch and transform the data.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/83c5e951107a4144801819c0b0298d82?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}