{"version":"1.0","type":"rich","title":"Heatmap with Tooltip in React","description":"A heatmap displays a 10x10 matrix of values as colored squares, using a white-to-teal linear scale to represent the data range from 1 to 100. The visualization is rendered as an SVG chart using React components, D3.js scales (scaleBand, scaleLinear), and data loaded from a CSV file via d3.csv. Hovering over a square toggles its border and reveals the exact value in bold text, implemented through React's useState hook for interactive tooltips.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/24f82dcdf16742d4af0df9c15f8f8c22?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}