Map & Globe
Two interactive views of geographic data are linked: a Leaflet map on the left and a D3 orthographic globe on the right, both rendered with Canvas and animated. Panning and zooming the map updates the globe's rotation and zoom, and vice versa. The globe uses a black-and-white TopoJSON world map, while the map shows a monochrome tile layer. A visible circular outline on the globe indicates the map's current viewport. The linking is implemented using Chiasm plugins: `layout` for box layout, `links` for data binding between the two components, `leaflet` for the map, and `globe` for the D3 Canvas globe renderer.
AI-generated descriptionPan and zoom in the map on the left to rotate the globe.
Click and drag the globe to pan on the map.
An example that shows a Chiasm plugin based on Leaflet.js alongside a Chiasm globe plugin based on the D3 example This is a Globe.
The Chiasm plugins demonstrated here are
layoutA plugin for nested box layout of arbitrary components.linksA plugin for data binding. This links the pan and zoom between the globe and the map.leafletA Leaflet-based geographic map component.globeA D3 black and white globe renderer that uses HTML5 Canvas.
See also these awesome derivatives:
- Map & Globe with Rectangle by @tyrasd
- visualizing map distortion by @enjalot