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!
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!
Share Improve this question edited Jun 16, 2014 at 10:04 VividD 10.5k8 gold badges66 silver badges112 bronze badges asked Aug 7, 2012 at 19:25 reptilicusreptilicus 10.4k6 gold badges58 silver badges80 bronze badges 3- Yeah, something along those lines. I see a few links to d3 heatmaps,no plain images though so far. I'm slightly surprised. . . – reptilicus Commented Aug 7, 2012 at 19:45
- What do you mean by "plain image"? – Lars Kotthoff Commented Aug 7, 2012 at 20:14
- 1 Found an example here: bl.ocks.org/3074470 – reptilicus Commented Aug 7, 2012 at 20:55
1 Answer
Reset to default 18If 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.