Genie Discord forum

I am creating a webapp that loads an image and outputs a heatmap of that image. How would I create a PlotData() variable for a heatmap? The code below attempts this in two different ways, but neither attempt works

# /dashboard.jl
slice = rand(84, 84)
image_viewer1 = PlotData(z=slice, plot="heatmap")
image_viewer2 = PlotData(slice, plot="heatmap")

# /ui.jl
plot(:image_viewer)
plot(:image_viewer2)

Error 1:

MethodError: no method matching (Vector)(::Matrix{Float64})

Error 2:

MethodError: no method matching StipplePlotly.Charts.PlotData(::Matrix{Float64}; plot="heatmap")

You need to use the correct type from StipplePlotly.Charts, and use an array of arrays instead of a matrix. Here's an example:

https://github.com/GenieFramework/GenieFrameworkDemos_NewAPI/tree/main/huggingface

The relevant code is:

 vec_matrix = [similarity_matrix[:,i] for i in 1:n_words]

hmap = PlotData(
                      z = similarity_matrix,
                      x = tokens,
                      y = tokens,
                      plot = StipplePlotly.Charts.PLOT_TYPE_HEATMAP,
                     )

Thanks, that repo will be super helpful. Is there anything unique about StipplePlotly and PlotlyJS with regards to syntax? If I set it up to work with PlotlyJS, the same code should essentially work with StipplePlotly, right?

you can use either syntax, here's an example using PlotlyJS

https://learn.geniecloud.io/examples/reactive-ui/plotlyjs-syntax