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.

#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;
  transition: .2s;
<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)];"#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