Skip to content

Instantly share code, notes, and snippets.

@sglyon
Last active May 15, 2021 18:55
Show Gist options
  • Save sglyon/4e85aa915b30586bddf2c0249e94a58b to your computer and use it in GitHub Desktop.
Save sglyon/4e85aa915b30586bddf2c0249e94a58b to your computer and use it in GitHub Desktop.
PlotlyJS.jl slider example
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)
@alexlenail
Copy link

alexlenail commented May 15, 2021

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment