Skip to content
Advertisement

How to dynamically change color of selected category using dropdown box?

I am working on an app that takes in 2 inputs to update a scatterplot displaying the results of a cluster analysis. The first input filters the points on the graph through a time range slider. The second input is a dropdown box that is intended to highlight the color of a category of interest on the graph. The categories available in the dropdown box are the different clusters resulting from cluster analysis done on the time range of data. Depending on the time range selected, there may be a different number of clusters available.

I want to be able to color the categories not selected in various continuous shades of grey and the selected category to be colored green or something vibrant that stands out. As of now, I have a combination of

JavaScript

and

JavaScript

to meet this requirement, but it does not seem to be working. The color_discrete_map argument seems to be overruled by the color_continuous_scale argument.

Here is my code so far:

JavaScript

Not sure how to fix the issues mentioned above. Can anyone point me in the right direction? Any help would be appreciated!

Thank you!

Advertisement

Answer

You have three different ways of changing the colors:

JavaScript

And they contradict each other. First of all remove “color_continuous_scale” and “color_discrete_map” entirely. You seem to want custom defined colors, not predefined colors.

From my experience the best way to do this is to add a separate column that has a color defined for each row of the data. This way you have complete control of the color logic.

Create a column that holds the color value for each datapoint. This can be a hexadecimal value or RGBA (if you also want to control opacity). A pandas lambda function is a simple way of doing this:

JavaScript

Then, you should just be able to assign the color to the value of the column:

JavaScript

Edit: If that does not work then its probably because of your marker definition. Remove the color="color" line from above and update your marker definition (in fig.update_traces):

JavaScript
User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement