{"version":"1.0","type":"rich","title":"Let's make a map with D3.js!","description":"This example shows a world map colored by economic classification, with an ordinal color legend displayed in the corner. It uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to render country outlines from TopoJSON data loaded via the `world-atlas` package. Countries are colored using `d3.scaleOrdinal` with `schemeSpectral`, and a custom `colorLegend` component draws circles and text labels. The map supports zooming through `d3.zoom`, and hover states change country fills to red via CSS.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/ac5962ad46d246c8bdf6dfcb1e3a82bc?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}