docs: add documents for kde and density

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/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'                      |

site/docs/spec/overview.zh.md

@@ -24,6 +24,7 @@ G2 是一个简洁的、渐进式的可视化语法。文档将按照下面的
 - [map](/spec/data/map) - 对数据进行映射，返回新的数组。
 - [join](/spec/data/join) - 类似 SQL 的方式，将两份数据连接到一起。
 - [custom](/spec/data/custom) - 使用自定义的方式对数据进行变换。
+- [kde](/spec/data/kde) - 核密度处理算法。
 
 ## Mark
 
@@ -49,6 +50,7 @@ G2 是一个简洁的、渐进式的可视化语法。文档将按照下面的
 - [rangeY](/spec/mark/range-y) - 使用一组 `y`(y1, y2) 来定位一个垂直于 y 轴的矩形区域，常用于绘制高亮指定区域的辅助区域。
 - [polygon](/spec/mark/polygon) - 利用多组 (x, y) 数据点，在画布中绘制闭合的多边形，通常结合一些社区布局算法使用。
 - [wordcloud](/spec/mark/wordcloud) - 绘制词云图。
+- [density](/spec/mark/density) - 渲染核密度数据，多用于小提琴图。
 
 ## Transform