When reading a raster, the result is a matrix with the value for each pixel. With this data, the simplest thing to do is drawing the value of each pixel.

To draw them, only the canvas option is available for performance reasons, since the amount of pixels is usually very high.

## Drawing the GeoTIFF pixels

Let’s see the most important code parts to get this example:

You can find the whole code here

• The projection is set to geoAzimuthalEqualArea, but the nice thing about D3js is that this could be changed and the result would change accordingly
• Note that, as explained in the reading a raster page, the request is a bit different for the GeoTIFF
• The color scale is created as explained in the color scales page

This is the actual drawing part:

• A separate canvas is created, so any pixel drawing won’t affect the background
• var data has the pixel values of this new created canvas. The array has four elements for each pixel to represent the RGBA values. It’s the fastest way to draw an image, much more than drawing small rectangles
• The iteration is for each pixel in the output canvas, not the original GeoTIFF matrix
• To get the position in the values matrix, the output projection must be transformed to lat-lon using projection.invert
• Since the GeiTIFF is already in latlon, apply the inverse GeoTransform to get the position in the values matrix
• We want to represent the original pixels, in this example, so the pixel position is rounded to get the nearest pixel in the values matrix
• The color to use is calculated with the method explained in the color scales page

## Interpolating the GeoTIFF pixels to get a smooth image

This example is very similar to the previous one, but the value for each pixel is calculated interpolating the surrounding values with a bilinear interpolation.

The whole code is here. The only changes are:

• The pixel positions are not rounded, we need to know the decimal part of it to interpolate
• A bilinear interpolation is used to get the value. The inverse of distance gives uglier results, with visible pixels
• If px, py is exactly the datapixel position, all weights would be 0, so we have to check this case to put the pixel value
• In this example, it’s not necessary, but the code wouldn’t be correct if this case istn’t handled