Skip to content

Instantly share code, notes, and snippets.

@markmarkoh markmarkoh/README.md
Last active Aug 29, 2015

Embed
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">
<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>
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.