Example with Tooltips

[curran]

I'm having some trouble getting tooltips to work. It's unclear where to put the vl.tooltip invocation.

I checked all of the examples in Observable, and none of them have tooltips working.

Perhaps working tooltips could be rolled into #23

[curran]

FWIW I tried the following in the spec generation logic:

export const viz = () => vl
  .markCircle({size: 40})
  .data('https://raw.githubusercontent.com/vega/vega-datasets/master/data/zipcodes.csv')
  .transform(
    vl.calculate('substring(datum.zip_code, 0, 2)').as('digit')
  )
  .project(vl.projection('albersUsa'))
  .encode(
    vl.longitude().fieldQ('longitude'),
    vl.latitude().fieldQ('latitude'),
    vl.color().fieldN('digit').legend(null).scale(colorScale),
    vl.tooltip('digit')
  )
  .width(960)
  .height(500)
  .padding(0)
  .autosize({type: 'fit-x', contains: 'padding'})
  .config({view: {stroke: null}});

and the following in the setup/plumbing:

import vega from 'vega';
import vegaLite from 'vega-lite';
import vl from 'vega-lite-api';
import vegaTooltip from 'vega-tooltip'
import { viz } from './viz';

vl.register(vega, vegaLite);

const view = viz().toView();
view.toCanvas().then(canvas => {
  document.body.appendChild(canvas);
});

vegaTooltip(view);

Runnable example of non-working tooltips to poke around: https://beta.vizhub.com/curran/ac0e835659ef45558b8f6f0ae4572c00?edit=files&file=index.js

[jheer]

Hmm. Tooltips appear to be working on Observable for me, assuming they are properly defined. For example, see some of the maps in https://observablehq.com/@uwdata/cartographic-visualization

Here is an example of a tooltip definition for a single field:

vl.tooltip().fieldQ('rate').format('.0%')

And here is an example of a tooltip definition over multiple fields:

vl.tooltip([vl.fieldN('origin'), vl.fieldQ('routes')])

In terms of setup, you probably looked at this already, but for the record the tooltip configuration used on Observable is defined in https://observablehq.com/@vega/vega-lite-api:

const options = {
    config: {
      // vega-lite default configuration
      config: {
        view: {width: 400, height: 300},
        mark: {tooltip: null}
      }
    },
    init: view => {
      // initialize tooltip handler
      view.tooltip(new tooltip.Handler().call);
      // enable horizontal scrolling for large plots
      if (view.container()) view.container().style['overflow-x'] = 'auto';
    },
    view: {
      // view constructor options
      loader: vega.loader({baseURL: 'https://vega.github.io/vega-datasets/'}),
      renderer: 'canvas'
    }
  };
  
  return api.register(vega, vegalite, options);

Note that the View init callback (invoked for each newly created View instance) sets the tooltip handler directly.

Hope that helps.

[curran]

Aha! Thanks a ton.

I think this is the key piece I was missing:

  .encode(
    vl.tooltip().fieldQ('rate') // Did not know fieldQ was needed
  )

Also, this yeilds tooltips:

const view = viz().render().then(div => {
  document.body.appendChild(div);
});
``

while this does not:

```js
const view = viz().toView();
view.toCanvas().then(canvas => {
  document.body.appendChild(canvas);
});

So, the approach of HiDPI Canvas seems incompatible with working tooltips:

// Use scaleFactor for HiDPI Canvas rendering.
// This makes it look good on retina displays,
// and also works well with VizHub's full screen mode.
const scaleFactor = 3;
const view = viz().toView();
view.toCanvas(scaleFactor).then(canvas => {
  document.body.appendChild(canvas);
  canvas.style.width = canvas.width / scaleFactor + 'px';
  canvas.style.height = canvas.height / scaleFactor + 'px';
});

Closing as there are working tooltips in here https://observablehq.com/@uwdata/cartographic-visualization

[jheer]

The key difference is that toCanvas and toSVG return new renderings that are then separate from the "live" visualization. Hence no tooltips, and no interactive event handling by Vega. This is fine for static output, but not for your use case.

You'll want to parameterize the active Vega output, registered with the default View _renderer and _handler. Feel free to file an issue on vega/vega with specific requests if more configuration options are needed.

Currently, view initialization for the "live" renderer does not support passing a scale factor or other custom Canvas parameters. However, all the downstream methods have some customization support:

• View internal renderer initializer
• CanvasRenderer initialization
• Canvas element sizing and configuration

One concern is that event handling of mouse coordinates, etc, may become inaccurate if the "live" canvas has been transformed. This needs further investigation. In any case, these are concerns for a different GitHub issue... :)

[rneogy]

One concern is that event handling of mouse coordinates, etc, may become inaccurate if the "live" canvas has been transformed. This needs further investigation. In any case, these are concerns for a different GitHub issue... :)

I'm running into the problem of working with Vega-Lite visualizations, rendered in canvas, that are under the affect of external CSS transforms. This does seem to affect the positioning of tooltips, causing pointer interaction to be placed in incorrect locations. Is there an active issue tracking this, and/or was this ever resolved? Thanks in advance, sorry for dredging up an older issue!

[domoritz]

This sounds related to vega/vega-tooltip#218. I think it's more an issue of Vega than this library.