We've all seen the projected head from Elements of map projection with applications to map and chart construction, but the authors in 1921 did not have D3 to help them show a full range of weird distorted faces. This is based on the Map Projection Transitions example by Jason Davies.
Andy Woodruff awoodruff
awoodruff
/ gist:6070584
Last active
December 20, 2015 04:28
Rotating globe tween from http://work.axismaps.com/amd/gc/oil/.
See it in action there by mousing over the bar chart. Code more or less ripped from examples like http://bl.ocks.org/mbostock/4183330, but on IE9 and IE10, especially on slower machines, countries that are supposed to rotate to the back of the globe and disappear have a tendency to …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // map is at http://work.axismaps.com/amd/gc/oil/ | |
| function move_globe( coords, animate, end ) | |
| { | |
| if ( insetShowing ) return; | |
| if( animate ) | |
| { | |
| coords[ 1 ] = coords[ 1 ] > 30 ? 30 : | |
| coords[ 1 ] < -30 ? -30 : | |
| coords[ 1 ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style type="text/css"> | |
| #states path { | |
| fill: none; | |
| } | |
| </style> |
Testing the topojson.presimplify function that is used in Dynamic Simplification examples. It's included in this stripped-down example just for testing purposes: seems to work like a charm in most browsers but for a topojson file with much detail (like the county map here), Firefox chokes on topojson.presimplify.
Testing the topojson.presimplify function that is used in Dynamic Simplification examples. It's included in this stripped-down example just for testing purposes: seems to work like a charm in most browsers but for a topojson file with much detail (like the county map here), Firefox chokes on topojson.presimplify.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
An attempt to combine D3 zoomable map tiles and dynamic simplification. Simplification and redrawing occurs only at discrete zoom levels for performance reasons; a scale transformation is used in between.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>A Leaflet map!</title> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
| <style> | |
| #map{ width: 900px; height: 500px; } | |
| </style> | |
| </head> | |
| <body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>A Leaflet map!</title> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
| <style> | |
| #map{ height: 100% } | |
| </style> | |
| </head> | |
| <body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>A Leaflet map!</title> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
| <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <style> | |
| #map{ height: 100% } | |
| </style> | |
| </head> |
OlderNewer