Vega-Lite width and height in heatmap in Juno sometimes doesn't work!

Hi,

I tested the heatmap samples from the Vega-Lite.jl, such as,

d=60
x = [j for i in -d:d, j in -d:d]
y = [i for i in -d:d, j in -d:d]
z = x.^2 .+ y.^2
data = DataFrame(x=vec(x'),y=vec(y'),z=vec(z'))

data |> @vlplot(:rect,width=300,height=300, x="x:o", y="y:o", color=:z)

in Juno plot pane, when d=50 or 53, it shows the correct heatmap, but when d=60 or 59 or 71, it shows nothing.

I am new to Vega-Lite, would someone have experiences with Vega-Lite to help?

I am using Julia v1.3.1, Vega-Lite v1.0.0

Thanks,

Alex

I can confirm this issue, but I don’t have a solution just a workaround.
It only happens in the Juno plot pane, not in VSCode and not in a plane julia REPL when the plot opens in a browser or in ElectronDisplay.
I am not sure, if this is a Juno, Atom or VegaLite issue.

You can switch off the use of the plot pane in the settings:
Settings->Packages->julia-client->Settings->Enable Plot Pane

Now the plot is opened in a browser.
Additionally you can add and using ElectronDisplay to open a separate electron window with the plot.

Yes, I tried to save the plot to png file, and it successes with the correct width and height.

somehow the png file quality is quit bad, especially when I zoomed in, it’s very blury, compared with Plots results

Hi @oheil, I have another questions. when I plot heatmap, it seems there are ~1-2 pixel gap between each :rect mark, i tried to set mark strokWidth=0, but it still there, do you know how to remove this kind of gap, similar to make each bar stick together in a bar plot?

Try one of the vector formats, like SVG, PDF or EPS, they should give you a version of the plot you can easily zoom etc.

Re the Juno story, I’m not sure what is happening there, but you can follow progress (if it happens :slight_smile: ) at https://github.com/queryverse/VegaLite.jl/issues/90.

yes, I usually save a svg version and png version, it’s just the png version quality is not as good as Plots results, maybe it’s they are use different backends.

as regard to the heatmap rect gaps, do you know how to remove them, since it leak the backgraound color in the heatmap.

We lack an option right now to specify the dpi for PNG exports that would allow you to use a higher resolution output for the PNG case. Tracked here, but blocked upstream right now.

Again I didn’t found a good general solution which works for any number of rectangles on the heatmap (in your example the value of d). But you can play with the size parameter:

d=60
x = [j for i in -d:d, j in -d:d]
y = [i for i in -d:d, j in -d:d]
z = x.^2 .+ y.^2
data = DataFrame(x=vec(x'),y=vec(y'),z=vec(z'))

data |> @vlplot(mark={:rect,size=4,strokeWidth=0},width=300,height=300, x="x:o", y="y:o", color=:z)

The problem here is, that the best value for size (here 4) depends on d and of course on width and height. One has to adjust size for every plot.

Yes, this is exactly I am looking for, thanks so much!