Skip to content

Instantly share code, notes, and snippets.

@AlexanderAA

AlexanderAA/d3map_example.html

Created May 3, 2016 01:16
Show Gist options
  • Save AlexanderAA/29e3f1ebe4b2f0b3e9eb3b844d7254b0 to your computer and use it in GitHub Desktop.
Save AlexanderAA/29e3f1ebe4b2f0b3e9eb3b844d7254b0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
d3map_example.html
<!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="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',
projection: 'mercator',
element: document.getElementById('container1'),
height: 400,
fills: {
defaultFill: '#f0af0a',
lt50: 'rgba(50,24,244,1)',
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' },
BLR: {fillKey: 'gt50' }
}
})
//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