Skip to content

Instantly share code, notes, and snippets.

@john-friedman

john-friedman/index.html

Created January 16, 2019 03:20
Show Gist options
  • Save john-friedman/800e1423a48542bceffa37331c346a8b to your computer and use it in GitHub Desktop.
Save john-friedman/800e1423a48542bceffa37331c346a8b to your computer and use it in GitHub Desktop.
Download ZIP
Interactive Map
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.7/datamaps.all.min.js"></script>
</head>
<body>
<h1>Interactive map</h1>
<p>Try hovering/Clicking on blue states</p>
<div id="container" style="position: relative; width: 500px; height: 300px; margin: 0px auto;"></div>
<script>
var fills = {
someOtherFill: '#0fa0fa',
defaultFill: '#ABDDA4'
};
var map = new Datamap({
element: document.getElementById('container'),
scope: 'usa',
fills: fills,
geographyConfig: {
highlightOnHover: false,
popupTemplate: function(geo, data) {
return ['<div class="hoverinfo">',
geo.properties.name,
' ' + '<br>' + '<b>'+"Rating: " + data.numberOfThings + '</b>',
'</strong></div>'].join('');
}
},
data: {
IL: {
fillKey: 'someOtherFill',
numberOfThings: 2002,
},
TX: {
fillKey: 'someOtherFill',
numberOfThings: 1854,
},
MA: {
fillKey: 'someOtherFill',
numberOfThings: 999,
},
CA: {
fillKey: 'someOtherFill',
numberOfThings: 42,
},
},
done: function(datamap) {
datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
var state_id = geography.id;
var fillkey_obj = datamap.options.data[state_id] || {fillKey: 'defaultFill'};
var fillkey = fillkey_obj.fillKey;;
var fillkeys = Object.keys(fills);
var antikey = fillkeys[Math.abs(fillkeys.indexOf(fillkey) - 1)];
var new_fills = {
[geography.id] : {
fillKey: antikey
}
};
datamap.updateChoropleth(new_fills);
});
}
});
</script>
<p>Built using javascript <a href="https://github.com/markmarkoh/datamaps">datamaps</a></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment