Skip to content

Instantly share code, notes, and snippets.

@markmarkoh markmarkoh/
Last active Aug 29, 2015

What would you like to do?
Graticule & Orthographic Projections

Graticule && Orthographic Projections

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">
<script src=""></script>
<script src=""></script>
<script src=""></script>
<div id="world" style="height: 500px; width: 900px;"></div>
//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' }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.