Custom Element for rendering Vega specification

[adrianmroz]

Hi,

What do you think about implementing custom element which could render visualisation from Vega specification? I imagine, we could then simply keep specification in model and pass in view function to custom element. Almost no configuration in JavaScript.

Of course current mechanism should stay in place for more complicated cases, where you want to use Vega.View in your code and for example manipulate signals or selections.

I understand it would be implemented in another, not elm package. But I would like to discuss such idea here, between elm-vega users.

Best, Adrian

[kachkaev]

Hi Adrian! 👋

What do you mean by custom element here? Is it a Web Component or something else?

[adrianmroz]

Exactly, part of WebComponents spec. I was thinking something along the lines of https://elmprogramming.com/interacting-with-web-components.html

[kachkaev]

I see. This is what Luke Westby was promoting at the recent Elm Europe in his talk – I really like the idea!

There already exists a vega-element component on webcomponents.org and this seems like something we can easily use together with elm-vega. The only problem is that the component does not work with the latest version of Polymer and this holds me and @jwoLondon from testing it and producing an Elm app example.

I exchanged a couple of emails with @eterna2 (the author of vega-element) the other day and he expressed interest in updating the component for Polymer 3.0. This will be a huge help for us – I tried figuring out what's broken, but the depth I had to embrace was beyond my knowledge in web components and bower 😅

Feel free to chip in and explore what changes are necessary in vega-element to restore its usability. The repo is here: https://github.com/PolymerVis/vega-element. According to the docs, this looks like a pretty powerful component with everything we would need for elm-vega!

[eterna2]

@kachkaev @adrianmroz

Sorry for the long wait. Was busy with another project.

I have migrated to v3, but it is based on lit-element rather than polymer-element.

I have not migrated all the features, but the basic stuff is there. Because we have migrated to npm, the webcomponent link is different now - repo is still the same.

https://www.webcomponents.org/element/@polymer-vis/vega-elements

U can see a example here:

https://bl.ocks.org/eterna2/905451d8c68995e7a2a16254d510e735

Or here: https://polymervis.github.io/vega-element/demo/

Basically, I have pre-build a distribution which u can use straight off. But u will need to import the lib for Vega and vega-lite yourselves.