Vega-Lite in SWISH?

General
1

Hello,
When using SWISH, I really liked the graphing capability using c3, but found it a bit limiting.
I have previously used vega-lite and seems to be really similar to c3, where the whole graph is defined in json.
I have tried to render a self-contained html rendering of a vega-lite graph but the swish notebook gives me an error vegaEmbed not defined.

How hard would it be to embed vega-lite in swish like for c3 ?

2

Probably not too hard. You could try with a local copy. There is a JS plugin system, see e.g. config-available/plugin_slider.pl. Possibly that works for vega-lite as well. If it works and you add the necessary usage pages as there exist for the other rendering frameworks, I’m happy to merge a PR.

3

Thank you for the pointer.
I have tried adding a config-available/plugin_vegalite.pl file with the content:

:- module(swish_config_plugin_vegalite, []).

:- multifile
    swish_config:web_plugin/1.

swish_config:web_plugin(
    json{name: vega,
         js: ['https://cdn.jsdelivr.net/npm/vega@6',
              'https://cdn.jsdelivr.net/npm/vega-lite@6',
              'https://cdn.jsdelivr.net/npm/vega-embed@7']
        }).

But I am getting a blank swish page, and after enabling debug mode, I get the following messages:

% [Thread httpd@localhost:3050_1] 12:04:46.042 [77] get /js/vega.js ...
% [Thread httpd@localhost:3050_2] 12:04:46.042 [78] get /js/vega-lite.js ...
% [Thread httpd@localhost:3050_2] 12:04:46.044 [78] 404 not_found(/js/vega-lite.js); 97 bytes
% [Thread httpd@localhost:3050_1] 12:04:46.044 [77] 404 not_found(/js/vega.js); 87 bytes
% [Thread httpd@localhost:3050_2] 12:04:46.044 GET /js/vega-lite.js: [404] not_found(/js/vega-lite.js)
% [Thread httpd@localhost:3050_1] 12:04:46.044 GET /js/vega.js: [404] not_found(/js/vega.js)

From what I can understand, the vega-lite library depends on vega.js and vega-embed depends on both vega.js and vega-lite.js which it doesn’t find.
Is this because the plugin system doesn’t support dependencies ?

4

I think the problem is with require.js. See end of swish.js where the plugins are collected and loaded by means of require(). I think the route is to install vega as an npm module and use local paths.

But … my JavaScript is a little rusty at the moment …

5

I have managed to make something work !

image
image900×906 73.3 KB

And I have made a PR on github if you want to review it ?

2 Likes
6

Great. Can’t we get rid of the schema line, adding it in the rendering code?

7

It actually works without the schema line (the vega-lite format doesn’t requires it, it is just good practice).
The vega-lite online editor help says this about the schema line:

URL to JSON schema for a Vega-Lite specification. Unless you have a reason to change this, use [https://vega.github.io/schema/vega-lite/v6.json](Vega Editor). Setting the $schema property allows automatic validation and autocomplete in editors that support JSON schema.

Should I remove it from the example ?

8

We can now render vega-lite graph in SWISH !

Thank you @jan for working on this with me :slight_smile:

3 Likes
9

Thanks to you! Note that if you try this, you may have to do a shift-reload to make sure to get the latest JavaScript. If the examples do not show up, your browser cache is the most likely culprit.