feat: add density mark, violin shape and kde transform

[hustcc]

fixed #5036

• KDE data.transform
• density mark and shape
• box shape
• demo
• document
• tests

直接使用 violin mark，需外部 KDE

const data = [
  {
    "species": "I. setosa",
    "x": "PetalWidth",
    "y": [0.2, 1, 2, 3, 4],
    "size": [0.1, 0.3, 0.2, 0.2],
  },
  // ...
];

chart
  .violin()
   .data(data)
  .encode('x', 'x')
  .encode('y', 'y')
  .encode('size', 'size')
  .encode('color', 'species')

使用 内置 KDE

chart
  .violin()
  .data({
      type: 'kde',
      value: originalData,
      transform: [{ type: 'kde', as: ['_y', '_size'] }]
   })
  .encode('x', 'x')
  .encode('y', '_y')
  .encode('size', '_size')
  .encode('color', 'species')

[hustcc]

怎么使用 violin

const data = [
  {
    "species": "I. setosa",
    "x": "PetalWidth",
    "y": [0.2, 1, 2, 3, 4],
    "size": [0.1, 0.3, 0.2, 0.2],
  },
  // ...
];

chart
  .violin()
  .encode('x', 'x')
  .encode('y', 'y')
  .encode('size', 'size')
  .encode('color', 'species')

[pearmini]

如果 kde 只是对小提琴图有效果，可以直接封装成一个高阶 Mark，类似 boxplot。

chart
  .violinPlot()
  .data([]) // 聚合前的数据
  .encode('color', 'species')

[hustcc]

理论上 kde 只对小提琴可用，kde 出来的数据就直接是小提琴的视觉位置。

[pearmini]

查阅了两个参考资料：

• https://g2-v4.antv.vision/zh/examples/other/other#violin
• https://zhuanlan.zhihu.com/p/376055263
• https://en.wikipedia.org/wiki/Violin_plot
• https://zhuanlan.zhihu.com/p/106194051

可以简单理解小提琴图 = 箱线图 + 核密度图。

针对可视化聚合前后的数据应该有不同的方式。

聚合后

用 density + box 绘制。

const data = fetchJSON('https://assets.antv.antgroup.com/g2/penguins.json');

const boxData  = quartiles(data); // 聚合数据
const densityData = kde(data); // 聚合数据

chart.options({
  type: 'view',
  children: [
    { type: 'density', data: densityData, encode: { x, y, color: 'sex' } },
    {
      type: 'box',
      data: boxData,
      encode: {
        x,
        y,
        color: 'sex',
        shape: 'violin', // 需要给 box 新增一个 violin 的 shape
      },
    },
  ],
});

在 ggplot 里面也有 density mark。

聚合前

用 violinplot 绘制，这个是一个复合 Mark，由 box 和 density 构成，并且分别对数据进行预处理。

chart.options({
  type: 'violinplot',
  encode: {
    x: 'species',
    y: 'flipper_length_mm',
    color: 'sex',
    series: 'sex',
  },
});

在 matlibplot 里面就有 violinplot plot。

综上

建议增加两个 mark：

• density：需要考虑分组的情况，也就是由 series encode。
• violinplot：里面计算 density 的可以是 data.tranform 也可以是 transform。如果是前者，可以注册使用也可以内联使用；如果是后者参考 boxplot 的 groupX 的 reducer，建议内联使用。

以及给 box 增加一个新的 shape：violin，如下：

[hustcc]

如果参考 kde 的话，其实也可以讲 boxplot 中的数据分布函数也放到 data.transform 中，boxplot 封装中如果内置 data.transform，代码逻辑会简单很多。