PlotlyJS.jl slider example

example.jl

using PlotlyJS

# set up data
na = 10
nw = 5
zz = rand(1:4, na, nw, nw)

text = similar(zz, String)
text[zz .== 1] = "stay, work"
text[zz .== 2] = "move, work"
text[zz .== 3] = "stay, quit"
text[zz .== 4] = "move, quit"

agrid = linspace(0, 5, na)
wgrid = linspace(0, 1, nw)

# construct sliders inside the layout
layout = Layout(
    sliders=[attr(
        steps=[
            attr(
                label=round(agrid[i], 3),
                method="restyle",
                args=[attr(z=(zz[i, :, :],), text=(text[i, :, :],)), 0]
            )
            for i in 1:na
        ],
        active=1,
        currentvalue_prefix="Assets: ",
        pad_t=40
    )],
    xaxis_title="zh",
    yaxis_title="zf",
    title="Discrete policy"
)

# we only have one trace -- a headmap for z
a0 = round(Int, na/2)
t = heatmap(
    z=zz[a0, :, :],
    x=wgrid,
    y=wgrid,
    colorscale="Blues",
    colorbar=attr(
        ticks="outside",
        tickvals=1:4,
        ticktext=["(N, Y)", "(Y,Y)", "(N,N)", "(Y,N)"],
        title="(move, work)",
    ),
    text=text[a0, :, :],
    hoverinfo="all",
    name="Discrete policy",
)
p = plot(t, layout)

Cool! This isn't a self-contained example sadly:

UndefVarError: z not defined  (line 8)

good catch -- changed the z to zz. Hopefully it works! (no promises though -- it is 4 years old!)

Alas no. Did you follow any documentation at all for this? This is the only thing google served me for "Julia plotly slider"

For future folks, here is the plot I wanted:

using PlotlyJS

f(x, y) = x^2 + 2y^2

x = 6

xlim=[-10, x]
ylim=[-10, 10]

xs = LinRange(xlim..., 101)
ys = LinRange(ylim..., 101)
zs = [f(x, y) for x in xs, y in ys]

y = 4
dy = 4
f_y(y) = 4y

traces = GenericTrace[]

push!(traces, PlotlyJS.surface(x=xs, y=ys, z=zs, 
        visible=true, showscale=false, opacity=0.8))
push!(traces, PlotlyJS.surface(x=[x, x+0.001], y=ylim, z=[[maximum(zs), minimum(zs)] [maximum(zs), minimum(zs)]], 
        visible=true, showscale=false, color="grey", opacity=0.3))
push!(traces, PlotlyJS.scatter3d(x=fill(x, size(ys)), y=ys, z=[x^2 + 2y^2 for y in ys], 
        visible=true, showlegend=false, mode="lines", line=attr(color="red", width=2)))

for y in ys
    push!(traces, PlotlyJS.scatter3d(x=fill(x, 2),y=[y-dy, y+dy], z=[f(x,y)-f_y(y)*dy, f(x,y)+f_y(y)*dy], 
            mode="lines", visible=false, showlegend=false, line=attr(color="orange", width=5)))
end

layout = Layout(
    sliders=[attr(
        steps=[
            attr(
                label=round(y, digits=2),
                method="update",
                args=[attr(visible=[fill(true, 3); fill(false, i-1); true; fill(false, 101-i)])]
            )
            for (i, y) in enumerate(ys)
        ],
        active = y,
        currentvalue_prefix="x = 6, y = ",
    )],
    scene = attr(
        xaxis = attr(range=[-10,10]),
        yaxis = attr(range=[-10,10]),
        zaxis = attr(range=[0,300])
    ),
)

p = PlotlyJS.plot(traces, layout)