极简数据可视化入门

2018-06-26 Alex Sun 更多博文 » 博客 » GitHub »

原文链接 https://syaning.github.io/2018/06/26/data-viz/
注:以下为加速网络访问所做的原文缓存,经过重新格式化,可能存在格式方面的问题,或偶有遗漏信息,请以原文为准。


数据可视化

一、概述

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
  • ……