Simple example of Interactive + Dynamically Updating (VegaLite) graph with Julia backend

robertfeldt · March 15, 2020, 12:02pm

I’m sure there are many ways this can be done in Julia but if anyone has seen very simple examples of how to produce interactive graphs that can be dynamically updated from (backend) Julia code that would be great?

My starting point is to use something like Interact.jl and VegaLite.jl and then export as a stand-alone html page which the backend can then dynamically stream data to.

Main use case is for interactive control of optimization runs in Optim.jl and BlackBoxOptim.jl. If someone has concrete examples or pointers that would be super-useful. Thanks!

Skoffer · March 15, 2020, 12:19pm

There is
https://covid19.opensourc.es which has functionality similar to what you want.
May be @Wikunia can give some advices.

Also, there was an announcement [ANN] Matte.jl - interactive dashboards written in Julia it’s somewhat different, cause it doesn’t use interact.jl, but it can possibly solve your original problem.

Wikunia · March 16, 2020, 3:25pm

I’m not using VegaLite.jl for that but maybe I can give you some help with Vega in general. The documentation is sometimes not the best but I found out some stuff after hours of searching.

robertfeldt · March 16, 2020, 3:56pm

Thanks, Vega is also fine. Is the source for the covid19 site available or do you have other example code to share?

Wikunia · March 16, 2020, 6:37pm

This is my current version: Covid 19 vega · GitHub
If you are in the slack community you can ask me there if you have questions.

robertfeldt · March 18, 2020, 3:50pm

I couldn’t really find an example for what I was looking for but thanks to this VegaLite with WebSockets example:

gist.github.com

https://gist.github.com/domoritz/8e1e4da185e1a32c7e54934732a8d3d5

.block

license: bsd-3-clause

README.md

A demo of [Vega-Lite](https://vega.github.io/vega-lite/) with websockets. Uses [Vega-Embed](https://github.com/vega/vega-embed) to access the [Vega View API](https://vega.github.io/vega/docs/api/view/).

In this demo, we don't use an external data source and instead send and receive data from an echo server. Of course you would never do this in practice but this way we can have both the sender and the receiver in the same piece of code to illustrate the appraoch.

The demo sends a row every second until all data has been transmitted. To restart the demo, refresh the page.

bar.vl.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "A simple bar chart with embedded data.",
  "width": 360,
  "data": {
    "name": "table" 
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},

This file has been truncated. show original

There are more than three files. show original

I managed to put together a single Julia file that uses HTTP to serve a frontend html page with a VegaLite graph and then pushes data updates from Julia over a WebSocket to the frontend which then updates the VegaLite graph. Sharing in a single file gist here since it might be useful for others to build on:

gist.github.com

https://gist.github.com/robertfeldt/96aa0fe4ac2f0eea2c221983a74203dc

dynamically_updating_VegaLite_from_Julia.jl

using HTTP, JSON

const VegaLiteWebsocketFrontEndTemplate = """
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
	<script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
	<script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
</head>

This file has been truncated. show original