数据可视化

原则
类型

数据可视化就是用图形描绘信息。

推荐数据可视化

Web前端
- Apache ECharts（原百度Echarts)
- Antv（阿里数据可视化）
Python库
- matplotlib
- pyecharts
  原则
  数据可视化是一种以图形描绘密集和复杂信息的表现形式。数据可视化的视觉效果旨在使数据容易对比，并用它来讲故事，以此来帮助用户做出决策。数据可视化可以表达不同类型和规模的数据，包括从几个数据点到有大量变量的数据集。
  四条核心原则：准确、清晰、有效、美观，这四条原则按重要等级先后排序，相辅相成且呈递进关系。
  准确
  可视表达时不歪曲，不误导，不遗漏，精准如实反应数据的特征信息。例：某基金收益率趋势图，合理的值域区间可以反映真实的数据波动趋势。
  清晰
  清晰包括两个层面，结构清晰与内容清晰。
  有效
  信息传达有重点，克制不冗余，避免信息过载，用最适量的数据-油墨比（Data-ink Ratio）表达对用户最有用的信息，也不要增加用户的负担。
  美观
  美观是一种克制，合理利用视觉元素进行映射，运用格式塔原理对数据进行分组，既能帮助用户更快的获取信息，也能在一定程度上建立一种秩序美、规律美。

类型

数据可视化可以以不同的形式表达。图表是表达数据的常用方式，因为它们能够展示和对比多种不同的数据。
图表类型的选择主要取决于两点：要表现的数据和表现该数据的用意。该指南描述各种类型的图表及其用例。

图表类型

随时间变化
随时间变化的图表显示一段时间的数据，例如多个类别之间的趋势或比较。
常见用例包括：
股价表现、销量趋势统计、年表

2. 类别比较
类别比较图表是多个不同类别数据之间的比较。
常见用例包括：不同国家的收入、热门场地时间、团队分配

3. 排名
排名图表显示项目在有序列表中的位置。
常见用例包括：
选举结果、性能统计

4. 占比
占比类图表显示了局部与整体的关系。
常见用例包括：产品类别的综合收入、产品构成等

5. 关联
关联类图表显示两个或以上变量之间的关系。
常见用例包括：收入和预期寿命

6. 分布
分布类图表显示每个值在数据集中出现的频率。
常见用例包括：人口分布、收入分布

7. 流程
流程类图表显示了多个状态之间的数据移动。
常见用例包括：资金转移、投票计数和选举结果

8. 关系
关系图表显示多个项目之间的关系。
常见用例包括：社交网络、词图

类型选择
柱状图（条形图）和饼图
柱状图（条形图）和饼图都可用于显示比例，表示部分与总体的对比。
· 柱状图（条形图）使用共同的基线，通过条形长度表示数量
· 饼图使用圆的圆弧或角度表示整体的一部分
由于这三个图表都是使用相同的基线，因此可以更轻松地根据条形长度比较值的差异。

柱状图（条形图），折线图和堆叠面积图在显示随时间的变化方面比饼图更有效
面积图
面积图有多种类型，包括堆叠面积图和层叠面积图：
· 堆叠面积图显示多个时间序列（在同一时间段内）堆叠在一起
· 层叠面积图显示多个时间序列（在同一时间段内）重叠在一起
层叠面积图建议不要使用超过两个时间序列，因为这样做会使数据模糊不清。取而代之，应当使用堆叠面积图来比较一个时间间隔内的多个值（横轴表示时间）。

样式和形状

数据可视化使用自定义样式和形状，使数据更容易理解，以适合用户需求。
图表可以从以下方面进行优化：

图形元素
文字排版
图标
轴和标签
图例和注释

不同类型数据的样式设计
可视化编码是将数据转换为可视形式的过程。独特的图形属性可应用于定量数据（如温度，价格或速度）和定性数据（如类别，风味或表达式）。
这些图形属性包括：

形状
颜色
大小
面积
体积
长度
角度
位置
方向
密度

不同属性的表现
多个视觉处理方法可以综合应用于数据点的多个方面。例如，在条形图中，条形颜色可以表示类别，而条形长度可以表示值（如人口数量）。

形状可用于表示定性数据。在此图表中，每个类别由特定形状（圆形，正方形和三角形）表示，这样可以在一张图表中轻松实现特定范围的比较，同时也可以进行类别之间比较。
1. 形状
图表可以运用形状，以多种方式展示数据。形状的设计可以是有趣的、曲线的，或者精确和高保真的等等。
形状精确程度
图表可以展示不同精度程度的数据。用于细致研究的数据应该用适合交互的形状（在触摸大小和功能可见性方面）展示。而旨在表达一般概念或趋势的数据可以使用细节较少的形状。

