D3: Grayscale image display driven by 2D array data
If just want to display an image, use the image element and the "xlink:href" attribute. For example:
svg.append("image") .attr("xlink:href", "my.png") .attr("width", 960) .attr("height", 500);If you want to colorize a grayscale image, then see this colorized heightmap example which uses quantiles to create a diverging color scale, and with HCL interpolation for better perception:
If you have your data in some other representation, these examples might be useful:
Lastly, if you have individual samples rather than a precomputed 2D histogram, you’ll need to bin the data before generating one of the above heatmaps.