Skip to content

Instantly share code, notes, and snippets.

@jnschrag

jnschrag/Datamaps World Map Arcs & Bubbles Example

Created August 29, 2016 17:43
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jnschrag/66796c512070493dd8907f3029650407 to your computer and use it in GitHub Desktop.
Save jnschrag/66796c512070493dd8907f3029650407 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Datamaps World Map Arcs & Bubbles Example
<!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>
<!-- I recommend you host this file on your own, since this will change without warning -->
<script src="http://datamaps.github.io/scripts/datamaps.world.min.js?v=1"></script>
<h2>Datamaps Playground</h2>
<p><a href="http://datamaps.github.io/">DataMaps Project Homepage</a></p>
<div id="container1" style="position: relative; width: 80%; max-height: 450px;"></div>
<script>
//basic map config with custom fills, mercator projection
var map = new Datamap({
scope: 'world',
element: document.getElementById('container1'),
projection: 'mercator',
height: 500,
fills: {
defaultFill: '#f0af0a',
lt50: 'rgba(0,244,244,0.9)',
gt50: 'red'
},
data: {
USA: {fillKey: 'lt50' },
RUS: {fillKey: 'lt50' },
CAN: {fillKey: 'lt50' },
BRA: {fillKey: 'gt50' },
ARG: {fillKey: 'gt50'},
COL: {fillKey: 'gt50' },
AUS: {fillKey: 'gt50' },
ZAF: {fillKey: 'gt50' },
MAD: {fillKey: 'gt50' }
}
})
//sample of the arc plugin
map.arc([
{
origin: {
latitude: 40.639722,
longitude: 73.778889
},
destination: {
latitude: 37.618889,
longitude: -122.375
}
},
{
origin: {
latitude: 30.194444,
longitude: -97.67
},
destination: {
latitude: 25.793333,
longitude: -0.290556
}
},
{
origin: {
latitude: 34.5292364,
longitude: 86.0623582
},
destination: {
latitude: 25.793333,
longitude: -0.290556
}
}
], {strokeWidth: 2});
//bubbles, custom popup on hover template
map.bubbles([
{name: 'Hot', latitude: 21.32, longitude: 5.32, radius: 10, fillKey: 'gt50'},
{name: 'Chilly', latitude: -25.32, longitude: 120.32, radius: 18, fillKey: 'lt50'},
{name: 'Hot again', latitude: 21.32, longitude: -84.32, radius: 8, fillKey: 'gt50'},
], {
popupTemplate: function(geo, data) {
return "<div class='hoverinfo'>It is " + data.name + "</div>";
}
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment