# Interactive plot with Vegalite

**URL:** <https://discourse.julialang.org/t/interactive-plot-with-vegalite/22129>\
**Category:** Visualization\
**Created:** [March 21, 2019, 1:01am UTC](https://discourse.julialang.org/t/interactive-plot-with-vegalite/22129 "2019-03-21T01:01:08Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![PetrKryslUCSD](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/petrkryslucsd/32/215825_2.png) [@PetrKryslUCSD](https://discourse.julialang.org/u/PetrKryslUCSD)\
**Post date:** [March 21, 2019, 1:01am UTC](https://discourse.julialang.org/t/interactive-plot-with-vegalite/22129/1 "2019-03-21T01:01:08Z")

</div>

Is anyone familiar with using Vegalite from the REPL to produce interactive plots (to zoom in/out at a minimum)?

I understand this works in Jupyter notebooks, but I want to avoid notebooks and work directly in the terminal command line. By the way, my platform is Windows 10.

I managed to display plots in web browsers or in the Electron, but they are not interactive in any way.

---

<div class="post-metadata">

**Author:** ![davidanthoff](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/davidanthoff/32/223493_2.png) [@davidanthoff](https://discourse.julialang.org/u/davidanthoff)\
**Post date:** [March 21, 2019, 2:08am UTC](https://discourse.julialang.org/t/interactive-plot-with-vegalite/22129/2 "2019-03-21T02:08:30Z")

</div>

Did you actually create an interactive plot along the description in [Selection Parameters | Vega-Lite](https://vega.github.io/vega-lite/docs/selection.html)? They should work in the browser, ElectronDisplay and VS Code plot pane. Not entirely sure about Juno.

---

<div class="post-metadata">

**Author:** ![PetrKryslUCSD](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/petrkryslucsd/32/215825_2.png) [@PetrKryslUCSD](https://discourse.julialang.org/u/PetrKryslUCSD)\
**Post date:** [March 21, 2019, 2:25am UTC](https://discourse.julialang.org/t/interactive-plot-with-vegalite/22129/3 "2019-03-21T02:25:26Z")

</div>

Yes, I tried to do that. I followed the example from the documentation:

```julia
properties = loadjson("full_alu_cyl-nr=15xnL=60-neigvs=1000.json")

f = convert.(Float64, properties["frequencies"])
DataFrame(serial = 1:length(f), frequency = f) |> @vlplot(
    :point,
    selection = {
        brush = {
          typ = "interval"
        }
    }, 
    x=:serial,
    y=:frequency
) |> display 

```

I do get to drag out a rectangle, but no zooming occurs.

---

<div class="post-metadata">

**Author:** ![PetrKryslUCSD](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/petrkryslucsd/32/215825_2.png) [@PetrKryslUCSD](https://discourse.julialang.org/u/PetrKryslUCSD)\
**Post date:** [March 21, 2019, 3:48am UTC](https://discourse.julialang.org/t/interactive-plot-with-vegalite/22129/4 "2019-03-21T03:48:47Z")

</div>

I think now that the incantation should be like this:

```julia
DataFrame(serial = 1:length(f), frequency = f) |> @vlplot(
    mark={:point, color=:red, clip = true},
    selection = {
        grid = {
          typ = "interval", bind = "scales"
        }
      },
    x = {
      field = :serial
    },
    y = {
      field = :frequency
    }
) |> display

```

The zoom actually works (even though it requires the use of a mouse wheel and only allows isotropic zoom).

---

<div class="post-metadata">

**Author:** ![davidanthoff](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/davidanthoff/32/223493_2.png) [@davidanthoff](https://discourse.julialang.org/u/davidanthoff)\
**Post date:** [March 21, 2019, 3:55am UTC](https://discourse.julialang.org/t/interactive-plot-with-vegalite/22129/5 "2019-03-21T03:55:32Z")

</div>

I at some point added an `interactive` function [here](https://github.com/fredo-dedup/VegaLite.jl/blob/1d178f750f273fb75f243c488ce41f07a026b63e/src/dsl_vlplot_macro/dsl_vlplot_macro.jl#L216). It is not exported and I’m not sure it works, _and_ it is not part of the official API, so we might remove it at some point. But, with all of these caveats out of the way, you could try:

```julia
data |> @vlplot(bla bla) |> VegaLite.interactive() |> display

```

And it might do something…

---

<div class="post-metadata">

**Author:** ![PetrKryslUCSD](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/petrkryslucsd/32/215825_2.png) [@PetrKryslUCSD](https://discourse.julialang.org/u/PetrKryslUCSD)\
**Post date:** [March 21, 2019, 2:17pm UTC](https://discourse.julialang.org/t/interactive-plot-with-vegalite/22129/6 "2019-03-21T14:17:30Z")

</div>

Thanks, I will check it out.

---

<div class="post-metadata">

**Author:** ![PetrKryslUCSD](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/petrkryslucsd/32/215825_2.png) [@PetrKryslUCSD](https://discourse.julialang.org/u/PetrKryslUCSD)\
**Post date:** [March 21, 2019, 4:35pm UTC](https://discourse.julialang.org/t/interactive-plot-with-vegalite/22129/7 "2019-03-21T16:35:06Z")

</div>

The interactivity was working with a single `@vlplot`, but adding together plots made the interactivity not work again. This is what I tried:

```julia
    DataFrame(sn = 1:length(fullfrequencies), frequency = fullfrequencies, approxfrequency = approxfrequencies) |> 
	@vlplot(height = 450, width = 450) +
	@vlplot(mark={:point, size=2, color=:red, clip = true},
		    x = :sn, y = :frequency, 
		    tooltip = {field = :frequency, typ = "quantitative"}
		) + 
	@vlplot(mark={:point, size=2, color=:blue, clip = true},
		    x = :sn, y = :approxfrequency, 
		    tooltip = {field = :approxfrequency, typ = "quantitative"}
		) |> VegaLite.interactive() |> 
	display

```

Any ideas would be much appreciated.

---

<div class="post-metadata">

**Author:** ![davidanthoff](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/davidanthoff/32/223493_2.png) [@davidanthoff](https://discourse.julialang.org/u/davidanthoff)\
**Post date:** [March 21, 2019, 4:43pm UTC](https://discourse.julialang.org/t/interactive-plot-with-vegalite/22129/8 "2019-03-21T16:43:58Z")

</div>

Not sure, to be honest… I think your best bet is to open the vega-lite spec in the online vega editor (there should be a button in the browser view for that) and then play around with the spec there until it does what you want it to do. I suspect that the way we add interactivity currently with `VegaLite.interactive()` doesn’t mesh with composite specs. There is a reason why I don’t export that function 😉

---

<div class="post-metadata">

**Author:** ![PetrKryslUCSD](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/petrkryslucsd/32/215825_2.png) [@PetrKryslUCSD](https://discourse.julialang.org/u/PetrKryslUCSD)\
**Post date:** [March 21, 2019, 5:15pm UTC](https://discourse.julialang.org/t/interactive-plot-with-vegalite/22129/9 "2019-03-21T17:15:07Z")

</div>

The spec produced with `VegaLite.interactive()` actually works with other VegaLite examples (I could get it to work in the editor). Somehow the problem must be with the data. I have three columns in the data frame, and that should produce two curves. Like so:

 ![image](https://global.discourse-cdn.com/julialang/original/3X/5/a/5a42b27158f9cae3a197019ada0512479e31283d.png)  
The figure is obviously correctly produced, but somehow the form of the data makes the interactivity not work. Can you think of some alternative presentation of the data?  
Many thanks.