Skip to main content
100%

Map & Globe

✓ Published0🌍 Public
CCurran Kelleher
Last edited Sep 23, 2015
Created on Sep 4, 2015

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 description

Pan 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

  • layout A plugin for nested box layout of arbitrary components.

  • links A plugin for data binding. This links the pan and zoom between the globe and the map.

  • leaflet A Leaflet-based geographic map component.

  • globe A D3 black and white globe renderer that uses HTML5 Canvas.

See also these awesome derivatives:

<!-- Start of SimpleHitCounter Code --> <div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1948655&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div> <!-- End of SimpleHitCounter Code -->

Similar vizzes