javascriptarraysangularplotlyscatter3d

Filtering data in 3d scatter plotly creates plot with different third color other than the two colors specified in color scale, in angular

I have a 3d scatter plotly, the data has a flag true or false and the plotly gives specific color for true which I map to 0 and another color to false which I map to 1

enter image description here

this is the plotly showing unfiltered data

clicking on Normal at the top will filter the data to have only the normal points displayed which is in blue color however upon filtering this is the color I end up with

enter image description here

the Same thing happens when filtering outlier

the marker having color scale and color, color is an array of zeros and ones,which in the case of filtered data it is either ones or zeros here it is:

enter image description here

I want the zeroes to map to the color #17ADE0" and the ones to the #A42286 as defined in color scale, I don't understand why a third color appears

I tried adding the color_discrete_map: "identity" with no success so far

Solution

  • The issue is you need to set the min and max values to ensure color scale covers full range and as your data js zeros and ones we can set it directly

    cmin:0 cmax :1

    So it should be as follows :

    marker: {  
colorscale: [
[0, '#17ADE0'],[1,'#A42286']],
cmin: 0,cmax: 1  
 } };

    In case the data is not zeros and ones we can set it using dynamically using Math.min() and Math.max to determine the minimum and maximum values