2. 颜色
颜色可用于以四种主要方式区分图表数据：
· 区分类别
· 表示数量
· 突出特定数据
· 表示含义

颜色区分类别

例：圆环图中，颜色用于表示类别。
颜色表示数量

例：地图中，颜色用于表示数据值。
颜色突出数据

例：散点图中，颜色用于突出特定数据。
重点区域
在不滥用的情况下，颜色可以突出焦点区域。不建议大量使用高亮颜色，因为它们会分散用户注意力，影响用户的专注力。
表示含义

无障碍
为了适应看不到颜色差异的用户，您可以使用其他方法来强调数据，例如高对比度着色，形状或纹理。
将文本标签应用于数据还有助于说明其含义，同时消除对图例的需求。

3. 线
图表中的线可以表示数据的特性，例如层次结构，突出和比较。线条可以有多种不同的样式，例如点划线或不同的不透明度。
线可以应用于特定元素，包括：
· 注释
· 预测元素
· 比较工具
· 可靠区间
· 异常

4. 文字排版
文本可用于不同的图表元素，包括：
· 图表标题
· 数据标签
· 轴标签
· 图例
图表标题通常是具有最高层次结构的文本，轴标签和图例具有最低级别的层次结构。

字重
标题和字重的变化可以表达内容在层次结构中的重要程度。但是应该保持克制，使用有限的字体样式。

5. 图标
图标可以表示图表中不同类型的数据，并提高图表的整体可用性。
图标可用于：
· 分类数据：用于区分组或类别
· UI控件和操作：例如筛选，缩放，保存和下载
· 状态：例如错误，空状态，完成状态和危险
在图表中使用图标时，建议使用通用可识别符号，尤其是在表示操作或状态时，例如：保存，下载，完成，错误和危险。

6. 坐标轴
一个或多个坐标轴显示数据的比例和范围。例如，折线图沿水平和垂直坐标轴显示一系列值。

柱状图（条形图）基线
柱状图（条形图）应从为零的基线（y轴上的起始值）开始。从不为零的基线开始可能导致数据被错误地理解。

坐标轴标签
标签的设计应体现图表中最重要的数据。应根据需要使用标签，并在UI中保持一致性。他们的出现不应该妨碍查看图表。

文字方向
为便于阅读，文本标签应水平放置在图表上。
文字标签不应该：
· 旋转
· 垂直堆叠

7. 图例和注释
图例和注释描述了图表的信息。注释应突出显示数据点，数据异常值和任何值得注意的内容。

1. 注释
2. 图例

在PC端，建议在图表下方放置图例。在移动端，将图例放在图表上方，以便在交互过程中保持可见。
标签和图例
在简单图表中，可以使用直接标签。在密集的图表（或更大的图表组的一部分）中，可以用图例。

8. 小显示屏
可穿戴设备（或其他小屏幕）上显示的图表应该是移动端或PC端图表的简化版本。

行为

图表具有交互模式，使用户可以控制图表数据。这些模式可以使用户专注于图表的特定值或范围。
以下推荐的交互模式，样式和效果（如触觉反馈）可以提高用户对图表数据的理解：
渐进式披露
提供了按需求逐步展示详细信息的明确途径。
直接操作
允许用户直接对UI元素进行操作，最大限度地减少屏幕上所需的操作数量，包括：缩放和平移，分页和数据控件。
改变视角
使一种设计可以适用于不同的用户和数据类型，例如数据控件和动效。

1. 渐进式披露
使用渐进式披露显示图表详细信息，允许用户根据需要查看特定数据点。

2. 缩放和平移
缩放和平移是常用的图表交互，会影响用户对图表数据深入的研究和探索。
缩放
缩放改变界面显示的远近。设备类型决定了如何执行缩放。
· 在PC端，通过单击、拖动或滚动进行缩放
· 在移动端，通过捏合进行缩放
当缩放不是主要操作时，可以通过单击和拖动（在PC端）或双击（在移动端）来实现。
平移
平移让用户能够看到屏幕之外的界面。它应该合理的展示数据的价值。例如，如果图表的一个维度比另一个维度更重要，则平移的方向可以仅限于该维度。
· 平移通常与缩放功能同时使用。
· 在移动端，平移通常通过手势实现，例如单指滑动。