Skip to content

Instantly share code, notes, and snippets.

@dtoma

dtoma/map.html

Last active September 16, 2018 01:58
Show Gist options
  • Save dtoma/4fa77549b721b66008c3046b1ca884b2 to your computer and use it in GitHub Desktop.
Save dtoma/4fa77549b721b66008c3046b1ca884b2 to your computer and use it in GitHub Desktop.
Download ZIP
map
Raw
map.html
<!DOCTYPE html>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width">
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.js"></script>
<div id="pnlmap" style="height: 100%; width: 100%;"></div>
<script>
var series = [
["USA", 1000], ["CAN", 100],
["RUS", -500], ["FRA", 1000], ["DEU", 0], ["GBR", 500], ["IRL", 42],
["KOR", 322], ["JPN", 404], ["TWN", -1000], ["AUS", 1000]
];
var dataset = {};
var onlyValues = series.map(function(obj){ return obj[1]; });
var minValue = Math.min.apply(null, onlyValues),
maxValue = Math.max.apply(null, onlyValues);
var paletteScale = d3.scale.linear().domain([minValue,maxValue]).range(["red","blue"]);
series.forEach(function(item) {
var iso = item[0], value = item[1];
dataset[iso] = { numberOfThings: value, fillColor: paletteScale(value) };
});
var map = new Datamap({
element: document.getElementById('pnlmap'),
height: window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight,
projection: 'mercator',
fills: { defaultFill: '#f5f5f5' },
data: dataset,
geographyConfig: {
highlightFillColor: function(geo) { return geo['fillColor'] || '#f5f5f5'; },
popupTemplate: function(geo, data) {
if (!data) { return ; }
return ['<div class="hoverinfo">',
'<strong>', geo.properties.name, '</strong>',
'<br>PnL: <strong>', data.numberOfThings, '</strong>',
'</div>'].join('');
}
}
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment