Skip to content

Instantly share code, notes, and snippets.

@aurelient
Last active November 27, 2019 14:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aurelient/01230c9f3ec841528cec1b61904e4a47 to your computer and use it in GitHub Desktop.
Save aurelient/01230c9f3ec841528cec1b61904e4a47 to your computer and use it in GitHub Desktop.
Hover map tooltip
license: mit
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.province {
fill: #000;
stroke: #fff;
stroke-width: 1px;
}
.province:hover {
fill: #666;
}
.hidden {
display: none;
}
div.tooltip {
color: #222;
background-color: #fff;
padding: .5em;
text-shadow: #f5f5f5 0 1px 0;
border-radius: 2px;
opacity: 0.9;
position: absolute;
}
</style>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 690,
height = 580;
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
var tooltip = d3.select('body').append('div')
.attr('class', 'hidden tooltip');
var projection = d3.geoAlbers()
.center([45.4, 75.5])
.parallels([45, 70])
.scale(800)
.translate([0.65 * width, 0.10 * height]);
var path = d3.geoPath()
.projection(projection);
d3.json('https://raw.githubusercontent.com/codeforamerica/click_that_hood/master/public/data/canada.geojson').then(function(jsondata) {
svg.selectAll('.province')
.data(jsondata.features)
.enter().append('path')
.attr('class', function(d) {
// chaque forme representant un etat aura
// deux classes province et un identifiant venant du json
return 'province ' + d.properties.cartodb_id;
})
.attr('d', path) // on cree la forme de l'etat
.on('mousemove', function(d) {
// on recupere la position de la souris
var mousePosition = d3.mouse(this);
// on affiche le toolip
tooltip.classed('hidden', false)
// on positionne le tooltip en fonction
// de la position de la souris
.attr('style', 'left:' + (mousePosition[0] + 15) +
'px; top:' + (mousePosition[1] - 35) + 'px')
// on recupere le nom de l'etat
.html(d.properties.name);
})
.on('mouseout', function() {
// on cache le toolip
tooltip.classed('hidden', true);
});
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment