Polyline meta-information

[sc28]

How could one display meta-information about a polyline by hovering the pointer over the line? (e.g. its ID number or name would appear in an info bubble when passing the mouse over a polyline).

I suspect this would be fairly easy to do: the slickgrid example already allows to highlight a polyline by hovering over the corresponding row in the table. This feature would more or less be the opposite.

Thanks for any tips regarding this, I'm still fairly new to D3 and JS, and any help would be appreciated to get started!

[t3o-it]

If the polyline is rendered in a Canvas, as like as this chart does, you loose the control of the polyline itself. The canvas is just a rasterization of all your lines and you cannot assign pointer events to specific lines.
Doing the opposite, highlighting the polyline that corresponds to a specific row in a table, is doable because you redraw the selected polyline.

Of course, if you draw the polylines as SVG objects, you can assign pointer events to them and do what you'd like to do. But it really depends on the number of lines you have to plot. Canvas performs much better with a lot of lines.

[syntagmatic]

A few ideas of how to implement:

1. Use a quadtree with some points sampled along each line, similar to this Voronoi example. I think this is the least viable, but a quadtree still might be useful with solution (3). https://bl.ocks.org/mbostock/8033015
2. Render the lines each as a different color in a hidden canvas. Use the mouse position and the color of the pixel on the hidden canvas to look up the original polyline data. http://bl.ocks.org/syntagmatic/6645345
3. Use the parallel coordinates geometry (point-line) duality to find the closest point given a particular cursor location. Even better if it gives you the closest N points. Check out this block for how line intersection brushing currently works in the library: http://bl.ocks.org/syntagmatic/5441022

[sc28]

Thanks for the clarifications @t3o-it . So probably rendering each line as SVG would become a problem for hundreds of lines.

@syntagmatic, idea number 2 seems like it would work nicely and doesn't look too complex to implement.
I'll try and look into it and see if it could be adapted for the parallel coordinates.

Otherwise, the brush function still remains a good alternative to select a single polyline and access info with the associated table as in slickgrid.

[sc28]

Hi again,
I finally attempted to implement the second idea above (use mouse position to find color in a hidden canvas), but am running into a few issues.

In summary, my approach was as follows:

1. In d3.parcoords.js, I add a new canvas called “clickable_colors” (line 51)
2. At line 709, I assign a unique hex color value for each polyline. The ID of each data row is used to construct the hex code.
3. In brushing.html (line 101), I use the function getPolylineID() to get the color from the mouse position (based on this example: http://jsfiddle.net/DV9Bw/1/), but here's where I'm stuck: the mousemove() function doesn’t seem to work. To be sure the issue was related to the parcoords interface, I also defined getPolylineID_test(), which acts on a simple canvas below the chart, and works properly (cf. bl.ocks below).

So the issue is that I cannot get the colors from the “layered” canvases (whether the new “clickable_colors”, or others (e.g. “foreground”). I tried setting a very high z-index to the layers, but this doesn’t seem to work either.

The minimal working example is available here, and also uploaded as a bl.ocks here

Any hints on how to make this work, and handle the layered canvases appropriately?

[sc28]

I managed to get a working version of clickable polylines, you can try it out at the following bl.ocks.

If it gets the job done, it could certainly benefit from some improvements. Currently the hovering is a bit "jumpy" because it isn't possible to draw crisp lines, so using @syntagmatic 's color-coded approach always leads to some wrongly colored pixels. I could filter out some of the wrong colors (e.g. if they contain letters), but others always remain.

Any further suggestions are welcome!