How to plot 3d chart ?

[mdsa3d]

Hi, I would like to ask how to plot 3d charts using StipplePlotly.jl? I have a basic 3d plot :

using Plots; 
plotly();

t = collect(1:1:10)
x, y, z= cos(t), sin(t), t
scatter3d(x, y, z)

This a working 3d plot with plotly() as backend renderer. I tried to integrate this with Stipple web app:

using Genie, Genie.Renderer.Html, Stipple, StipplePlotly

t = collect(1:1:10)

pd1 = PlotData(
    x = cos.(t),
    y = sin.(t),
    z = t,
    plot = StipplePlotly.Charts.PLOT_TYPE_SCATTER3D, # for 3D plots,
    name = "test",
)

plot_data = [pd1]
@reactive mutable struct Model <: ReactiveModel
    data::R{Vector{PlotData}} = plot_data, READONLY
    layout::R{PlotLayout} = PlotLayout(
        plot_bgcolor = "#999",
        showlegend = false,
        title = PlotLayoutTitle(text = "Random numbers", font = Font(24)),
    )
    config::R{PlotConfig} = PlotConfig()
end

function ui(model)
    page(model, class = "container", [plot(:data, layout = :layout, config = :config)])
end

route("/") do
    Stipple.init(Model) |> ui |> html
end
up()

I am following one of the StipplePlotly.jl tutorials: https://github.com/GenieFramework/StippleDemos/tree/master/StipplePlotly However, my app returns the following error:

ERROR: LoadError: MethodError: no method matching (Matrix{T} where T)(::Vector{Int64})
Closest candidates are:
  (Array{T, N} where T)(::AbstractArray{S, N}) where {S, N} at boot.jl:470
  (Matrix{T} where T)(::Union{LinearAlgebra.QR, LinearAlgebra.QRCompactWY}) at C:\buildbot\worker\package_win64\build\usr\share\julia\stdlib\v1.6\LinearAlgebra\src\qr.jl:400
  (Matrix{T} where T)(::LinearAlgebra.LQPackedQ{T, S} where S<:(AbstractMatrix{T} where T)) where T at C:\buildbot\worker\package_win64\build\usr\share\julia\stdlib\v1.6\LinearAlgebra\src\lq.jl:155
  ...
