Select Group of Points in Plotly

plotly.js
1

I’d like to extend the plotly interface for scatter3D plot with an option which allows me to select group of points belonging to particular group.

image
image.png1043×681 9.97 KB

Then, after clicking on randomly displayed point I would like to see a number (say 10 points) of highlighted points (closest to the selected point) of the same group.

image
image.png1042×636 13.4 KB

2

It should be possible by listening to plotly_click

Something like

Plotly.newPlot('graph', [/**/], {/**/}).then(gd => {
  gd.on('plotly_click', d => {
     Plotly.restyle(gd, 'marker.color', 'red')
  })
})

and https://plot.ly/javascript/plotlyjs-events/#event-data should help you get started.

3

Thank you etienne, as per your suggestion I am able to select the points but it is taking all the group and truring it into red marker. How could I specify that I need only specific category points and display it on my graph.

For example I only want trace 1 points to get highlighted not trace 2

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/3d-scatter.csv', function(err, rows){
function unpack(rows, key) {
	return rows.map(function(row)
	{ return row[key]; });}

var trace1 = {
	x:unpack(rows, 'x1'), y: unpack(rows, 'y1'), z: unpack(rows, 'z1'),
    mode: 'markers',
    text: 'Text E',
    textposition: 'bottom',
	marker: {
		size: 12,
		line: {
		color: 'rgba(217, 217, 217, 0.14)',
		width: 0.5},
		opacity: 0.8},
	type: 'scatter3d'
};

var trace2 = {
	x:unpack(rows, 'x2'), y: unpack(rows, 'y2'), z: unpack(rows, 'z2'),
    mode: 'markers',
    text: 'Text D',
    textposition: 'bottom',
	marker: {
		color: 'rgb(127, 127, 127)',
		size: 12,
		symbol: 'circle',
		line: {
		color: 'rgb(204, 204, 204)',
		width: 1},
		opacity: 0.8},
	type: 'scatter3d'};

var data = [trace1, trace2];
var layout = {margin: {
	l: 0,
	r: 0,
	b: 0,
	t: 0
  }};
Plotly.newPlot('myDiv', data, layout).then(gd => {
    gd.on('plotly_click', d => {
       Plotly.restyle(gd, 'marker.color', 'red');
    })
  });
});
4

then call

Plotly.restyle(gd, 'marker.color', 'red', [1])

instead of the above.

See Function reference in JavaScript for more info.

1 Like