vega-lite - 如何在 Vega-Lite (ObservableHQ) 中制作小提琴图

Question

我正在尝试在 ObservableHq 的笔记本中制作小提琴图。但是，我能找到的唯一示例要么太复杂，要么在我的情况下不可用。

笔记本示例

这是我发现的小提琴图的示例之一，但是，当我将“值”更改为“分钟”时，该图被破坏并且没有出现。

vl.layer(
vl.markArea()
  .data(data)
  .transform(
    vl.density('value').bandwidth(0.5).extent([0, 20])
  )
  .encode(
    vl.x().fieldQ('value').axis({ format: 'd', grid: false }).title(null),
    vl.y().fieldQ('density').axis({ orient: 'right' }).stack('center').axis(null)
  ),
vl.markRule({ strokeWidth: 1.5 })
  .data(data)
  .encode(
    vl.x().q1('value'),
    vl.x2().q3('value')
  ),
vl.markRule({ strokeWidth: 1.5 })
  .data(data)
  .encode(
    vl.x().median('value'),
    vl.y().value(43),
    vl.y2().value(57)
  )

) .width(400) .height(100) v.config({ view: { stroke: null }}) .render()`

提前致谢。