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

Thank you, this is a really nice example! I’ve made some more complex example with multiple scales:visualization

Source code
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.
3 Likes