Image Tooltips on Vega Charts

Question

I'm a d3 developer getting to grips with VEGA charts. I want to add a tooltip with an image - any thoughts on how to do this?

For instance, with this example:

https://vega.github.io/vega/examples/bar-chart/

Assuming there is an extra variable in the data with a url:

  {"category": "A", "amount": 28, "image_url": "http://www.mywebsite.com/myimage.png"}

Easy enough to do in d3 but just can't quite work it out in Vega. All help much appreciated.

Answer 1

Just in case anyone else comes across the same, I've found an answer.

The trick is to access the view in the vegaEmbed statement.

vegaEmbed('#vis', spec).then(function(result) {
     // access view as result.view
     var view = result.view;

     view.addEventListener('mouseover', function(event, item) {

           ////catch the data here:  item.datum.my_field_name.
           ////now you can select and populate your tooltip div

     });


}).catch(console.error);

Once you've got this, you can create a div tooltip in the normal way outside of this call and select and populate it using the id or class.

Easy when you know how!