# Interactive plot, acting as a range slider tool for another plot?

**URL:** <https://discourse.julialang.org/t/interactive-plot-acting-as-a-range-slider-tool-for-another-plot/20392>\
**Category:** General Usage\
**Created:** [February 3, 2019, 8:30am UTC](https://discourse.julialang.org/t/interactive-plot-acting-as-a-range-slider-tool-for-another-plot/20392 "2019-02-03T08:30:42Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![sairus7](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sairus7/32/10816_2.png) [@sairus7](https://discourse.julialang.org/u/sairus7)\
**Post date:** [February 4, 2019, 11:21pm UTC](https://discourse.julialang.org/t/interactive-plot-acting-as-a-range-slider-tool-for-another-plot/20392/6 "2019-02-04T23:21:45Z")

</div>

Thank you, this is a really nice example! I’ve made some more complex example with multiple scales: ![visualization](https://global.discourse-cdn.com/julialang/original/3X/e/9/e9a2d4f7eae26464957ad94ec0f0e8bd319c43b6.png)

> **Source code**
>
> ```julia
> using DataFrames, VegaLite
> 
> function PlotWithFocus(A::DataFrame)
> A |> [
> @vlplot(
> mark={typ=:line,interpolate="step-after"},
> x={
> field=:Time,
> typ=:quantitative,
> scale={domain={selection=:brush1}},
> axis={title=""}
> },
> y=:Trend1,
> width=600,
> height=160,
> title="Title",
> background="white"
> );
> @vlplot(
> selection={brush1={typ=:interval,encodings=["x"]}},
> mark={typ=:area},
> x={
> field=:Time,
> typ=:quantitative,
> scale={domain={selection=:brush2}},
> axis={title=""}
> },
> y=:Trend2,
> width=600,
> height=80,
> background="white"
> );
> @vlplot(
> selection={brush2={typ=:interval,encodings=["x"]}},
> mark={typ=:line},
> x={field=:Time,typ=:quantitative},
> y=:Trend3,
> width=600,
> height=80,
> background="white"
> )
> ]
> end
> 
> N = 2000
> 
> function some_data!(X, cX)
> x0 = 0
> s0 = 0
> for i=1:length(X)
> x0 += (X[i] - x0)*0.05
> X[i] = x0
> s0 += x0
> cX[i] = s0
> end
> end
> 
> X = randn(Float32, N)
> cX = similar(X)
> some_data!(X, cX)
> 
> A = DataFrame(
> Time = collect(1:N),
> Trend1 = X,
> Trend2 = X,
> Trend3 = cX,
> )
> 
> PlotWithFocus(A)
> 
> ```

But, the main reason to do multi-scale is to handle large amounts of data at different levels of detail - both for better performance and better visual representation. Some simplified data representation (with less points) can be plotted at full range, and detailed data (with more points) can be plotted with fewer points within a small range.

In this context, I don’t understand:

1. How to plot several datasets with different length? Or more generally, how can I bind plots with diferent data sources (and probably not only DataFrames type)?
2. How to plot large amounts of data efficiently, so they are dynamically loaded on the required range, when the selection is changed? Or more generally, how to bind VegaLite events to some custom Julia functions e.g. for data range selection from a given data sourse. With current solution, interacting with 10k points is already laggy.

---

_[View the full topic](https://discourse.julialang.org/t/interactive-plot-acting-as-a-range-slider-tool-for-another-plot/20392)._