# Clickable plot example using Js\_of\_ocaml, Brr, and Vg **URL:** \ **Category:** Community\ **Tags:** announce\ **Created:** [September 22, 2023, 10:53pm UTC](https://discuss.ocaml.org/t/clickable-plot-example-using-js-of-ocaml-brr-and-vg/13074 "2023-09-22T22:53:55Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![mooreryan](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/mooreryan/32/2843_2.png) [@mooreryan](https://discuss.ocaml.org/u/mooreryan)\ **Post date:** [September 22, 2023, 10:53pm UTC](https://discuss.ocaml.org/t/clickable-plot-example-using-js-of-ocaml-brr-and-vg/13074/1 "2023-09-22T22:53:55Z")
I made a small, clickable canvas chart example for the browser using Js\_of\_ocaml, [Brr](https://erratique.ch/software/brr), and [Vg](https://erratique.ch/software/vg). The [code](https://github.com/mooreryan/ocaml_vg_example_plot) is on GitHub, and you can check out a live [demo](https://mooreryan.github.io/ocaml_vg_example_plot/) as well. Perhaps the code may prove useful as another example for anyone wanting to try out the Brr or Vg packages. It was actually fairly quick to make as Vg provides some pretty powerful drawing primitives, and Brr really simplifies interacting with the DOM and JavaScript values. Here a screenshot of the [demo](https://mooreryan.github.io/ocaml_vg_example_plot/): ![hello_plot](https://us1.discourse-cdn.com/flex020/uploads/ocaml/original/2X/b/bd80746f96dd69dd1c3830648e73e7fb747cdb63.jpeg) ---
**Author:** ![dbuenzli](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/dbuenzli/32/18_2.png) [@dbuenzli](https://discuss.ocaml.org/u/dbuenzli)\ **Post date:** [September 22, 2023, 11:49pm UTC](https://discuss.ocaml.org/t/clickable-plot-example-using-js-of-ocaml-brr-and-vg/13074/2 "2023-09-22T23:49:56Z")
The pin in your lock file is a local `file:///` url. But then I should rather make a new release of `Vg` so that you don’t have to pin. Will try to push a release in the upcoming days. Also speaking of clickable/tapable stuff with Vg that reminds me of [this example](https://erratique.ch/log/2017-01-25/) ([src](https://gist.github.com/dbuenzli/aebe78b61299310fc86dc110dcd3f533)) which I should port to more recent infrastructure. ---
**Author:** ![mooreryan](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/mooreryan/32/2843_2.png) [@mooreryan](https://discuss.ocaml.org/u/mooreryan)\ **Post date:** [September 23, 2023, 12:45am UTC](https://discuss.ocaml.org/t/clickable-plot-example-using-js-of-ocaml-brr-and-vg/13074/3 "2023-09-23T00:45:28Z")
Good catch with the pin, thanks. I had forgotten to update it to the git repository rather than my local pin. It’s pointing there now. I remember reading through that example and the write-up, very cool and informative. I will just drop this link here to your other [examples](https://erratique.ch/software/vg/demos/rhtmlc.html#path-cubics) for everyone’s reference. By the way, just wanted to say your vg documentation is great. It made it nice and simple to get started with it. Thanks! ---
**Author:** ![isaiah-p](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/isaiah-p/32/4772_2.png) [@isaiah-p](https://discuss.ocaml.org/u/isaiah-p)\ **Post date:** [October 9, 2023, 1:33pm UTC](https://discuss.ocaml.org/t/clickable-plot-example-using-js-of-ocaml-brr-and-vg/13074/4 "2023-10-09T13:33:26Z")
This great for beginners like me getting started with Vg on browser. just curious are there any examples of using Vg for 2D animations on html5 canvas ---
**Author:** ![dbuenzli](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/dbuenzli/32/18_2.png) [@dbuenzli](https://discuss.ocaml.org/u/dbuenzli)\ **Post date:** [October 9, 2023, 1:56pm UTC](https://discuss.ocaml.org/t/clickable-plot-example-using-js-of-ocaml-brr-and-vg/13074/5 "2023-10-09T13:56:50Z")
I think the only public instances of that that I have are those we made for the [`2048` tutorial](https://github.com/ocamllabs/2048-tutorial). See [here](https://github.com/ocamllabs/2048-tutorial/blob/master/2048/src/render.mli), these [shaping functions](https://github.com/ocamllabs/2048-tutorial/blob/master/2048/src/anim.mli) and [there](https://github.com/ocamllabs/2048-tutorial/blob/f64bc8bbbb8ac6b8fae39a2b2fc247f010c55bf8/2048/src/main.ml#L65-L74). ---
**Author:** ![isaiah-p](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/isaiah-p/32/4772_2.png) [@isaiah-p](https://discuss.ocaml.org/u/isaiah-p)\ **Post date:** [October 9, 2023, 8:34pm UTC](https://discuss.ocaml.org/t/clickable-plot-example-using-js-of-ocaml-brr-and-vg/13074/6 "2023-10-09T20:34:29Z")
hey just wondering if there is a new release of Vg i want to avoid pinning the deps on github version ---
**Author:** ![dbuenzli](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/dbuenzli/32/18_2.png) [@dbuenzli](https://discuss.ocaml.org/u/dbuenzli)\ **Post date:** [January 23, 2024, 10:39pm UTC](https://discuss.ocaml.org/t/clickable-plot-example-using-js-of-ocaml-brr-and-vg/13074/7 "2024-01-23T22:39:41Z")
> [@dbuenzli](#): > > Will try to push a release in the upcoming days. Famous last words. Now there really is [[ANN] Vg 9.5.0 – Declarative 2D vector graphics](https://discuss.ocaml.org/t/ann-vg-9-5-0-declarative-2d-vector-graphics/13922) there was a bit more to cleanup than I expected.