# Scrollable plots

**URL:** <https://discourse.julialang.org/t/scrollable-plots/85871>\
**Category:** Visualization\
**Tags:** plotting, pyplot, wglmakie\
**Created:** [August 17, 2022, 11:52am UTC](https://discourse.julialang.org/t/scrollable-plots/85871 "2022-08-17T11:52:47Z")\
**Posts on this page:** 6\
**Page:** 1

<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:** [August 17, 2022, 11:52am UTC](https://discourse.julialang.org/t/scrollable-plots/85871/1 "2022-08-17T11:52:47Z")

</div>

In this [stack overflow post](https://stackoverflow.com/a/31002878/14071775) there is a Python solution to produce scrollable plots, which I could not find in Julia plotting packages.

Tried running the SO code below but got stuck at the `def update(val):` part:

```julia
using PyPlot, PyCall
@pyimport numpy as np
@pyimport matplotlib.widgets as wg

fig, ax = plt.subplots()
plt.subplots_adjust(bottom=0.25)

t = np.arange(0.0, 100.0, 0.1)
s = np.sin(2*np.pi*t)
l, = plt.plot(t,s)
plt.axis([0, 10, -1, 1])

axcolor = "lightgoldenrodyellow"
axpos = plt.axes([0.2, 0.1, 0.65, 0.03], facecolor=axcolor)

spos = wg.Slider(axpos, "Pos", 0.1, 90.0)

# how to translate this part:
def update(val):
    pos = spos.val
    ax.axis([pos,pos+10,-1,1])
    fig.canvas.draw_idle()

spos.on_changed(update)

plt.show()

```

Any help is appreciated.

---

<div class="post-metadata">

**Author:** ![EvoArt](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/evoart/32/25357_2.png) [@EvoArt](https://discourse.julialang.org/u/EvoArt)\
**Post date:** [August 17, 2022, 8:10pm UTC](https://discourse.julialang.org/t/scrollable-plots/85871/2 "2022-08-17T20:10:02Z")

</div>

Do you require something more than this [Axis](https://makie.juliaplots.org/v0.17.13/examples/blocks/axis/index.html#axis_interaction) ?

Do you have a preference for using a slider/widget of some kind?

---

<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:** [August 17, 2022, 8:51pm UTC](https://discourse.julialang.org/t/scrollable-plots/85871/3 "2022-08-17T20:51:28Z")

</div>

Thanks for your response.

Could you please confirm if Makie can do the following:

Let T(x) be the ground temperature at point x along a path between New York and Paris. Can we plot, say, 100 km of T(x) and have a scrollbar/slider to move quickly between the two endpoints 5800 km apart.

Note that this seems to be different from panning, which is slower / more painful.

---

<div class="post-metadata">

**Author:** ![icweaver](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/icweaver/32/45764_2.png) [@icweaver](https://discourse.julialang.org/u/icweaver)\
**Post date:** [August 18, 2022, 4:50am UTC](https://discourse.julialang.org/t/scrollable-plots/85871/4 "2022-08-18T04:50:38Z")

</div>

I could be misunderstanding, but do you mean something like this?

[https://user-images.githubusercontent.com/25312320/185296212-c5c5e7e9-18f0-40d8-be5a-84e0f53061f0.mp4](https://user-images.githubusercontent.com/25312320/185296212-c5c5e7e9-18f0-40d8-be5a-84e0f53061f0.mp4)

```julia
using WGLMakie

fig = Figure()
ax = Axis(fig[1, 1])

# Set up slider
x = 0:0.1:10
sl_x = SliderGrid(fig[2, 1], (label="distance", range=x))

# Plot function
T(x) = sin(x) * exp(-x/4)
lines!(ax, x, T.(x))

# Update limits to pan window
x_obs = sl_x.sliders[1].value
@lift xlims!(ax, $x_obs - 1, $x_obs + 1)

fig

```

---

<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:** [August 18, 2022, 5:01am UTC](https://discourse.julialang.org/t/scrollable-plots/85871/5 "2022-08-18T05:01:47Z")

</div>

@icweaver, that is brilliant. Cheers.

---

<div class="post-metadata">

**Author:** ![Soldalma](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/soldalma/32/29388_2.png) [@Soldalma](https://discourse.julialang.org/u/Soldalma)\
**Post date:** [August 22, 2022, 9:42pm UTC](https://discourse.julialang.org/t/scrollable-plots/85871/6 "2022-08-22T21:42:05Z")

</div>

Plotly lets you zoom to an area of your chart and then drag the area to the left or right. That is called panning. There may be other backends that let you do that.