In the latest datamaps (v0.3.4), you can specify orthographic as your projection to show a map in a more 'globe' like fashion.
Additionally you can specify the rotation through projectionConfiguration, which is a new configuration block that I'll be building out for more control over projections.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script src="https://rawgit.com/markmarkoh/datamaps/master/dist/datamaps.world.min.js"></script> | |
| <div id="world" style="height: 500px; width: 900px;"></div> | |
| <script> | |
| //basic map config with custom fills, mercator projection | |
| var map = new Datamap({ | |
| scope: 'world', | |
| element: document.getElementById('world'), | |
| projection: 'orthographic', | |
| fills: { | |
| defaultFill: 'rgba(0,0,0,0.7)', | |
| lt50: 'rgba(0,244,244,0.9)', | |
| gt50: 'red' | |
| }, | |
| projectionConfig: { | |
| rotation: [97,-30] | |
| }, | |
| data: { | |
| '071': {fillKey: 'lt50' }, | |
| '001': {fillKey: 'gt50' } | |
| } | |
| }); | |
| map.graticule(); | |
| </script> | |
| </body> | |
| </html> |