Black Lives Matter. Please consider donating to Black Girls Code today.

Select Group of Points in Plotly

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.

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.

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.

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');
    })
  });
});

then call

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

instead of the above.

See https://plot.ly/javascript/plotlyjs-function-reference/#plotlyrestyle for more info.

1 Like