v5.0.0

Updates the Vega-Lite API for Vega-Lite version 5. VL v5 revises the previous selection abstraction into a more general parameters abstraction, supporting both dynamic variables and interactive selections.

Version 5 of the API is mostly, but not entirely, backwards compatible with version 4 of the API. In particular, the selection empty method now takes a boolean rather than a string, and should be applied to a predicate reference to a selection, not a selection definition.

Changelog

Changes from v4.0.0:

• Breaking: empty selection method takes a boolean and applies only to selection predicate references, not selection definitions.
• Deprecated: vl.selectSingle and vl.selectMulti methods, now use vl.selectPoint instead.
• Deprecated: mark.select method, now use mark.params instead.
• Deprecated: selection.init method, now use value instead.
• Add vl.param method to define or reference variable parameters.
• Add vl.expr method to refer to Vega expression language statements.
• Add vl.configPoint and vl.configInterval methods to define selection configurations. Typically one should use vl.selectPoint and vl.selectInterval directly. The config options can be used to provide reusable configurations via mark.config({ selection: { point: vl.configPoint() } }).
• Add vl.lookupSelection method to specify lookup transform parameters against an interactive selection.
• Add vl.spec to take a (potentially partial) top-level specification as input.
• Add vl.render to directly render a specification using the spec option argument.
• Update test cases.

Examples

Here is a scatter plot with dynamic query widgets written using v4 selections...

const cylYear = vl.selectSingle('CylYr')
  .fields('Cylinders', 'Year')
  .init({ Cylinders: 4, Year: 1977 })
  .bind({ Cylinders: vl.slider(3, 8, 1), Year: vl.slider(1970, 1980, 1) });

return vl.markCircle()
  .data('data/cars.json')
  .transform(vl.calculate('year(datum.Year)').as('Year'))
  .select(cylYear)
  .encode(
    vl.x().fieldQ('Horsepower'),
    vl.y().fieldQ('Miles_per_Gallon'),
    vl.color().if(cylYear, vl.color().fieldN('Origin')).value('grey')
  );

...and here is the updated version using v5 parameters.

const cylYear = vl.selectPoint('CylYr')
  .fields('Cylinders', 'Year')
  .value({ Cylinders: 4, Year: 1977 })
  .bind({ Cylinders: vl.slider(3, 8, 1), Year: vl.slider(1970, 1980, 1) });

return vl.markCircle()
  .data('data/cars.json')
  .transform(vl.calculate('year(datum.Year)').as('Year'))
  .params(cylYear)
  .encode(
    vl.x().fieldQ('Horsepower'),
    vl.y().fieldQ('Miles_per_Gallon'),
    vl.color().if(cylYear, vl.color().fieldN('Origin')).value('grey')
  );