PlotlyJS Buttons question

Specific Domains Visualization
1

Hi everyone.
I am trying to understand how to do a couple of simple things with the buttons in PlotlyJS and I wonder if you can help me.

I have some data, and I want to add a dropdown menu to chance the color of each scatter plot independently, all together or make them all disappear.

Here is where I am at, but it does not work as I don’t know how to select just one of my plots.

using PlotlyJS, Distributions

x0 = rand(Normal(2, 0.4), 400)
y0 = rand(Normal(2, 0.4), 400)
x1 = rand(Normal(3, 0.6), 600)
y1 = rand(Normal(6, 0.4), 400)
x2 = rand(Normal(4, 0.2), 200)
y2 = rand(Normal(4, 0.4), 200)

trace1 = scatter(x=x0, y=y0, mode=“markers”, marker_color=“DarkOrange”)
trace2 = scatter(x=x1, y=y1, mode=“markers”, marker_color=“Crimson”)
trace3 = scatter(x=x2, y=y2, mode=“markers”, marker_color=“RebeccaPurple”)

layout = Layout(
updatemenus=[
attr(
buttons=[
attr(label=“1 in Red”,
method=“restyle”,
args=["attr(marker_color=“red”)]),
attr(label=“2 in Blue”,
method=“restyle”,
args=[attr(marker_color=“blue”)]),
attr(label=“3 in Red”,
method=“restyle”,
args=[attr(marker_color=“green”)]),
attr(label=“All in Black”,
method=“restyle”,
args=[attr(marker_color=“black”)]),
attr(label=“Show None”,
method=“restyle”,
args=[attr(marker_color=false)]),
],
)
],
title_text=“Highlight Clusters”,
showlegend=false
)

plot([trace1, trace2, trace3], layout)

2

Hi Mariano,

Here is one way to do this.
The reference to understand this is seeing the necessary arguments to the restyle method from

using PlotlyJS, Distributions

x0 = rand(Normal(2, 0.4), 400);
y0 = rand(Normal(2, 0.4), 400);
x1 = rand(Normal(3, 0.6), 600);
y1 = rand(Normal(6, 0.4), 400);
x2 = rand(Normal(4, 0.2), 200);
y2 = rand(Normal(4, 0.4), 200);

trace0 = scatter(x=x0, y=y0, mode="markers", marker_color="DarkOrange")
trace1 = scatter(x=x1, y=y1, mode="markers", marker_color="Crimson")
trace2 = scatter(x=x2, y=y2, mode="markers", marker_color="RebeccaPurple")

layout = Layout(
    updatemenus=[
        attr(
            buttons=[
                attr(label="1 in Red",
                    method="restyle",
                    args=[attr(marker_color="red"),
                        [0]]
                ),
                attr(label="2 in Blue",
                method="restyle",
                    args=[attr(marker_color="blue"),
                        [1]]
                ),
                attr(label="3 in Green",
                method="restyle",
                    args=[attr(marker_color="green"),
                        [2]]
                ),
                attr(label="All in Black",
                    method="restyle",
                    args=[attr(marker_color="black")]),
                attr(label="Show None",
                    method="restyle",
                    args=[attr(marker_color=false)]),
            ],
        )
    ],
    title_text="Highlight Clusters",
    showlegend=false
)

plot([trace0, trace1, trace2], layout)
3 Likes
3

Thanks @jd-foster it worked great!

4

just a question, the numbers (0,1,2), what do they mean? the plot index order?

5

Yes, this is the indexing to the traces since the first index is 0-based (unlike Julia’s 1-based indexing).

1 Like
6

Thanks!