Handling of traces with 2D data

[jkrimmer]

Plotting traces with 2D data in the z component such as contour or heatmap does not yield the expected result (Julia v1.7.0, Dash v1.1.1, PlotlyJS v0.18.8). It seems like the serialization might be at fault?

The following MWE demonstrates the issue:

using Dash, PlotlyJS

m = 20
n = 10

xdata = 1:m
ydata = 1:n
zdata = rand(m,n)

app = dash()
app.layout = html_div() do
    dcc_graph(figure=Plot(heatmap(x=xdata, y=ydata, z=transpose(zdata))))
end
display(plot(Plot(heatmap(x=xdata, y=ydata, z=transpose(zdata)))))

run_server(app, "0.0.0.0", debug=true)

Exemplary dash output:

Corresponding PlotlyJS output which meets the expectations:

[jkrimmer]

The reason is the handling of multi-dimensional arrays in JSON3 Handling of multi-dimensional arrays #196 .
We can work around this issue by converting multi-dimensional arrays into arrays of arrays before passing them to the dash app.

[bolognam]

Looking at the mentioned issue JuliaComputing/PlotlyLight#12 it seems that the solution (temporarily) is to write out:

m = 20
n = 10

xdata = 1:m
ydata = 1:n
zdata = rand(m,n)

fig = Plot(heatmap(z=collect(eachcol(zdata))))

To match the desired behavior above.

Would it be possible to add this explanation to Dash.jl documentation, or the README?

[etpinard]

Would it be possible to add this explanation to Dash.jl documentation, or the README?

Sure. If someone wants to make a PR that adds it to the JSON section in the README

https://github.com/plotly/Dash.jl#json

I'll merge it.