D3: Grayscale image display driven by 2D array data

Question

Does anybody know how to display a greyscale image, i.e. a 2-D array of pixel intensities,using d3? I can't seem to find any examples of it anywhere, is it going to be tricky? Any help / links / pointers appreciated!

Answer 1

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:

• heatmap from CSV using SVG rect elements
• heatmap from JSON using Canvas

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.