# Makie - How to make interactive plots with custom Axis3?

**URL:** https://discourse.julialang.org/t/makie-how-to-make-interactive-plots-with-custom-axis3/118285
**Category:** Visualization
**Tags:** makie
**Created:** [August 16, 2024, 6:23pm UTC](https://discourse.julialang.org/t/makie-how-to-make-interactive-plots-with-custom-axis3/118285 "2024-08-16T18:23:23Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![tobia](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tobia/32/211355_2.png) [@tobia](https://discourse.julialang.org/u/tobia)
#### Post date: [August 16, 2024, 6:23pm UTC](https://discourse.julialang.org/t/makie-how-to-make-interactive-plots-with-custom-axis3/118285/1 "2024-08-16T18:23:23Z")

</div>

I’m using WGLMakie in a Pluto notebook. Whenever I create a 3D plot with an implicit axis, for instance by using `meshscatter(x, y)`, Makie creates an interactive plot, meaning I can rotate, pan, and zoom it using the mouse.

But if I want to customize the axis properties, I think I need to create my own Axis3 object and use the mutating variant of the plot function on it: `meshscatter!(axis, x, y)`. But this creates a static plot, that is no longer interactive.

How can I create an interactive plot with a custom Axis3?

---

<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: [August 17, 2024, 8:22am UTC](https://discourse.julialang.org/t/makie-how-to-make-interactive-plots-with-custom-axis3/118285/2 "2024-08-17T08:22:33Z")

</div>

What’s minimal reproducible code that gives you a static plot where you’d expect an interactive one?

---

<div class="post-metadata">

### Author: ![tobia](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tobia/32/211355_2.png) [@tobia](https://discourse.julialang.org/u/tobia)
#### Post date: [August 17, 2024, 11:03am UTC](https://discourse.julialang.org/t/makie-how-to-make-interactive-plots-with-custom-axis3/118285/3 "2024-08-17T11:03:00Z")

</div>

It took me a while, but I figured out a way to reproduce the bug. It’s a strange bug, probably related to some internal state in the notebook.

In any case, a minimal example is the following:

```julia
# ╔═╡ 2157da26-5c73-11ef-21d8-0b97730c2f8c
begin
	using JSServe, WGLMakie
	Page()
end

# ╔═╡ 344f87ac-e6d3-419c-a3d6-39aca7867146
let
	# figure with automatic axis
	fig = Figure()
	meshscatter(fig[1,1], Point3f(0,0,0), marker=Rect3f([0,0,0], [1,1,1]))
	fig
end

# ╔═╡ 3032020e-210d-44fc-871e-70816ada859e
let
	# figure with manual axis
	fig = Figure()
	axis = Axis3(fig[1,1])
	meshscatter!(axis, Point3f(0,0,0), marker=Rect3f([0,0,0], [1,1,1]))
	fig
end

```

Instructions:

1. copy and paste the text above into a new Pluto notebook, it should create 3 cells;
2. save the notebook with a name, you will need to reload it later;
3. execute the cells: both figures are interactive, meaning that the mouse can rotate the cube;
4. refresh the browser window, or go back to the Pluto index and reopen the notebook (that is still running in the background): the first figure is still interactive, but _ **the second one is either not shown, or is not interactive;** _
5. go back to the Pluto index, stop the notebook by clicking on the (x) beside its name, and run it again: both cells work again.

---

<div class="post-metadata">

### Author: ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)
#### Post date: [August 18, 2024, 2:51pm UTC](https://discourse.julialang.org/t/makie-how-to-make-interactive-plots-with-custom-axis3/118285/4 "2024-08-18T14:51:31Z")

</div>

Sadly, WGLMakie doesn’t support Pluto saving/reloading right now ☹

Btw, JSServe got renamed to Bonito, so you should remove JSServe from your project 😉

---

<div class="post-metadata">

### Author: ![tobia](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tobia/32/211355_2.png) [@tobia](https://discourse.julialang.org/u/tobia)
#### Post date: [August 18, 2024, 3:53pm UTC](https://discourse.julialang.org/t/makie-how-to-make-interactive-plots-with-custom-axis3/118285/5 "2024-08-18T15:53:01Z")

</div>

Oh, I see. That’s ok. But I hope they add a warning when you try to reload a Pluto notebook, even just a plain JS alert box with “Please stop and restart this notebook,” because it’s not obvious, I lost a lot of time trying to figure out what I was doing wrong 🙁

As for the JSServe, I have no idea what it is, because I’m new to all of this, I just followed the [official instructions here](http://juliaplots.org/WGLMakie.jl/stable/#Pluto/IJulia). What do you think I should write instead? Can I just import WGLMakie, or do I still need to create some kind of Page object in the first Pluto cell, as they say on there?

---

<div class="post-metadata">

### Author: ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)
#### Post date: [August 18, 2024, 5:25pm UTC](https://discourse.julialang.org/t/makie-how-to-make-interactive-plots-with-custom-axis3/118285/6 "2024-08-18T17:25:05Z")

</div>

Oh damn, these are not the official instructions but some very old ones…  
We’ve been trying to hunt them down, but I guess there are still some old ones.  
[https://docs.makie.org/](https://docs.makie.org/) is the official documentation!

---

<div class="post-metadata">

### Author: ![tobia](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tobia/32/211355_2.png) [@tobia](https://discourse.julialang.org/u/tobia)
#### Post date: [August 18, 2024, 6:22pm UTC](https://discourse.julialang.org/t/makie-how-to-make-interactive-plots-with-custom-axis3/118285/7 "2024-08-18T18:22:30Z")

</div>

Yes, I’ve been using those docs, but for some reason when I searched how to use it in Pluto, I ended up in that other site. Anyways, I see I can just import the package and use it, no need to explicitly configure the server. Nice, thanks!
