# 2d plot in 3d scene

**URL:** <https://discourse.julialang.org/t/2d-plot-in-3d-scene/80708>\
**Category:** General Usage\
**Tags:** plots, plotlyjs\
**Created:** [May 8, 2022, 12:26pm UTC](https://discourse.julialang.org/t/2d-plot-in-3d-scene/80708 "2022-05-08T12:26:14Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![RainerHeintzmann](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rainerheintzmann/32/19726_2.png) [@RainerHeintzmann](https://discourse.julialang.org/u/RainerHeintzmann)\
**Post date:** [May 8, 2022, 12:26pm UTC](https://discourse.julialang.org/t/2d-plot-in-3d-scene/80708/1 "2022-05-08T12:26:14Z")

</div>

I would like to create a plot that contains two 2d heatmaps (XZ and YZ) but seen from a 3d perspective.

In spirit a similar to this view:  
[http://www.didaktikonline.physik.uni-muenchen.de/programme/dipolstr/DipoleRadiation.html?m=101001](http://www.didaktikonline.physik.uni-muenchen.de/programme/dipolstr/DipoleRadiation.html?m=101001)

But then also adding animated quivers in 3D.  
Is this possible with the Plots.jl package?

I tried modifying the camera position of a 2d plot, but that seems to be ignored.  
Any ideas how to embed 2d plots into a 3d scene?

---

<div class="post-metadata">

**Author:** ![rafael.guerra](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rafael.guerra/32/216610_2.png) [@rafael.guerra](https://discourse.julialang.org/u/rafael.guerra)\
**Post date:** [May 8, 2022, 4:00pm UTC](https://discourse.julialang.org/t/2d-plot-in-3d-scene/80708/2 "2022-05-08T16:00:02Z")

</div>

Please check this example:

```julia
using Plots; gr()

const V = 2000

W(t, ϕ, θ) = V*t*[cosd(ϕ)*sind(θ), sind(ϕ)*sind(θ), cosd(θ)]
 
t, ϕ, θ = range(0, 0.1, 100), 0:3:90.0, 0:3:90.0

Exz = [[W(t, 0, θ) for θ in θ] for t in t]
Eyz = [[W(t,90, θ) for θ in θ] for t in t]
Exy = [[W(t, ϕ,90) for ϕ in ϕ] for t in t]

for (Exz, Eyz, Exy) in zip(Exz, Eyz, Exy)
    display(plot(getindex.(Exz,1), getindex.(Exz,2), getindex.(Exz,3), yflip=true, lims=(0,200)))
    display(plot!(getindex.(Eyz,1), getindex.(Eyz,2), getindex.(Eyz,3)))
    display(plot!(getindex.(Exy,1), getindex.(Exy,2), getindex.(Exy,3)))
    sleep(0.05)
end

```

![spherical_wave](https://global.discourse-cdn.com/julialang/original/3X/1/a/1a6291e65633482b6b12f9ec31ade169b7fe7791.gif)

---

<div class="post-metadata">

**Author:** ![RainerHeintzmann](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rainerheintzmann/32/19726_2.png) [@RainerHeintzmann](https://discourse.julialang.org/u/RainerHeintzmann)\
**Post date:** [May 8, 2022, 4:48pm UTC](https://discourse.julialang.org/t/2d-plot-in-3d-scene/80708/3 "2022-05-08T16:48:38Z")

</div>

Thanks for the great code example! That look already pretty good. But its a curve and not a heatmap on the walls.  
The other thing is that quivers seem to not support 3D arrows in Plots.jl. So maybe I should rather use GLMakie. It seems that they have a convenient volumeslices!() method that may be of help here.

---

<div class="post-metadata">

**Author:** ![rafael.guerra](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rafael.guerra/32/216610_2.png) [@rafael.guerra](https://discourse.julialang.org/u/rafael.guerra)\
**Post date:** [May 8, 2022, 6:31pm UTC](https://discourse.julialang.org/t/2d-plot-in-3d-scene/80708/4 "2022-05-08T18:31:52Z")

</div>

> [@RainerHeintzmann](#):
>
> But its a curve and not a heatmap on the walls.

Please check this:

```julia
using Plots; plotlyjs()

n = 100
x = y = z = range(0,10,n)

xx, yy, zz = x .* zeros(n)', y .* ones(n)', z .* ones(n)'
surface(xx, yy', zz, fill_z = (yy').^2 + zz.^2)

xx, yy, zz = x .* ones(n)', y .* zeros(n)', z .* ones(n)'
surface!(xx',yy, zz, fill_z = (xx').^2 + zz.^2, yflip=true)

xx, yy, zz = x .* ones(n)', y .* ones(n)', z .* zeros(n)'
surface!(xx', yy, zz', fill_z = (xx').^2 + yy.^2, size=(800,800))

```

 ![Plots_plotlyjs_xyz_planes_heatmaps](https://global.discourse-cdn.com/julialang/original/3X/0/c/0c75f1c7441043a443824c98f73dd186f27ce30f.png)

Animating such displays we can produce in Plots.jl:  
 ![Plots_plotlyjs_wave](https://global.discourse-cdn.com/julialang/original/3X/0/e/0eb2aa7a7bbc09dadc804066bb9b36e172ff0f01.gif)

---

<div class="post-metadata">

**Author:** ![lazarusA](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/lazarusa/32/6571_2.png) [@lazarusA](https://discourse.julialang.org/u/lazarusA)\
**Post date:** [May 10, 2022, 9:22pm UTC](https://discourse.julialang.org/t/2d-plot-in-3d-scene/80708/5 "2022-05-10T21:22:59Z")

</div>

This should work also, 3 observables, one per heatmap and just for fun a fourth one for one arrow.

 ![Screenshot 2022-05-10 at 23.22.03](https://global.discourse-cdn.com/julialang/original/3X/7/6/76faec8be50b1c52d93976b952d9fb8bc2fde7fb.jpeg)

```julia
using GLMakie
nt = 100
x = LinRange(0, π, nt)
y = LinRange(0, π, nt)
t = 1
hm1 = Observable(sqrt.(x .^ 2 .+ y' .^ 2) * t / nt)
hm2 = Observable(sqrt.(x .^ 2 .+ y' .^ 2) * t / nt)
hm3 = Observable(sqrt.(x .^ 2 .+ y' .^ 2) * t / nt)
colormap = :Hiroshige
colorrange = (0, 5)
transparency = true
# arrow
steps = 250
stretch = range(π, 0.65, length=steps)
δa = Observable(stretch[1])
ps = [Point3f(0.01, π, π)]
direction = @lift([Point3f(0.01, -π + $δa, -π + $δa)])

fig = Figure(resolution=(1200, 1200), backgroundcolor=(:white, 0.1))
ax = LScene(fig[1, 1]; show_axis=false)
meshscatter!(ax, [Point3f(0, 0, π), Point3f(0, π, π)], markersize=0.0) # forcing some fake limits
arrows!(ax, ps, direction; linewidth=0.02,
    arrowsize=Vec3f(0.16, 0.16, 0.25), transparency)
heatmap!(ax, x, y, hm1; transformation=(:xy, -0.0),
    colorrange, colormap, transparency)
heatmap!(ax, x, y, hm2; transformation=(:yz, -0.0),
    colorrange, colormap, transparency)
heatmap!(ax, x, y, hm3; transformation=(:xz, -0.0),
    colorrange, colormap, transparency)
fig

record(fig, "heatmap_planes.mp4") do io
    for t in 1:steps
        hm1[] = sqrt.(x .^ 2 .+ y' .^ 2) * t / nt
        hm2[] = sqrt.(x .^ 2 .+ y' .^ 2) * t / nt
        hm3[] = sqrt.(x .^ 2 .+ y' .^ 2) * t / nt
        δa[] = stretch[t]
        recordframe!(io)
    end
end

```

---

<div class="post-metadata">

**Author:** ![RainerHeintzmann](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rainerheintzmann/32/19726_2.png) [@RainerHeintzmann](https://discourse.julialang.org/u/RainerHeintzmann)\
**Post date:** [May 11, 2022, 8:44am UTC](https://discourse.julialang.org/t/2d-plot-in-3d-scene/80708/6 "2022-05-11T08:44:29Z")

</div>

Thanks a lot for all the hints. Using Makie, I managed to do it with the `volumeslices!()` method. If you do this, you have to take care of calling `plt[:update_xy]` etc. Otherwise there will be no updates.  
The animation part of the code (with observables defined for the data and the list of arrows) looks like this:

```julia
fig = Figure(resolution = (700, 700), backgroundcolor=(:white, 0.1));
ax = LScene(fig[1,1], clear=true, scenekw=(show_axis=false,), show_axis=false)  
maxcol=0.3
plt = volumeslices!(ax, x, y, z, dat, colormap=(:PiYG_5, 0.7), colorrange=[-maxcol,maxcol], transparency=true)
res = arrows!(qposX,qposY,qposZ,qdatEX,qdatEY,qdatEZ, color=:red, arrowsize=0.5); #
res = arrows!(qposX,qposY,qposZ,qdatMX,qdatMY,qdatMZ, color=:blue, arrowsize=0.5); #
fig
scene=ax.scene
cam3d!(scene)
scale!(scene, 0.07, 0.07, 0.07)
record(fig, "dipole3D_EM.gif", LinRange(0, 1, 50)) do t
    time[] = t
    plt[:update_xy][](1)
    plt[:update_yz][](1)
    plt[:update_xz][](1)
    # rotate!(scene, Vec3f(0, 0, 1), 0.5 * sin(2*pi*t/10))
end

```

![dipole3D_EM](https://global.discourse-cdn.com/julialang/original/3X/0/3/032afc2a37b76e24c82f75eda16d954691c9ebaa.gif)

Here is an example for observable code:

```julia
time = Observable(0.0)
dat = @lift(real.(vol .* exp.(-1im .* 2 .* pi .* $time)))
qdatEX = @lift(real.(qdatEXC .* fac .* exp.(-1im .* 2 .* pi .* $time)))

```

---

<div class="post-metadata">

**Author:** ![rafael.guerra](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rafael.guerra/32/216610_2.png) [@rafael.guerra](https://discourse.julialang.org/u/rafael.guerra)\
**Post date:** [May 11, 2022, 9:10am UTC](https://discourse.julialang.org/t/2d-plot-in-3d-scene/80708/7 "2022-05-11T09:10:06Z")

</div>

If you were looking for a Makie solution, you should not have asked for a Plots.jl solution.

I suggest you open a Makie thread with your new question and your own solution.

---

<div class="post-metadata">

**Author:** ![RainerHeintzmann](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rainerheintzmann/32/19726_2.png) [@RainerHeintzmann](https://discourse.julialang.org/u/RainerHeintzmann)\
**Post date:** [May 11, 2022, 9:23am UTC](https://discourse.julialang.org/t/2d-plot-in-3d-scene/80708/8 "2022-05-11T09:23:45Z")

</div>

Sorry. I tried with Plots.jl for a while but then could not find a way to conveniently display 3d vectors.  
Since I wanted it done, I switched to Makie instead. So yes, I was looking for a Plots.jl solution at first.  
The part you posted using Plots.jl is anyway quite interesting!