Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of d3.js with leaflet.js

Public visualization

Viewing a saved revision (read-only)

52747067bd104242b9c6903613ec50e0

Fork of d3.js with leaflet.js

0 stars0🌍 Public
SSteve_Nashon
Last edited Oct 15, 2022
Created on Oct 15, 2022

This example overlays red SVG circles on an OpenStreetMap tile layer using D3.js and Leaflet.js. It loads geographic coordinates from circles.json and renders each point as a fixed-radius circle positioned via Leaflet’s `latLngToLayerPoint` projection, which updates on map view changes using the `viewreset` event. The visualization demonstrates how to combine D3’s data-binding and SVG manipulation with Leaflet’s interactive map APIs for custom geographic overlays.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.