To make the xy diagram you need to step through each pixel and convert from RGB to XYZ and then to xyY. These points are then plotted on a new canvas element with the coordinates x & y (scaled so the diagram is a reasonable size) and with the color of the original pixel from the image.
The data from the canvas arrives as a one-dimensional buffer of RGBa values rather than a more convenient matrix where each element represents a single RGB pixel. This is very efficient, but it makes a little extra work for us. The first element in the buffer is the red value of the first pixel followed by the green, and then the blue, and finally the alpha value. The next pixel begins at the fifth element. If you are looking for a specific pixel at image coordinates (x, y), it's red value will be found at:
(x + y * image.width) * 4.
In every browser I tested, by the time the image is drawn to the canvas it has been converted to sRGB. You can see this quite clearly with the included image that covers the sRGB gamut almost perfectly. This is reasonable behavior for a web browser and is in line with the canvas specification. But it means we can't upload a ProPhotoRGB image and marvel at the vastness of its gamut or easily compare images from different color spaces. Sadly, this limits this particular tool to a novelty and simple demonstration, but it doesn't mean that client side image manipulations don't have a lot of interesting potential.
Be aware that the chromaticity diagram is a two-dimensional representation of three-dimensional data. Many different colors can have the same xy coordinates. I've made no attempt to influence the order in which they are drawn on the canvas. It's possible that the amazing color you are looking for on the diagram was drawn underneath its darker cousin. Also, many dark colors that look black or near-black are numerically very saturated and will be plotted at the edge of the RGB gamut. A color such as RGB[3, 0, 0] looks black but is actually pure dark red and will sit at the same xy coordinate as the red primary of the space. This is especially noticeable in the image that loads with this post where the dark colors seem to create an outline around the triangle-shaped sRGB gamut. It may be helpful to cull these values before plotting.
If you really want to figure it out, take a look at the source — specifically the colorplot.js file. It's not very complicated and I've tried to annotate it with helpful comments.
The color checker image is from BabelColor who makes some really cool color analysis software.
If you like nerdy web experiments, you might also like this scrolling version of an historic chess game.
Never tested on animals or Internet Explorer.