{"version":"1.0","type":"rich","title":"d3.js with leaflet.js","description":"This example shows a map centered on Wellington, New Zealand, with five semi-transparent red circles overlaid at specific coordinates, demonstrating how D3.js can be used to render SVG elements on top of a Leaflet map. The code initializes a Leaflet map with an OpenStreetMap tile layer, then loads geographic data from a `circles.json` file. D3.js selects the map's SVG layer, appends a group, and dynamically creates circle elements for each data point, converting the latitude and longitude coordinates into layer points using Leaflet's `latLngToLayerPoint` method to position them correctly. The circles update their positions in response to the map's `viewreset` event.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"","width":960,"height":500,"cache_age":3600}