D3js raster tools docs : Tooltips

One of the best parts of having the original data values instead of images is that it’s possible to query them. Click on this image to see the values for each pixel in the GeoTIFF:

The code is the same as the isobands example. You can find the whole code for the tooltip example here.

<style>
#tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  margin: 0;
  padding: 10px;
  width: 180px;
  height: 40px;
  color: white;
  font-family: sans-serif;
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  border-radius:5px;
  transition: .2s;
}
</style>
<body>
<div id="tooltip">

The tooltip div is styled with css
- Note that opacity is set to 0 by default
A div is added to contain the tooltip information

canvas.on("click", function() {
  var screenCoords = d3.mouse(this);
  var coords = projection.invert(screenCoords);
  var xTiff = (coords[0] - geoTransform[0])/geoTransform[1];
  var yTiff = (coords[1] - geoTransform[3])/geoTransform[5];
  var tempValue = tempData[Math.round(yTiff)][Math.round(xTiff)];

  d3.select("#tooltip")
      .style("left", screenCoords[0] + "px")
      .style("top", screenCoords[1] + "px")
      .style("opacity", 1)
      .html("850 hPa temp: " + tempValue.toFixed(1) + " C");

});

An onClick event is added on the canvas element
The x, y coordinates of the canvas are get with d3.mouse
projection.invert(screenCoords) convert from x, y in pixels to longitude-latitude
The inverse GeoTransform is used to get the position in the data Array
- The position is rounded to get the nearest neighbour. An interpolation with the four nearest pixels could be used instead
The tooltip is set to opacity=1, the position is the one clicked and the text is set to the selected value

D3js raster tools docs Draw raster data using D3js in the browser or nodejs

Tooltips