Appearance

极简数据可视化入门

#DataViz

一、概述 ​

1. 为什么要进行可视化 ​

  • 人肉眼对图像更敏感
  • 将数据之间的复杂关系通过更清晰的方式展现出来
  • ……

2. 涉及到的领域 ​

  • 数学，统计
  • 交互设计
  • 物理（力场图）
  • 地理（GIS）
  • 心理学
  • 编程
  • ……

3. 数据特征 ​

  • 维度：二维，三维，四维，更高维度
  • 类型：文本，数值（离散、连续），百分比，……
  • 数据规模：小规模，中等规模，大规模
  • 数据关系：维度比较，变化趋势，分布情况，……
  • ……

在选择图表类型的时候，会综合考虑这些数据特征，从而选择最合适的图表。

4. 图表基本元素 ​

  • 标题，副标题
  • 坐标：直角坐标，极坐标
  • 坐标轴：单轴，双轴，多轴
  • label，tick
  • legend
  • 过滤器：时间选择器，维度选择器，……
  • 标注线
  • gridline
  • 维度：2d，3d
  • 色彩
  • 动画
  • ……

二、常用图表类型 ​

1. 柱状图 ​

常用于表示二维数据，其中有一个维度需要进行比较。柱的高度可以直观地反映数据的差异。柱状图适合数据规模不大的情况，如果数据规模比较大，则会有很多柱子，影响视觉效果。

####（1）基础柱状图

表示二维数据。图中的两个维度是“月份”和“降雨量”，其中“降雨量”这个维度需要进行比较。

chart

（2）分组柱状图 ​

可以表示三维数据。图中的三个维度分别是“月份”、“城市”和“降雨量”，当月份或城市固定的时候，可以比较降雨量随另外一个维度的变化。

分组柱状图

（3）堆叠柱状图 ​

可以表示三维数据，与分组柱状图类似，不过额外的一个维度不再是简单的并列关系，而是可以表示整体总量和个体占比。图中的三个维度分别是“水果”、“人”和“水果消费量”。可以比较每种水果的消费总量，在每一种水果内部，可以看到每个人的消费量分布。

堆叠柱状图

百分比堆叠柱状图可以直观反映一个维度内部，另一个维度的占比分布（而非绝对数值）。

百分比堆叠柱状图

（4）分组堆叠柱状图 ​

是分组柱状图和堆叠柱状图的结合，可以表示四维数据。图中的四个维度分别是“水果”、“人”、“性别”和“水果消费量”。

分组堆叠柱状图

2. 条形图 ​

条形图与柱状图类似，只不过柱子的方向是水平的。同样有分组条形图、堆叠条形图、分组堆叠条形图等变体。

条形图 条形图和柱状图还是有着一些细微的差别：

  • 柱状图除了表示各个分类的差别外，还可以与折线图结合组成复合图表，用来表示趋势；而条形图则主要侧重于数据比较，不太合适展示趋势变化
  • 如果类别名称较长，使用柱状图的话需要进行文字旋转，而条形图则不必

3. 折线图 ​

折线图常用来表示趋势，或者整体趋势比单点数据更重要的场合。适用于二维数据，通过多条曲线则可以表示三维数据（或者说是多组二维数据）。对于大规模的数据也可以很好的进行表示。

折线图

大规模数据折线图

4. 面积图 ​

面积图与折线图类似，只不过线条下面进行了着色。当一个图中展示多条数据的趋势的时候，用折线图相对好一些，因为面积图会有颜色重叠问题，虽然可以通过半透明来解决，但是显示效果并不是很好。例如：

面积图

不过如果需要反映个体和整体的占比以及趋势，就适合使用堆叠面积图，例如：

堆叠面积图

5. 饼图 ​

饼图主要适用于反映个体占整体的比重，适用于二维数据。由于人肉眼对面积的敏感程度不如高度，因此在比较数值大小的情况下，柱状图比饼图要好一些。

（1）基础饼图 ​

基础饼图

（2）多层饼图 ​

可以用来展示层级数据的分布占比。

多层饼图

（3）Donut / 环形图 ​

标题可以放在圆环中间。

donut 结合多层饼图可以构成多层的环形图。例如DaisyDisk分析磁盘使用情况：

多层donut

（4）南丁格尔玫瑰图 ​

是一种极坐标下的柱状图。每个扇形区域半径大小不同表示要比较的数值。

南丁格尔玫瑰图

6. 散点图 ​

散点图可以表示二维到三维的数据，其中有两个维度都需要进行比较。主要用于展示样本点的分布情况。如果所有的点都一样，则反映的是二维数据。如果对不同的点使用不同的颜色或者形状，则可以表示三维数据。

散点图

7. 气泡图 ​

气泡图是散点图的变种，主要用来表示三维或者四维数据，并且可以对三个维度进行比较。如图所示展示的是四维的数据，其中x，y，以及气泡大小是三个可比较的维度，颜色代表了第四个维度。

气泡图

另一种变体是 punchcard 图，可以表示三维数据：

punchcard

三、进阶图表类型 ​

1. 雷达图 ​

雷达图适用于多维数据。

雷达图

2. 箱线图 ​

可以用于反映数据的分散情况，显示出一组数据中的最大值、最小值、中位数、上下四分位数以及异常值。

箱线图

3. 漏斗图 ​

常用于业务流程的分析，用来展示一层层的转化。

漏斗图

4. 桑基图 ​

又叫做桑基能量分流图，或者桑基能量平衡图。是一种特殊的流程图，用于展示数据流量的变化。

桑基图

5. 仪表图 ​

显示当前的进度或者程度。

仪表图

仪表图2

6. 甘特图 ​

用来展示随时间变化的进度发展情况。

甘特图

7. 树状图 ​

用来展示层级关系。

树状图

树状图2

8. 日历图 ​

展示与时间紧密相关的数据情况（时变数据）。

日历图

9. 热力图 ​

常用于GIS的可视化，展示不同区域的热门程度。也常用于展示网页不同位置对用户注意力的吸引程度。

热力图

10. Graph ​

主要构成就是点和线，用来展示数据点之间的相互关系。

graph-1

常见的是力场图，即假设每个点都是一个带同种电荷的小球，互相排斥，然后点之间的线又牵引着它们，从而达到一种平衡状态。可以用来展示大规模的数据点的分布状况（例如社交网络中用户的群体关系）。

graph-2

11. 词云 ​

wordcloud

12. K线图 / candlestick ​

candlestick

13. 地图 ​

地图

14. 地铁线路图 ​

metro

15. 其它 ​

  • 等高线图
  • 3D图（柱状图，饼图，……）
  • 复合图表（柱状图+折线图，地图+热力图，……）
  • ……

四、工具和代码实现 ​

1. JavaScript ​

2. Python ​

3. 其它工具 ​

  • Excel
  • Matlab
  • Tableau
  • SAP Lumira
  • Gephi
  • ……