Closed terasakisatoshi closed 3 years ago
Hi, @terasakisatoshi ! Apparently this is the problem:
julia> JSON2.write(rand(1:3, 3,3))
"[3,1,3,1,1,3,1,1,1]"
Behavior of other JSON packages:
julia> JSON3.write(rand(1:3, 3,3))
"[1,2,2,3,2,1,1,1,1]"
julia> JSON.json(rand(1:3, 3,3))
"[[2,2,1],[1,3,1],[3,1,2]]"
Only JSON behaves adequately with the matrix, but I would not like to switch to it for a number of reasons. I still don't really understand what to do with this - apparently I will need to do PR in JSON2 (or do piracy inside Dash and overload the method for the matrix)
As a temporary not very beautiful solution I can offer:
z = [rand(3) for _ in 1:3]
Thank you @waralex .
I was trying (this is what I wanted) to display an image using Dash.jl via Plots.jl
's API something like:
using Dash
using DashHtmlComponents
using DashCoreComponents
using Plots
plotly()
using Images
using TestImages
p = plot(imresize(testimage("mandrill"), 100,100))
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
run_server(app, "127.0.0.1", 8080, debug=true)
Since Plots.jl uses heatmap
to display image,Plots.plot(image)
is almost equivalent to heatmap(image, yflip=true, colorbar=false, aspect_ratio=:equal)
.
On the other hand, due to Dash uses JSON2.write(matrix)
, it causes phenomena like 😅 :
It seems your temporary solution works to display an image (It is not cool though 😅 )
Code
using Dash
using DashHtmlComponents
using DashCoreComponents
using Plots
plotly()
using Images
using TestImages
p = plot(imresize(testimage("mandrill"), 100,100))
data = Plots.plotly_series(p)
data[1][:z] = [c for c in eachcol(data[1][:z])] # <-- As a temporary
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
run_server(app, "127.0.0.1", 8080, debug=true)
Result
Rather than the heatmap
trace type, the ideal solution would be documenting the new imshow
trace type for PlotlyJS.jl:
Can we just use PlotlyJS jl for figure? I mean, something like:
p = plot(traces, layout)
dcc_graph(; figure = p)
Because PlotlyJS plot have the same structure as the figure tuple.
@jackparmer and @ndgnuh you are on to something!!
Here is a working version of this example that uses the new image
trace type in PlotlyJS.jl (what plotly.py's imshow
is built on) to view the mandrill image:
using Dash
using DashHtmlComponents
using DashCoreComponents
using PlotlyJS
using Images
using TestImages
img = imresize(testimage("mandrill"), 100, 100)
p = plot(image(z=channelview(img') .* 255))
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=p
)
end
run_server(app, "127.0.0.1", 8080, debug=false)
A few notes:
Images.channelview
on the image to go from a Matrix of RGB types to a 3d array. channelview
because Julia is column-major while plotly.js is row major. :(channelview
by 255 to put it on the [0, 255] scale expected by plotly.js javascript instead of the [0, 1] scale preferred by Images.jlGood luck, please feel free to reopen (or comment!) if you have additional questions
Also see the new image docs!! https://plotly.com/julia/images/
I would like to draw heatmap using Dash.jl like
http://juliaplots.org/PlotlyJS.jl/stable/examples/heatmaps/
The following code only displays diagonal elements
Here is my code to reproduce this issue