{"version":"1.0","type":"rich","title":"Lets build a map with interactions!","description":"This example shows an interactive world map rendered with SVG, where each country displays its name as a tooltip on hover. The visualization uses D3 v5 to load TopoJSON and TSV data from the world-atlas package, projecting the geographic features with `d3.geoNaturalEarth1` and drawing paths via `d3.geoPath`. Zooming and panning are enabled through `d3.zoom` with an event listener that applies transforms to the map group. Countries are styled with CSS, turning grey on hover, while a fixed blue sphere represents the globe's background. React manages the page structure, though D3 handles all data binding and interactions.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/dd624143c49f4d9794d27e7bfcd12982?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}