From d0ac612b7f01f2f8abb851edf2c5d53200a74681 Mon Sep 17 00:00:00 2001 From: Joel Alan <31396322+lxfu1@users.noreply.github.com> Date: Thu, 21 Nov 2024 11:03:44 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20Add=20the=20description=20of=20the=20ra?= =?UTF-8?q?dar=E3=80=81histogram=20and=20scatter=20chart=20(#21)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...47\202\271\345\233\276 - Scatter Chart.md" | 69 +++++++ ...\226\271\345\233\276 - Histogram Chart.md" | 70 +++++++ ...\350\276\276\345\233\276 - Radar Chart.md" | 181 ++++++++++++++++++ 3 files changed, 320 insertions(+) create mode 100644 "knowledges/\346\225\243\347\202\271\345\233\276 - Scatter Chart.md" create mode 100644 "knowledges/\347\233\264\346\226\271\345\233\276 - Histogram Chart.md" create mode 100644 "knowledges/\351\233\267\350\276\276\345\233\276 - Radar Chart.md" diff --git "a/knowledges/\346\225\243\347\202\271\345\233\276 - Scatter Chart.md" "b/knowledges/\346\225\243\347\202\271\345\233\276 - Scatter Chart.md" new file mode 100644 index 0000000..76c0538 --- /dev/null +++ "b/knowledges/\346\225\243\347\202\271\345\233\276 - Scatter Chart.md" @@ -0,0 +1,69 @@ +## 图表属性 + +- 名称：散点图 +- 别名：散点图，英文名：Scatter Chart +- 形状：散点 +- 图表类别：统计图表 +- 图表功能：比较、分别、趋势 + +## 基础概念 + +散点图是一种显示两个变量之间关系的图表。通过将每个数据点表示为图上的一个点，散点图能够展示两个变量（通常是数值变量）之间的相关性或分布趋势。每个点的水平和垂直位置由该数据点的两个数值变量决定，X 轴和 Y 轴分别代表两个变量。 + +## 适用场景 + +- 发现两个变量之间的关系或趋势，例如相关性强度。 +- 显示数据的分布模式，检测异常值。 +- 数据点数量较大时，散点图能够有效呈现整体分布情况。 + +## 不适用场景 + +- 只有一个变量的情况，因为散点图需要两个数值变量来显示数据点的位置。 +- 分类数据或需要明确分段的情况，散点图更适合连续型变量。 + +## 图表用法 + +### 图表属性 + +```typescript +type Scatter = { + type: 'scatter'; + data: { x: number; value: number }[]; +}; +``` + +### 数据要求 + +- type：图表的类型，必填，文本类型，值必须为 "scatter"。 +- data：图表的数据，必填，数组对象类型： + - x：X 轴上的数值变量，必填，数值类型。 + - y：Y 轴上的数值变量，必填，数值类型。 + +## 使用示例 + +1. 研究广告支出与销售额之间的关系，广告支出（单位：千元）为 10, 20, 30, 40，销售额（单位：万元）分别为 15, 25, 35, 45。用散点图可视化我的数据。 + +```json +{ + "type": "scatter", + "data": [ + { "x": 10, "y": 15 }, + { "x": 20, "y": 25 }, + { "x": 30, "y": 35 }, + { "x": 40, "y": 45 } + ] +} +``` + +2. 用散点图可视化我的数据 [{ "age": 25, "income": 5000, "size": 55 }, { "age": 35, "income": 7000, "size": 65 }, { "age": 45, "income": 10000, "size": 64 }]。 + +```json +{ + "type": "scatter", + "data": [ + { "x": 25, "y": 5000 }, + { "x": 35, "y": 7000 }, + { "x": 45, "y": 10000 } + ] +} +``` diff --git "a/knowledges/\347\233\264\346\226\271\345\233\276 - Histogram Chart.md" "b/knowledges/\347\233\264\346\226\271\345\233\276 - Histogram Chart.md" new file mode 100644 index 0000000..3c6d68f --- /dev/null +++ "b/knowledges/\347\233\264\346\226\271\345\233\276 - Histogram Chart.md" @@ -0,0 +1,70 @@ +## 图表属性 + +- 名称：直方图 +- 别名：质量分布图，柱状分布图，英文名：Histogram Chart +- 形状：柱形 +- 图表类别：统计图表 +- 图表功能：分布 + +## 基础概念 + +直方图是一种显示数据分布的图表，它通过柱形条表示某个范围内数据点的频率。每个柱形条的高度（或长度）表示数据点在特定区间内出现的次数，X 轴表示数据的取值范围，Y 轴表示频率或数量。直方图主要用于表示连续型变量的数据分布，并帮助分析数据的集中趋势、离散程度和形态。 + +直方图与柱状图的区别，直方图反映数据分布情况，柱状图只能对数值进行比较。从数据结构来说，柱状图需要一个分类变量，是离散的（如一班、二班、三班），因此柱子间有空隙。但直方图的数据均为连续的数值变量（如成绩），因此柱子间是没有空隙的。 + +## 适用场景 + +- 观察数据的分布情况，例如正态分布、偏态分布等。 +- 识别数据的集中区域和极值点，帮助分析数据的变异性和集中性。 +- 处理连续型数据，将其划分为多个区间，并对每个区间的频率进行统计。 + +## 不适用场景 + +- 分类数据，因为它针对的是连续型数值数据。 +- 变量数值较少且分布不均时，可能会导致图形失真。 + +## 图表用法 + +### 图表属性 + +```typescript +type Histogram = { + type: 'histogram'; + data: { value: number }[]; + binNumber?: number; +}; +``` + +### 数据要求 + +- type：图表的类型，必填，文本类型，值必须为 "histogram"。 +- data：图表的数据，必填，数组对象类型； + - value：数据频率，必填，数值类型； +- binNumber：区间个数，可选，数值类型，用于定义直方图的区间数量。 + +## 使用示例 + +1. 用直方图展示考试成绩的分布，成绩在 0-100 之间，将其划分为 5 个区间，数据如下：[78 , 88, 60, 100, 95]。 + +```json +{ + "type": "histogram", + "data": [ + { "value": 78 }, + { "value": 88 }, + { "value": 60 }, + { "value": 100 }, + { "value": 95 } + ], + "binNumber": 5 +} +``` + +2. 用直方图可视化我的数据：[{ "value": 20 }, { "value": 25 }, { "value": 30 }, { "value": 35 }] + +```json +{ + "type": "histogram", + "data": [{ "value": 20 }, { "value": 25 }, { "value": 30 }, { "value": 35 }] +} +``` diff --git "a/knowledges/\351\233\267\350\276\276\345\233\276 - Radar Chart.md" "b/knowledges/\351\233\267\350\276\276\345\233\276 - Radar Chart.md" new file mode 100644 index 0000000..4573d63 --- /dev/null +++ "b/knowledges/\351\233\267\350\276\276\345\233\276 - Radar Chart.md" @@ -0,0 +1,181 @@ +## 图表属性 + +- 名称：雷达图 +- 别名：雷达图，英文名：Radar Chart +- 形状：圆形 +- 图表类别：统计图表 +- 图表功能：比较 + +## 基础概念 + +雷达图是一种显示多变量数据的图。通常从表同一中心点开始等角度间隔地射出三个以上的轴，每个轴代表一个定量变量，各轴上的点依次连接成线或几何图形。雷达图可以用来在变量间进行对比，或者查看变量中有没有异常值。另外，多幅雷达图之间或者雷达图的多层数据线之间，还可以进行总体数值情况的对比。 + +## 适用场景 + +- 某一数据对象由多个特征类别构成，比如食品的营养成分（糖、维生素、矿物质、脂肪、水）。 +- 数据特征类别是有限的，并且都可以进行归一化或者能被离散化。 + +## 不适用场景 + +- 数据对象中的分类过多，或者不可在统一程度上标准化的情况。 +- 雷达图中层叠的多边形过多的情况。 + +## 图表用法 + +### 图表属性 + +```typescript +type Radar = { + type: 'radar'; + data: { name: number; value: number; group?: string }[]; +}; +``` + +### 数据要求 + +- type：图表的类型，必填，文本类型，值必须为 "radar"。 +- data：图表的数据，必填，数组对象类型； + - name：数据分类名称，必填，文本类型； + - value：分类的数值大小，必填，数值类型； + - group：数据分组名称，选填，文本类型； + +## 使用示例 + +1. 小明对自己进行能力评估：沟通能力 2 分、协作能力 3 分、领导能力 2 分、学习能力 5 分、创新能力 6 分、技术能力 9 分，用雷达图可视化： + +```json +{ + "type": "radar", + "data": [ + { "name": "沟通能力", "value": 2 }, + { "name": "协作能力", "value": 3 }, + { "name": "领导能力", "value": 2 }, + { "name": "学习能力", "value": 5 }, + { "name": "创新能力", "value": 6 }, + { "name": "技术能力", "value": 9 } + ] +} +``` + +2. 某中学进行了第一次模拟考，三年级中 3 个班级的平均成绩为，一班语文 95，数学 96，外语 85，物理 63，化学 91；二班语文 75，数学 93，外语 66，物理 85，化学 88；三班语文 86，数学 76，外语 96，物理 93，化学 67。要对这三个班级的整体成绩做出评估，为接下来的教学计划做出指导，用雷达图可视化： + +```json +{ + "type": "radar", + "data": [ + { + "name": "语文", + "value": 95, + "group": "一班" + }, + { + "name": "数学", + "value": 96, + "group": "一班" + }, + { + "name": "外语", + "value": 85, + "group": "一班" + }, + { + "name": "物理", + "value": 63, + "group": "一班" + }, + { + "name": "化学", + "value": 91, + "group": "一班" + }, + { + "name": "语文", + "value": 75, + "group": "二班" + }, + { + "name": "数学", + "value": 93, + "group": "二班" + }, + { + "name": "外语", + "value": 66, + "group": "二班" + }, + { + "name": "物理", + "value": 85, + "group": "二班" + }, + { + "name": "化学", + "value": 88, + "group": "二班" + }, + { + "name": "语文", + "value": 86, + "group": "三班" + }, + { + "name": "数学", + "value": 76, + "group": "三班" + }, + { + "name": "外语", + "value": 96, + "group": "三班" + }, + { + "name": "物理", + "value": 93, + "group": "三班" + }, + { + "name": "化学", + "value": 67, + "group": "三班" + } + ] +} +``` + +3. 用雷达图可视化我的数据 `[ { "nutrient": "Vitamin C", "score": 7 }, { "nutrient": "Fiber", "score": 6 }, { "nutrient": "Sugar", "score": 5 }, { "nutrient": "Protein", "score": 4 }, { "nutrient": "Iron", "score": 3 }, { "nutrient": "Calcium", "score": 2 } ]` + +```json +{ + "type": "radar", + "data": [ + { "name": "Vitamin C", "value": 7 }, + { "name": "Fiber", "value": 6 }, + { "name": "Sugar", "value": 5 }, + { "name": "Protein", "value": 4 }, + { "name": "Iron", "value": 3 }, + { "name": "Calcium", "value": 2 } + ] +} +``` + +4. 用雷达图可视化我的数据 `[ { "fruit": "Apple", "nutrient": "Vitamin C", "score": 5 }, { "fruit": "Apple", "nutrient": "Fiber", "score": 7 }, { "fruit": "Apple", "nutrient": "Sugar", "score": 6 }, { "fruit": "Apple", "nutrient": "Protein", "score": 2 }, { "fruit": "Apple", "nutrient": "Iron", "score": 3 }, { "fruit": "Apple", "nutrient": "Calcium", "score": 2 }, { "fruit": "Banana", "nutrient": "Vitamin C", "score": 4 }, { "fruit": "Banana", "nutrient": "Fiber", "score": 5 }, { "fruit": "Banana", "nutrient": "Sugar", "score": 7 }, { "fruit": "Banana", "nutrient": "Protein", "score": 3 }, { "fruit": "Banana", "nutrient": "Iron", "score": 2 }, { "fruit": "Banana", "nutrient": "Calcium", "score": 3 } ]` + +```json +{ + "type": "radar", + "data": [ + { "group": "Apple", "name": "Vitamin C", "value": 5 }, + { "group": "Apple", "name": "Fiber", "value": 7 }, + { "group": "Apple", "name": "Sugar", "value": 6 }, + { "group": "Apple", "name": "Protein", "value": 2 }, + { "group": "Apple", "name": "Iron", "value": 3 }, + { "group": "Apple", "name": "Calcium", "value": 2 }, + { "group": "Banana", "name": "Vitamin C", "value": 4 }, + { "group": "Banana", "name": "Fiber", "value": 5 }, + { "group": "Banana", "name": "Sugar", "value": 7 }, + { "group": "Banana", "name": "Protein", "value": 3 }, + { "group": "Banana", "name": "Iron", "value": 2 }, + { "group": "Banana", "name": "Calcium", "value": 3 } + ] +} +```