Hover over lines in parallel coordinate chart

[lakshaykc]

Parallel coordinate charts are useful when we have to filter out data across multiple dimensions and play with the constraints interactively. It would be nice to have a hover feature over the lines which would display their respective IDs or labels so to identify which row or column it is.

Currently, I am not able to hover over or extract out the data filtered data from the chart which is the goal of a parallel coordinate chart.

[alexcjohnson]

Great idea. We currently do emit plotly_hover and plotly_unhover events that point to individual items, but we don't show hover labels, nor is there a way to access the set of selected items. These would be great to add.

[lakshaykc]

I'd like to work on that. How can I add that (maybe on my fork)? Can someone guide me a bit through the code?

[alexcjohnson]

Absolutely! Here are the PR guidelines: https://github.com/plotly/plotly.js/blob/master/.github/PULL_REQUEST_TEMPLATE.md

Lets discuss this as two separate features (and two separate PRs), one for hover and another for filtered data.

---

Re: hover - here's where the events are emitted:

plotly.js/src/traces/parcoords/plot.js

Lines 57 to 63 in ed39d82

	var hover = function(eventData) {
	gd.emit('plotly_hover', eventData);
	};
	var unhover = function(eventData) {
	gd.emit('plotly_unhover', eventData);
	};

You'd just need to plumb in Fx.loneHover and Fx.loneUnhover before the event emissions. A good model for that may be gl3d:

plotly.js/src/plots/gl3d/scene.js

Lines 117 to 133 in ed39d82

	Fx.loneHover({
	x: (0.5 + 0.5 * pdata[0] / pdata[3]) * width,
	y: (0.5 - 0.5 * pdata[1] / pdata[3]) * height,
	xLabel: xVal,
	yLabel: yVal,
	zLabel: zVal,
	text: tx,
	name: lastPicked.name,
	color: Fx.castHoverOption(trace, ptNumber, 'bgcolor') || lastPicked.color,
	borderColor: Fx.castHoverOption(trace, ptNumber, 'bordercolor'),
	fontFamily: Fx.castHoverOption(trace, ptNumber, 'font.family'),
	fontSize: Fx.castHoverOption(trace, ptNumber, 'font.size'),
	fontColor: Fx.castHoverOption(trace, ptNumber, 'font.color')
	}, {
	container: svgContainer,
	gd: scene.graphDiv
	});

plotly.js/src/plots/gl3d/scene.js

Line 165 in ed39d82

Fx.loneUnhover(svgContainer);

---

Re: extracting the filtered data: This one is tougher, as parcoords manages all of that on the GPU. I'm not sure what the best way to get back to js will be... have the shaders write selection data back into a buffer/texture as a bitmask perhaps, then convert that to an array of indices in js?

Then there's the question of where to put the resulting selection. We can certainly emit plotly_selecting and plotly_selected events once we have this data, but it would be great if it were available as part of the state, not just in events. Most other trace types define a selectedpoints attribute, but we can't (just) do that with parcoords because the selection is defined by the dimension filters. That said, it would be great for crossfiltering purposes if we did have a way to specify a selection independent of the dimension filters (like in the example @jonmmease made for parcats #2963 (comment)). Perhaps a (writable) selectedpoints attribute as an input that acts as an additional filter beyond the dimension selections, then a (read-only) fullTrace._finalSelectedpoints array giving the resulting selection? We should hash out this API before anyone starts work on this part.

[lakshaykc]

Thanks for the pointers. I was working with plotly python version, and thought I could do it from the python wrapper. I am new to javascript. Let me go through some of the basics regarding events and play around with the code a little more. I'll try to add in the hover label atleast. I welcome any suggestions or references to start with events handling in JS.

[skylogic004]

+1 this would be a great feature!

How's the progress on this?

[iakouchine]

Any progress on this feature?

[renatobellotti]

I'd love to see this. That would be a real simplification for outlier detection and removal.

[nitin0301]

any update on this? much needed feature! Thanks for working on this...

[aquan9]

I would love to have this feature if anyone is working on it. Any updates on the status?
The lack of this feature is forcing me to find another plotting library at the moment.
Thank you for any progress.

[erinhwilson]

I love the sliding filter on the y-axes but same as @aquan9, I'm a little stuck without being able to see info about which data points I'm actually selecting. Would love to use this feature when possible :)

[ped59430]

+1

[jackparmer]

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $10k-$15k

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.