{"version":"1.0","type":"rich","title":"d3 and canvas - the bind, the draw and the pick","description":"This example demonstrates how d3 and Canvas can work together for interactive visualization, showing 5,000 colored grid cells arranged in a 10x10 group layout. The code uses d3.v4 to bind data to custom DOM elements, applying sequential color scales with d3.interpolateSpectral. Rendering happens through a main canvas while a hidden canvas uses unique generated RGB colors and a color-to-node map for picking interactions. A tooltip appears on hover, and d3.timer animates cell widths during transitions, with optional React integration via VizHub.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/caf510a628934053abf3950d0b63c395?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}