[Question] Can we display surface?

[foldfelis]

I'am looking for a solution to integrate Plots.jl and Dash.jl. Here's how I generate a plotly plot:

using Plots
plotly()
p = plot(1:0.1:10, 1:0.1:10, (x, y)->sin(x)+cos(y), st=:surface)

The figure looks like this:

I've tried to transfer the plot to plotly series and set to the dcc_graph

using Plots
using Dash
using DashHtmlComponents
using DashCoreComponents

function gen_app()
    plotly()
    p = plot(1:0.1:10, 1:0.1:10, (x, y)->sin(x)+cos(y), st=:surface)
    data = Plots.plotly_series(p)
    layout = Plots.plotly_layout(p)

    app = dash(external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"])
    app.layout = html_div() do
        html_h1("Hello Dash"),
        html_div("Dash.jl: Julia interface for Dash"),
        dcc_graph(
            id = "example-graph",
            figure = (data, layout)
        )
    end

    return app
end

Base.run(app::Dash.DashApp) = run_server(app, "0.0.0.0", 8080)

julia> run(gen_app())

But I get a web page with an empty graph

Is there any way to plot a surface in Dash.jl?

[terasakisatoshi]

related to #60 ?

[foldfelis]

@terasakisatoshi I'm not sure, I am looking for a reliable way to make it happened.

[jackparmer]

I think that you may want to use PlotlyJS.jl rather than Plots.jl - PlotlyJS.jl is more analogous to the Python Plotly library and works entirely offline. See 3d surface examples here (we're working on improving these docs):

http://juliaplots.org/PlotlyJS.jl/stable/examples/3d/

[foldfelis]

@jackparmer Thanks, I'll give it a try

[foldfelis]

@jackparmer I've tried something like this:

using Dash
using DashHtmlComponents
using DashCoreComponents
using PlotlyJS

function get_surface()
    data = surface(
        z=[
            [8.83, 8.89, 8.81, 8.87, 8.9, 8.87],
            [8.89, 8.94, 8.85, 8.94, 8.96, 8.92],
            [8.84, 8.9, 8.82, 8.92, 8.93, 8.91],
            [8.79, 8.85, 8.79, 8.9, 8.94, 8.92],
            [8.79, 8.88, 8.81, 8.9, 8.95, 8.92],
            [8.8, 8.82, 8.78, 8.91, 8.94, 8.92],
            [8.75, 8.78, 8.77, 8.91, 8.95, 8.92],
            [8.8, 8.8, 8.77, 8.91, 8.95, 8.94],
            [8.74, 8.81, 8.76, 8.93, 8.98, 8.99],
            [8.89, 8.99, 8.92, 9.1, 9.13, 9.11],
            [8.97, 8.97, 8.91, 9.09, 9.11, 9.11],
            [9.04, 9.08, 9.05, 9.25, 9.28, 9.27],
            [9, 9.01, 9, 9.2, 9.23, 9.2],
            [8.99, 8.99, 8.98, 9.18, 9.2, 9.19],
            [8.93, 8.97, 8.97, 9.18, 9.2, 9.18]
        ],
        colorscale="Viridis"
    )
    layout = Layout(width=800, height=550)

    return data, layout
end

function gen_app()
    d, l = get_surface()

    app = dash(external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"])
    app.layout = html_div() do
        html_h1("Hello Dash"),
        html_div("Dash.jl: Julia interface for Dash"),
        dcc_graph(
            id = "example-graph",
            figure = (data=d, layout=l)
        )
    end

    return app
end

Base.run(app::Dash.DashApp) = run_server(app, "0.0.0.0", 8080)

But this doesn't seem to work, I got the same empty graph shown in the first comment.

I've tried define dcc_graph directly:

function gen_app()
    app = dash(external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"])
    app.layout = html_div() do
        html_h1("Hello Dash"),
        html_div("Dash.jl: Julia interface for Dash"),
        dcc_graph(
            id = "example-graph",
            figure = (
                data = [(
                    z=[
                        [8.83, 8.89, 8.81, 8.87, 8.9, 8.87],
                        [8.89, 8.94, 8.85, 8.94, 8.96, 8.92],
                        [8.84, 8.9, 8.82, 8.92, 8.93, 8.91],
                        [8.79, 8.85, 8.79, 8.9, 8.94, 8.92],
                        [8.79, 8.88, 8.81, 8.9, 8.95, 8.92],
                        [8.8, 8.82, 8.78, 8.91, 8.94, 8.92],
                        [8.75, 8.78, 8.77, 8.91, 8.95, 8.92],
                        [8.8, 8.8, 8.77, 8.91, 8.95, 8.94],
                        [8.74, 8.81, 8.76, 8.93, 8.98, 8.99],
                        [8.89, 8.99, 8.92, 9.1, 9.13, 9.11],
                        [8.97, 8.97, 8.91, 9.09, 9.11, 9.11],
                        [9.04, 9.08, 9.05, 9.25, 9.28, 9.27],
                        [9, 9.01, 9, 9.2, 9.23, 9.2],
                        [8.99, 8.99, 8.98, 9.18, 9.2, 9.19],
                        [8.93, 8.97, 8.97, 9.18, 9.2, 9.18]
                    ],
                    type="surface"
                )],
                layout = (
                    title = "Dash Data Visualization",
                )
            )
        )
    end

    return app
end

Base.run(app::Dash.DashApp) = run_server(app, "0.0.0.0", 8080)

And it works~~~ 💯

[sglyon]

Hi @foldfelis you should be able to use PlotlyJS.jl now to create figures.

You can use the plot function to construct your figure and then pass that directly to the figure argument of dcc_graph as shown below

using Dash
using DashHtmlComponents
using DashCoreComponents
using PlotlyJS

function get_surface()
    data = surface(
        z=[
            [8.83, 8.89, 8.81, 8.87, 8.9, 8.87],
            [8.89, 8.94, 8.85, 8.94, 8.96, 8.92],
            [8.84, 8.9, 8.82, 8.92, 8.93, 8.91],
            [8.79, 8.85, 8.79, 8.9, 8.94, 8.92],
            [8.79, 8.88, 8.81, 8.9, 8.95, 8.92],
            [8.8, 8.82, 8.78, 8.91, 8.94, 8.92],
            [8.75, 8.78, 8.77, 8.91, 8.95, 8.92],
            [8.8, 8.8, 8.77, 8.91, 8.95, 8.94],
            [8.74, 8.81, 8.76, 8.93, 8.98, 8.99],
            [8.89, 8.99, 8.92, 9.1, 9.13, 9.11],
            [8.97, 8.97, 8.91, 9.09, 9.11, 9.11],
            [9.04, 9.08, 9.05, 9.25, 9.28, 9.27],
            [9, 9.01, 9, 9.2, 9.23, 9.2],
            [8.99, 8.99, 8.98, 9.18, 9.2, 9.19],
            [8.93, 8.97, 8.97, 9.18, 9.2, 9.18]
        ],
        colorscale="Viridis"
    )
    layout = Layout(width=800, height=550)

    return plot(data, layout)
end

function gen_app()
    app = dash(external_stylesheets=["https://codepen.io/chriddyp/pen/bWLwgP.css"])
    app.layout = html_div() do
        html_h1("Hello Dash"),
        html_div("Dash.jl: Julia interface for Dash"),
        dcc_graph(
            id="example-graph",
            figure=get_surface()
        )
    end
    return app
end

run_server(gen_app(), "0.0.0.0", 8080)

When I run this, I get the following:

Thanks for the question!

[foldfelis]

That is awesome 😎, Thanks