feat: add density mark, violin shape and kde transform (#5043)

* feat: add violin mark and kde transform

* feat: add density mark and kde

* feat: add violin shape and test cases

* chore: set default kde.size = 10

* chore: remove unused code

* docs: add chart api and demos

* docs: add documents for kde and density

* chore: update documents

* docs: fix typo

__tests__/plots/static/index.ts

@@ -52,6 +52,9 @@ export { aaplLineBasicSample } from './aapl-line-basic-sample';
 export { aaplLineBasicSampleLabelFilter } from './aapl-line-basic-sample-label-filter';
 export { aaplLineAreaBasicSample } from './aapl-line-area-basic-sample';
 export { aaplLinePointBasicSample } from './aapl-line-point-basic-sample';
+export { speciesDensityBasic } from './species-density-basic';
+export { speciesViolinBasic } from './species-violin-basic';
+export { speciesViolinBasicPolar } from './species-violin-basic-polar';
 export { unemploymentLineMultiSeries } from './unemployment-line-multi-series';
 export { receiptsLineSlope } from './receipts-line-slope';
 export { stocksLineAggregateLabel } from './stocks-line-aggregate-label';

__tests__/plots/static/species-density-basic.ts

@@ -0,0 +1,29 @@
+import { G2Spec } from '../../../src';
+
+export function speciesDensityBasic(): G2Spec {
+  return {
+    type: 'density',
+    data: {
+      type: 'fetch',
+      value: 'data/species.json',
+      transform: [
+        {
+          type: 'kde',
+          field: 'y',
+          groupBy: ['x', 'species'],
+          size: 10,
+        },
+      ],
+    },
+    encode: {
+      x: 'x',
+      y: 'y',
+      series: 'species',
+      color: 'species',
+      size: 'size',
+    },
+    tooltip: false,
+  };
+}
+
+speciesDensityBasic.maxError = 100;

__tests__/plots/static/species-violin-basic-polar.ts

@@ -0,0 +1,53 @@
+import { G2Spec } from '../../../src';
+
+export function speciesViolinBasicPolar(): G2Spec {
+  return {
+    type: 'view',
+    data: {
+      type: 'fetch',
+      value: 'data/species.json',
+    },
+    coordinate: {
+      type: 'polar',
+    },
+    children: [
+      {
+        type: 'density',
+        data: {
+          transform: [
+            {
+              type: 'kde',
+              field: 'y',
+              groupBy: ['x', 'species'],
+            },
+          ],
+        },
+        encode: {
+          x: 'x',
+          y: 'y',
+          series: 'species',
+          color: 'species',
+          size: 'size',
+        },
+        tooltip: false,
+      },
+      {
+        type: 'boxplot',
+        encode: {
+          x: 'x',
+          y: 'y',
+          series: 'species',
+          color: 'species',
+          size: 8,
+          shape: 'violin',
+        },
+        style: {
+          opacity: 0.5,
+          point: false,
+        },
+      },
+    ],
+  };
+}
+
+speciesViolinBasicPolar.maxError = 100;

__tests__/plots/static/species-violin-basic.ts

@@ -0,0 +1,51 @@
+import { G2Spec } from '../../../src';
+
+export function speciesViolinBasic(): G2Spec {
+  return {
+    type: 'view',
+    data: {
+      type: 'fetch',
+      value: 'data/species.json',
+    },
+    children: [
+      {
+        type: 'density',
+        data: {
+          transform: [
+            {
+              type: 'kde',
+              field: 'y',
+              groupBy: ['x', 'species'],
+            },
+          ],
+        },
+        encode: {
+          x: 'x',
+          y: 'y',
+          series: 'species',
+          color: 'species',
+          size: 'size',
+        },
+        transform: [{ type: 'dodgeX' }],
+        tooltip: false,
+      },
+      {
+        type: 'boxplot',
+        encode: {
+          x: 'x',
+          y: 'y',
+          series: 'species',
+          color: 'species',
+          size: 8,
+          shape: 'violin',
+        },
+        style: {
+          opacity: 0.5,
+          point: false,
+        },
+      },
+    ],
+  };
+}
+
+speciesViolinBasic.maxError = 100;

__tests__/unit/stdlib/index.spec.ts

@@ -40,6 +40,7 @@ import {
   Tree as TreeGeometry,
   WordCloud as WordCloudGeometry,
   Gauge,
+  Density as DensityGeometry,
 } from '../../../src/mark';
 import { Category10, Category20 } from '../../../src/palette';
 import {
@@ -100,6 +101,7 @@ import {
   Polygon,
   Ribbon,
   Box,
+  Violin,
   LineXY,
   Funnel,
   Pyramid,
@@ -108,6 +110,7 @@ import {
   Label,
   Path as PathShape,
   HollowPath,
+  Density as DensityShape,
   Shape as CustomShape,
 } from '../../../src/shape';
 import { Classic, ClassicDark, Academy } from '../../../src/theme';
@@ -252,6 +255,7 @@ import {
   Arc as ArcTransform,
   WordCloud,
   Join,
+  KDE,
 } from '../../../src/data';
 import {
   OverflowHide,
@@ -281,6 +285,7 @@ describe('stdlib', () => {
       'data.arc': ArcTransform,
       'data.wordCloud': WordCloud,
       'data.join': Join,
+      'data.kde': KDE,
       'transform.maybeZeroY1': MaybeZeroY1,
       'transform.maybeZeroX': MaybeZeroX,
       'transform.maybeStackY': MaybeStackY,
@@ -363,6 +368,7 @@ describe('stdlib', () => {
       'mark.forceGraph': ForceGraph,
       'mark.tree': TreeGeometry,
       'mark.wordCloud': WordCloudGeometry,
+      'mark.density': DensityGeometry,
       'mark.gauge': Gauge,
       'palette.category10': Category10,
       'palette.category20': Category20,
@@ -426,6 +432,7 @@ describe('stdlib', () => {
       'shape.polygon.polygon': Polygon,
       'shape.polygon.ribbon': Ribbon,
       'shape.box.box': Box,
+      'shape.box.violin': Violin,
       'shape.vector.vector': Vector,
       'shape.label.label': Label,
       'shape.text.badge': Badge,
@@ -438,6 +445,7 @@ describe('stdlib', () => {
       'shape.rangeY.range': RectShape,
       'shape.path.path': PathShape,
       'shape.path.hollow': HollowPath,
+      'shape.density.density': DensityShape,
       'theme.classic': Classic,
       'theme.classicDark': ClassicDark,
       'theme.academy': Academy,

package.json

@@ -63,7 +63,8 @@
     "d3-hierarchy": "^3.1.2",
     "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^3.1.0",
-    "d3-voronoi": "^1.1.4"
+    "d3-voronoi": "^1.1.4",
+    "pdfast": "^0.2.0"
   },
   "devDependencies": {
     "@antv/g-plugin-rough-canvas-renderer": "^1.7.9",

site/docs/api/chart.zh.md

@@ -124,6 +124,10 @@ chart.render();
 
 添加 boxplot 图形，具体见 [mark](/spec/mark/boxplot)。
 
+### `chart.density`
+
+添加 density 图形，具体见 [mark](/spec/mark/density)。
+
 ### `chart.shape`
 
 添加 shape 图形，具体见 [mark](/spec/mark/shape)。

site/docs/api/overview.zh.md

@@ -29,6 +29,7 @@ order: 1
 - [chart.**sankey**](/api/chart#chartsankey) - 添加 sankey 标记到该视图。
 - [chart.**treemap**](/api/chart#charttreemap) - 添加 treemap 标记到该视图。
 - [chart.**boxplot**](/api/chart#chartboxplot) - 添加 boxplot 标记到该视图。
+- [chart.**density**](/api/chart#density) - 添加 density 标记到该视图。
 - [chart.**shape**](/api/chart#chartshape) - 添加 shape 标记到该视图。
 - [chart.**pack**](/api/chart#chartpack) - 添加 pack 标记到该视图。
 - [chart.**forceGraph**](/api/chart#chartforcegraph) - 添加 forceGraph 标记到该视图。

site/docs/api/view.zh.md

@@ -129,6 +129,10 @@ chart.render();
 
 添加 boxplot 图形，具体见 [mark](/spec/mark/boxplot)。
 
+### `chart.density`
+
+添加 density 图形，具体见 [mark](/spec/mark/density)。
+
 ### `view.shape`
 
 添加 shape 图形，具体见 [mark](/spec/mark/shape)。

site/docs/spec/data/kde.en.md

@@ -0,0 +1,6 @@
+---
+title: kde
+order: 1
+---
+
+<embed src="@/docs/spec/data/kde.zh.md"></embed>

site/docs/spec/data/kde.zh.md

@@ -0,0 +1,37 @@
+---
+title: kde
+order: 1
+---
+
+对指定的数据，进行核密度算法（Kernel Density Estimation）处理，底层使用开源库 [pdfast](https://www.npmjs.com/package/pdfast)。
+
+## 开始使用
+
+```ts
+chart.data({
+  type: 'inline',
+  value: data,
+  transform: [
+    {
+      type: 'kde',
+      field: 'y',
+      groupBy: ['x', 'species'],
+      as: ['y', 'size'],
+    },
+  ],
+});
+```
+
+上述例子处理之后，数据会增加 y、size 字段，均为数字数组。
+
+## 选项
+
+| 属性     | 描述                                               | 类型                         | 默认值        |
+| -------- | -------------------------------------------------- | ---------------------------- | ------------- |
+| field    | 进行核密度算法的数据字段                               | `string`                     |               |
+| groupBy  | 对数据进行分组的分组字段，可以指定多个                   | `string[]`                    |              |
+| as       | 进行 KDE 处理之后，存储的字段                          | `[number, number]`           | `['y', 'size']` |
+| min      | 指定处理范围的最小值                                  | `number`                     | 数据最小值      |
+| max      | 指定处理范围的最大值                                   | `number`                    | 数据最小值      |
+| size     | 算法最终生成数据的条数                                 | `number`                     | `10`          |
+| width    | 确定一个元素左右影响多少点，类似于 bandWidth            |  `number`                    | `2`            |

site/docs/spec/mark/box.zh.md

@@ -74,7 +74,7 @@ chart.render();
 
 ## 选项
 
-目前仅有一种同名的图形 `box`，下面描述一下所有的 `style` 配置项。
+目前有图形 `box`、`violin`，下面描述一下所有的 `style` 配置项。
 
 ### box
 
@@ -93,6 +93,10 @@ chart.render();
 | shadowOffsetY | 设置阴影距图形的垂直距离                                                                                      | `number` \| `Function<number>`                    | -         |
 | cursor        | 鼠标样式。同 css 的鼠标样式，默认 'default'。                                                                 | `string` \| `Function<string>`                    | 'default' |
 
+### violin
+
+同 `box` 图形配置。 
+
 ## FAQ
 
 - 怎么在前端进行数据分布情况的分析？

site/docs/spec/mark/density.en.md

@@ -0,0 +1,6 @@
+---
+title: density
+order: 1
+---
+
+<embed src="@/docs/spec/mark/density.zh.md"></embed>

site/docs/spec/mark/density.zh.md

@@ -0,0 +1,62 @@
+---
+title: density
+order: 1
+---
+
+接受核密度数据，一般用于用于绘制小提琴图。
+
+## 开始使用
+
+<img alt="density" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*S6O8QqpcRPMAAAAAAAAAAAAADmJ7AQ/original" width="600" />
+
+```js
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  autoFit: true,
+});
+
+chart.data({
+  type: 'fetch',
+  value: 'https://assets.antv.antgroup.com/g2/species.json',
+  transform: [
+    {
+      type: 'kde',
+      field: 'y',
+      groupBy: ['x'],
+      size: 20,
+    },
+  ],
+});
+
+chart
+  .density()
+  .encode('x', 'x')
+  .encode('y', 'y')
+  .encode('color', 'x')
+  .encode('size', 'size')
+  .tooltip(false);
+
+chart.render();
+
+```
+
+## 选项
+
+
+| 属性           | 描述                                                                                                          | 类型                                              | 默认值                         |
+| -------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------ |
+| fill           | 图形的填充色                                                                                                  | `string` \| `Function<string>`                    | -                              |
+| fillOpacity    | 图形的填充透明度                                                                                              | `number` \| `Function<number>`                    | -                              |
+| stroke         | 图形的描边                                                                                                    | `string` \| `Function<string>`                    | -                              |
+| strokeOpacity  | 描边透明度                                                                                                    | `number` \| `Function<number>`                    | -                              |
+| lineWidth      | 图形描边的宽度                                                                                                | `number` \| `Function<number>`                    | -                              |
+| lineDash       | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。 | `[number,number]` \| `Function<[number, number]>` | -                              |
+| opacity        | 图形的整体透明度                                                                                              | `number` \| `Function<number>`                    | -                              |
+| shadowColor    | 图形阴影颜色                                                                                                  | `string` \| `Function<string>`                    | -                              |
+| shadowBlur     | 图形阴影的高斯模糊系数                                                                                        | `number` \| `Function<number>`                    | -                              |
+| shadowOffsetX  | 设置阴影距图形的水平距离                                                                                      | `number` \| `Function<number>`                    | -                              |
+| shadowOffsetY  | 设置阴影距图形的垂直距离                                                                                      | `number` \| `Function<number>`                    | -                              |
+| cursor         | 鼠标样式。同 css 的鼠标样式，默认 'default'。                                                                 | `string` \| `Function<string>`                    | 'default'                      |