# How to create surface plot in CairoMakie where the sides are 'filled'?

**URL:** <https://discourse.julialang.org/t/how-to-create-surface-plot-in-cairomakie-where-the-sides-are-filled/94454>\
**Category:** Visualization\
**Tags:** plotting, makie, cairo\
**Created:** [February 11, 2023, 4:40am UTC](https://discourse.julialang.org/t/how-to-create-surface-plot-in-cairomakie-where-the-sides-are-filled/94454 "2023-02-11T04:40:55Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![yhchang96](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yhchang96/32/36499_2.png) [@yhchang96](https://discourse.julialang.org/u/yhchang96)\
**Post date:** [February 11, 2023, 4:40am UTC](https://discourse.julialang.org/t/how-to-create-surface-plot-in-cairomakie-where-the-sides-are-filled/94454/1 "2023-02-11T04:40:55Z")

</div>

I can make a surface plot with the following codes:

```julia
x = range(-1, 1, length=129)
y = range(-1, 1, length=129)
R = x'.^2 .+ y.^2
h2d = cos.(R)

update_theme!(
    lightposition = Vec3f(50, 10, 0),
    Axis3 = (
        elevation = pi/6, azimuth = -pi/4, aspect = (1, 1, 0.5) 
        ),
    Surface = (
        shininess = 32f0, specular = Vec3f(0.2), rasterize = 5,
        ),
)

fig = Figure()

ga = fig[1,1] = GridLayout()
ax1 = Axis3(ga[1,1])
surf1 = surface!(ax1, x, y, h2d, colormap=Reverse(:Spectral_4))
hidedecorations!(ax1)

display(fig)

```

![image](https://global.discourse-cdn.com/julialang/original/3X/7/f/7fed23158c073ab6be29ef795590e0242536a041.png)

I would like to ‘fill’ the four sides of the above surface plot, like the following figure (ignore the lines on the surface, I just want the ‘sides’). Is that possible in CairoMakie?

![image](https://global.discourse-cdn.com/julialang/original/3X/9/b/9b5666257167455e89c1d51c017a347bcb9bc0c4.png)

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://discourse.julialang.org/u/jules)\
**Post date:** [February 11, 2023, 10:10am UTC](https://discourse.julialang.org/t/how-to-create-surface-plot-in-cairomakie-where-the-sides-are-filled/94454/2 "2023-02-11T10:10:55Z")

</div>

One idea is to use `band`, here I’ve done it with the two visible sides. One could also draw a single band around all four sides. Also the shape didn’t match from your code, so I changed it a bit to make it wavy.

```julia
x = range(-1, 1, length=129)
y = range(-1, 1, length=129)
R = x'.^2 .+ y.^2
h2d = cos.(3.5R)

th = Theme(
    lightposition = Vec3f(50, 10, 0),
    Axis3 = (
        elevation = pi/6, azimuth = -pi/4, aspect = (1, 1, 0.5) 
        ),
    Surface = (
        shininess = 32f0, specular = Vec3f(0.2), rasterize = 5,
        ),
)

with_theme(th) do
    fig = Figure()

    ga = fig[1,1] = GridLayout()
    ax1 = Axis3(ga[1,1])
    surf1 = surface!(ax1, x, y, h2d, colormap=Reverse(:Spectral_4))

    lower = Point3f.(x, first(y), minimum(h2d))
    upper = Point3f.(x, first(y), h2d[:, 1])
    band!(ax1, lower, upper, color = last(Makie.to_colormap(:Spectral_4)), shading = true)

    lower = Point3f.(last(x), y, minimum(h2d))
    upper = Point3f.(last(x), y, h2d[end, :])
    band!(ax1, lower, upper, color = last(Makie.to_colormap(:Spectral_4)), shading = true)

    hidedecorations!(ax1)

    fig
end

```

 ![grafik](https://global.discourse-cdn.com/julialang/original/3X/c/d/cd2de4f02d0e73d60009b915ed5a2545d08b48d3.jpeg)

---

<div class="post-metadata">

**Author:** ![yhchang96](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yhchang96/32/36499_2.png) [@yhchang96](https://discourse.julialang.org/u/yhchang96)\
**Post date:** [February 11, 2023, 4:03pm UTC](https://discourse.julialang.org/t/how-to-create-surface-plot-in-cairomakie-where-the-sides-are-filled/94454/3 "2023-02-11T16:03:44Z")

</div>

Are there any ways to also color the sides such that the color reflects the height of that point? e.g. Using the colormap `Reverse(:Spectral_4)` the bottom of the base should appear blue while near the top at the four corners it should appear black. It looks like with `band` if I pass the height of the surface based on `h2d` to the `color` argument, then each vertical stripe gets different color, which is not what I want.

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://discourse.julialang.org/u/jules)\
**Post date:** [February 11, 2023, 7:09pm UTC](https://discourse.julialang.org/t/how-to-create-surface-plot-in-cairomakie-where-the-sides-are-filled/94454/4 "2023-02-11T19:09:24Z")

</div>

I think so, using `mesh`. I’d try making quadrilateral faces out of the same points I used for the bands. But without making smaller faces by subdividing it won’t look that good in cairomakie, due to the way meshes work there. In glmakie it would look better.

---

<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:** [February 11, 2023, 9:04pm UTC](https://discourse.julialang.org/t/how-to-create-surface-plot-in-cairomakie-where-the-sides-are-filled/94454/7 "2023-02-11T21:04:03Z")

</div>

this works:

```julia
band(; color = [color_values_at_bottom..., color_values_at_top...]

```

this case will be available as an example [here](https://beautiful.makie.org/dev/examples/generated/2d/surfaces/surface_filled_sides/#plotting-sides) in the next hour, CI building now.

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://discourse.julialang.org/u/jules)\
**Post date:** [February 12, 2023, 9:45am UTC](https://discourse.julialang.org/t/how-to-create-surface-plot-in-cairomakie-where-the-sides-are-filled/94454/8 "2023-02-12T09:45:14Z")

</div>

Ah nice, I forgot about that option, that’s essentially the mesh I proposed without the manual work.

---

<div class="post-metadata">

**Author:** ![yhchang96](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yhchang96/32/36499_2.png) [@yhchang96](https://discourse.julialang.org/u/yhchang96)\
**Post date:** [February 13, 2023, 10:12pm UTC](https://discourse.julialang.org/t/how-to-create-surface-plot-in-cairomakie-where-the-sides-are-filled/94454/9 "2023-02-13T22:12:36Z")

</div>

I tried using `CairoMakie` (basically just changing the backend while keeping the code the same), and it looks like the color of the side bands is wrong (it varies laterally instead of vertically). Is that just a limitation of the `CairoMakie` backend or are there tricks to make it work?