vega / vega-lite-api

A JavaScript API for Vega-Lite.
https://observablehq.com/@vega/vega-lite-api
BSD 3-Clause "New" or "Revised" License
211 stars 18 forks source link

yOffset encoding is missing #419

Closed leibatt closed 1 year ago

leibatt commented 1 year ago

I'm trying to recreate an existing Vega-Lite example using the Vega-Lite API in Observable, but I can't seem to find the yOffset encoding in the VL API. Here's the spec for the original example:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Shows the relationship between horsepower and the number of cylinders using point marks with random offset (jittering).",
  "data": {"url": "data/cars.json"},
  "transform": [{"calculate": "random()", "as": "random"}],
  "height": {"step": 50},
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Cylinders", "type": "ordinal"},
    "yOffset": {"field": "random", "type": "quantitative"}
  }
}

The following code using the VL API works without yOffset specified:

vl.markPoint().data(cars)
.transform([
    vl.calculate("random()").as("random")
  ])
  .height({step: 50})
  .encode(
    vl.x().fieldQ('Horsepower'),
    vl.y().fieldO('Cylinders')
  ).render()

When I try to add a yOffset encoding, I run into an error:

vl.markPoint().data(cars)
.transform([
    vl.calculate("random()").as("random")
  ])
  .height({step: 50})
  .encode(
    vl.x().fieldQ('Horsepower'),
    vl.y().fieldO('Cylinders'),
    vl.yOffset().fieldQ('random')
  ).render()

I see this error in Observable: TypeError: vl.yOffset is not a function

domoritz commented 1 year ago

Looks like we added offset in Vega-Lite 5.2 but Vega-Lite API is at 5.1 right now (see yarn.lock).

Screenshot 2023-02-08 at 16 05 39

Duplicate of https://github.com/vega/vega-lite-api/issues/377

jheer commented 1 year ago

I just released a new version, based on the VL 5.6 schema. The xOffset and yOffset encodings are included.