Stacktrace:
 [1] convert(#unused#::Type{Matrix{T} where T}, a::Vector{Int64})
   @ Base .\array.jl:532
 [2] convert(#unused#::Type{Union{Nothing, Matrix{T} where T}}, x::Vector{Int64})
   @ Base .\some.jl:36
 [3] PlotData(plot::String, align::Nothing, alignmentgroup::Nothing, alphahull::Nothing, anchor::Nothing, aspectratio::Nothing, autobinx::Nothing, autobiny::Nothing, autocolorscale::Nothing, autocontour::Nothing, automargin::Nothing, bandwidth::Nothing, base::Nothing, baseratio::Nothing, bingroup::Nothing, box::Nothing, boxmean::Nothing, boxpoints::Nothing, caps::Nothing, cauto::Nothing, cells::Nothing, cliponaxis::Nothing, close::Nothing, cmax::Nothing, cmid::Nothing, cmin::Nothing, color::Nothing, coloraxis::Nothing, colorbar::Nothing, colorscale::Nothing, columnorder::Nothing, columnwidth::Nothing, connectgaps::Nothing, connector::Nothing, constraintext::Nothing, contour::Nothing, contours::Nothing, cumulative::Nothing, customdata::Nothing, decreasing::Nothing, delaunayaxis::Nothing, delta::Nothing, direction::Nothing, dlabel::Nothing, domain::Nothing, dx::Nothing, dy::Nothing, error_x::Nothing, error_y::Nothing, error_z::Nothing, facecolor::Nothing, fill::Nothing, fillcolor::Nothing, flatshading::Nothing, gauge::Nothing, groupnorm::Nothing, header::Nothing, hidesurface::Nothing, high::Nothing, histfunc::Nothing, histnorm::Nothing, hole::Nothing, hovertext::Nothing, hoverinfo::Nothing, hoverlabel::Nothing, hoveron::Nothing, hoverongaps::Nothing, hovertemplate::Nothing, i::Nothing, intensity::Nothing, intensitymode::Nothing, j::Nothing, k::Nothing, ids::Nothing, increasing::Nothing, insidetextanchor::Nothing, insidetextfont::Nothing, insidetextorientation::Nothing, isomax::Nothing, isomin::Nothing, jitter::Nothing, labels::Nothing, label0::Nothing, legendgroup::Nothing, lighting::Nothing, lightposition::Nothing, line::Nothing, low::Nothing, lowerfence::Nothing, marker::Nothing, maxdisplayed::Nothing, mean::Nothing, measure::Nothing, meanline::Nothing, median::Nothing, meta::Nothing, mode::Nothing, name::String, nbinsx::Nothing, nbinsy::Nothing, ncontours::Nothing, notched::Nothing, notchwidth::Nothing, notchspan::Nothing, number::Nothing, offset::Nothing, offsetgroup::Nothing, opacity::Nothing, opacityscale::Nothing, colormodel::Nothing, open::Nothing, orientation::Nothing, outsidetextfont::Nothing, points::Nothing, pointpos::Nothing, projection::Nothing, pull::Nothing, q1::Nothing, q3::Nothing, quartilemethod::Nothing, reversescale::Nothing, rotation::Nothing, scalegroup::Nothing, scalemode::Nothing, scene::Nothing, sd::Nothing, selected::Nothing, selectedpoints::Nothing, showlegend::Nothing, showscale::Nothing, side::Nothing, sizemode::Nothing, sizeref::Nothing, slices::Nothing, sort::Nothing, source::Nothing, spaceframe::Nothing, span::Nothing, spanmode::Nothing, stackgaps::Nothing, stackgroup::Nothing, starts::Nothing, surface::Nothing, surfaceaxis::Nothing, surfacecolor::Nothing, text::Nothing, textangle::Nothing, textfont::Nothing, textinfo::Nothing, textposition::Nothing, texttemplate::Nothing, tickwidth::Nothing, totals::Nothing, transpose::Nothing, u::Nothing, uirevision::Nothing, unselected::Nothing, upperfence::Nothing, v::Nothing, values::Nothing, vertexcolor::Nothing, visible::Nothing, w::Nothing, whiskerwidth::Nothing, width::Nothing, x::Vector{Float64}, x0::Nothing, xaxis::Nothing, xbingroup::Nothing, xbins::Nothing, xcalendar::Nothing, xgap::Nothing, xperiod::Nothing, xperiodalignment::Nothing, xperiod0::Nothing, xtype::Nothing, y::Vector{Float64}, y0::Nothing, yaxis::Nothing, ybingroup::Nothing, ybins::Nothing, ycalendar::Nothing, ygap::Nothing, yperiod::Nothing, yperiodalignment::Nothing, yperiod0::Nothing, ytype::Nothing, z::Vector{Int64}, zauto::Nothing, zcalendar::Nothing, zhoverformat::Nothing, zmax::Nothing, zmid::Nothing, zmin::Nothing, zsmooth::Nothing)
   @ StipplePlotly.Charts ~\.julia\packages\StipplePlotly\JYt4T\src\Charts.jl:894
 [4] PlotData(; plot::String, align::Nothing, alignmentgroup::Nothing, alphahull::Nothing, anchor::Nothing, aspectratio::Nothing, autobinx::Nothing, autobiny::Nothing, autocolorscale::Nothing, autocontour::Nothing, automargin::Nothing, bandwidth::Nothing, base::Nothing, baseratio::Nothing, bingroup::Nothing, box::Nothing, boxmean::Nothing, boxpoints::Nothing, caps::Nothing, cauto::Nothing, cells::Nothing, cliponaxis::Nothing, close::Nothing, cmax::Nothing, cmid::Nothing, cmin::Nothing, color::Nothing, coloraxis::Nothing, colorbar::Nothing, colorscale::Nothing, columnorder::Nothing, columnwidth::Nothing, connectgaps::Nothing, connector::Nothing, constraintext::Nothing, contour::Nothing, contours::Nothing, cumulative::Nothing, customdata::Nothing, decreasing::Nothing, delaunayaxis::Nothing, delta::Nothing, direction::Nothing, dlabel::Nothing, domain::Nothing, dx::Nothing, dy::Nothing, error_x::Nothing, error_y::Nothing, error_z::Nothing, facecolor::Nothing, fill::Nothing, fillcolor::Nothing, flatshading::Nothing, gauge::Nothing, groupnorm::Nothing, header::Nothing, hidesurface::Nothing, high::Nothing, histfunc::Nothing, histnorm::Nothing, hole::Nothing, hovertext::Nothing, hoverinfo::Nothing, hoverlabel::Nothing, hoveron::Nothing, hoverongaps::Nothing, hovertemplate::Nothing, i::Nothing, intensity::Nothing, intensitymode::Nothing, j::Nothing, k::Nothing, ids::Nothing, increasing::Nothing, insidetextanchor::Nothing, insidetextfont::Nothing, insidetextorientation::Nothing, isomax::Nothing, isomin::Nothing, jitter::Nothing, labels::Nothing, label0::Nothing, legendgroup::Nothing, lighting::Nothing, lightposition::Nothing, line::Nothing, low::Nothing, lowerfence::Nothing, marker::Nothing, maxdisplayed::Nothing, mean::Nothing, measure::Nothing, meanline::Nothing, median::Nothing, meta::Nothing, mode::Nothing, name::String, nbinsx::Nothing, nbinsy::Nothing, ncontours::Nothing, notched::Nothing, notchwidth::Nothing, notchspan::Nothing, number::Nothing, offset::Nothing, offsetgroup::Nothing, opacity::Nothing, opacityscale::Nothing, colormodel::Nothing, open::Nothing, orientation::Nothing, outsidetextfont::Nothing, points::Nothing, pointpos::Nothing, projection::Nothing, pull::Nothing, q1::Nothing, q3::Nothing, quartilemethod::Nothing, reversescale::Nothing, rotation::Nothing, scalegroup::Nothing, scalemode::Nothing, scene::Nothing, sd::Nothing, selected::Nothing, selectedpoints::Nothing, showlegend::Nothing, showscale::Nothing, side::Nothing, sizemode::Nothing, sizeref::Nothing, slices::Nothing, sort::Nothing, source::Nothing, spaceframe::Nothing, span::Nothing, spanmode::Nothing, stackgaps::Nothing, stackgroup::Nothing, starts::Nothing, surface::Nothing, surfaceaxis::Nothing, surfacecolor::Nothing, text::Nothing, textangle::Nothing, textfont::Nothing, textinfo::Nothing, textposition::Nothing, texttemplate::Nothing, tickwidth::Nothing, totals::Nothing, transpose::Nothing, u::Nothing, uirevision::Nothing, unselected::Nothing, upperfence::Nothing, v::Nothing, values::Nothing, vertexcolor::Nothing, visible::Nothing, w::Nothing, whiskerwidth::Nothing, width::Nothing, x::Vector{Float64}, x0::Nothing, xaxis::Nothing, xbingroup::Nothing, xbins::Nothing, xcalendar::Nothing, xgap::Nothing, xperiod::Nothing, xperiodalignment::Nothing, xperiod0::Nothing, xtype::Nothing, y::Vector{Float64}, y0::Nothing, yaxis::Nothing, ybingroup::Nothing, ybins::Nothing, ycalendar::Nothing, ygap::Nothing, yperiod::Nothing, yperiodalignment::Nothing, yperiod0::Nothing, ytype::Nothing, z::Vector{Int64}, zauto::Nothing, zcalendar::Nothing, zhoverformat::Nothing, zmax::Nothing, zmid::Nothing, zmin::Nothing, zsmooth::Nothing)
   @ StipplePlotly.Charts .\util.jl:450

May I ask, what could be causing this error ? Though, 2D chart implementation works perfectly fine. I would like to seek help in making 3d charts accessible through apps. Thanks, look forward to the suggestions.

[AbhimanyuAryan]

@mdsa3d https://github.com/GenieFramework/StipplePlotly.jl/blob/12c9b2b1f37964501c900ec303cfaa18680eaa92/src/Charts.jl#L1082

looks like you need to pass a matrix as z param. Instead of vector

using Genie, Genie.Renderer.Html, Stipple, StipplePlotly

t = collect(1:1:10)

# pd1 = PlotData(
#     x = cos.(t),
#     y = sin.(t),
#     z = t,
#     plot = StipplePlotly.Charts.PLOT_TYPE_SCATTER3D, # for 3D plots,
#     name = "test",
# )

# plot_data = [pd1]
@reactive mutable struct Model <: ReactiveModel
    # data::R{Vector{PlotData}} = plot_data, READONLY
    data::R{PlotData} = PlotData(
    x = cos.(t),
    y = sin.(t),
    z = t[:,:],
    plot = StipplePlotly.Charts.PLOT_TYPE_SCATTER3D, # for 3D plots,
    name = "test")

    layout::R{PlotLayout} = PlotLayout(
        plot_bgcolor = "#999",
        showlegend = false,
        title = PlotLayoutTitle(text = "Random numbers", font = Font(24)),
    )
    config::R{PlotConfig} = PlotConfig()
end

function ui(model)
    page(model, class = "container", [plot(:data, layout = :layout, config = :config)])
end

route("/") do
    Stipple.init(Model) |> ui |> html
end
up()

[AbhimanyuAryan]

feel free to close the issue if you think the output is as expected @mdsa3d

[mdsa3d]

Thanks @AbhimanyuAryan for the help, highly appreciate it !! Indeed this is what I was looking for, will close this issue for now. 😄

[AbhimanyuAryan]

@mdsa3d is it ok if you/I can contribute this example to StippleDemos/StipplePlotly/3DPlots? So others can also benefits from it?

A little update: You can use vector with z now(just like PlotlyJS). I will push and tag new version. So you original code below should work just fine

using Genie, Genie.Renderer.Html, Stipple, StipplePlotly

t = collect(1:1:10)

pd1 = PlotData(
    x = cos.(t),
    y = sin.(t),
    z = t,
    plot = StipplePlotly.Charts.PLOT_TYPE_SCATTER3D, # for 3D plots,
    name = "test",
)

plot_data = [pd1]

@reactive! mutable struct Model <: ReactiveModel
    data::R{Vector{PlotData}} = plot_data, READONLY
    layout::R{PlotLayout} = PlotLayout(
        plot_bgcolor = "#999",
        showlegend = false,
        title = PlotLayoutTitle(text = "Random numbers", font = Font(24)),
    )
    config::R{PlotConfig} = PlotConfig()
end

function ui(model)
    page(model, class = "container", [plot(:data, layout = :layout, config = :config)])
end

route("/") do
    model = Model |> init |> ui |> html
end

up()

[mdsa3d]

Thanks for the updated suggestion @AbhimanyuAryan Highly appreciate it ! Yes, indeed please do upload it is a great idea !! Hope others can benefit from this !

[AbhimanyuAryan]

@mdsa3d you wanna do it? It will show as your contribution to OSS :)

[mdsa3d]

@AbhimanyuAryan yeah sure if that is ok ? 😄

[AbhimanyuAryan]

@AbhimanyuAryan yeah sure if that is ok ? 😄

It is "more than" OK 😉 thanks