数据可视化常用的五种方式及案例分析

很高兴有机会和大家一起谈论数据可视化常用的五种方式及案例分析的话题。这个问题集合包含了一些常见和深入的问题，我将详细回答每一个问题，并分享我的见解和观点。

文章目录列表:

数据可视化常用的五种方式及案例分析

2.20个小技巧，让数据可视化图表更专业！

概念借助于图形化的手段，清晰、快捷有效的传达与沟通信息。从用户的角度，数据可视化可以让用户快速抓住要点信息，让关键的数据点从人类的眼睛快速通往心灵深处。 数据可视化一般会具备以下几个特点：准确性、创新性 和 简洁性。

常用五种可视化方法

下面从最常用和实用的维度总结了如下5种数据可视化方法，让我们来一一看一下：

一、面积&尺寸可视化对同一类图形（例如柱状、圆环和蜘蛛图等）的长度、高度或面积加以区别，来清晰的表达不同指标对应的指标值之间的对比。

这种方法会让浏览者对数据及其之间的对比一目了然。制作这类数据可视化图形时，要用数学公式计算，来表达准确的尺度和比例。

a: 天猫的店铺动态评分天猫店铺动态评分模块右侧的条状图按 的比例清晰的表达了不同评分用户的占比。从下图中我们 眼就可以强烈的感知到5分动态评分的用户占 的比例。

b: 联邦预算图如下图，在美国联邦预算剖面图里，用不同高度的货币流清晰的表达了资金的来源去向，及每一项所占金额的比重。

c: 公司黄页-企业能力模型蜘蛛图如下图，通过蜘蛛图的表现，公司综合实力与同行平均水平的对比便一目了然。

二、颜色可视化

通过颜色的深浅来表达指标值的强弱和大小，是数据可视化设计的常用方法，用户一眼看上去便可整体的看出哪一部分指标的数据值更 。a: 点击 次热力图比如下面这张眼球热力图，通过颜色的差异，我们可以直观的看到用户的关注点。

b: 2013年美国失业率统计在图中可以看到，通过对美国地图以州为单位的划分，用不同的颜色来代表不同的失业率等级范围，整个的全美失业率状况便尽收眼底了。

c: 美国手机用户城市分布图中红点是用iPhone的人，绿点是用安卓的人。这两张在微博上看到的图， 张是美国一个城市的一览，第二张图特写了纽约的市中心，尤其是曼哈顿地区。我们可以看到在市中心和主干道的人用iPhone居多，而用安卓的人都在郊区。这也引起了人们的热议，有的说在美国富人都住郊区别墅，所以富人爱用安卓手机；有的反驳说曼哈顿地区的人几乎都用iPhone，说明富人喜欢用iPhone手机。不管结论如何，都足以说明用户都被这些图所吸引，所以可视化的方式效果真的很直观。

注：科学家统计了2年里30亿条含有地理数据的twitter推文，根据客户端总结出来的数据。

三、图形可视化在我们设计指标及数据时，使用有对应实际含义的图形来结合呈现，会使数据图表更加生动的被展现，更便于用户理解图表要表达的主题。

Examples:

a: iOS手机及平板分布如下图所示，当展示使用不同类型的手机和平板用户占比时，直接用总的苹果图形为背景来划分用户比例，让用户 眼就可以直观的看到这些图是在描述苹果设备的，直观而清晰。

b: 人 用户的网购调查下图可以看出，该数据可视化的设计直接采用男性和女性的图形，这样的设计让分类一目了然。再结合了颜色可视化（左面蓝色右面粉色），同时也采用了面积&尺寸可视化，不同的比例用不同长度的条形。这些可视化方法的组合使用，大大加强了数据的可理解性。

四、地域空间可视化当指标数据要表达的主题跟地域有关联时，我们一般会选择用地图为大背景。

这样用户可以直观的了解整体的数据情况，同时也可以根据地理位置快速的定位到某一地区来查看详细数据。

a: 美国最好喝啤酒的产地分布下图中，通过以美国地图为大背景，清晰的记录了不同州所产啤酒在1987-2007年间在美国啤酒节中获得的奖牌累计总数。再辅以颜色可视化的方法，让用户清晰的看到美国哪些州更盛产好喝的啤酒。

五、概念可视化通过将抽象的指标数据转换成我们熟悉的容易感知的数据时，用户便更容易理解图形要表达的意义。

a: 厕所贴士下图是厕所里贴在墙上的节省纸张的环保贴士，用了概念转换的方法，让用户清晰的感受到员工们一年的用纸量之多。

如果只是描述擦手纸的量及堆积可达高度，我们还没有什么显性化概念。但当用户看到用纸的堆积高度比 最高建筑还高、同时需砍伐500多颗树时，想必用户的节省纸张甚至禁用纸张的情怀便油然而生了。所以可见用概念转换的方法是多么的重要和有效。

b: Flickr云存储空间达1TB的可视化描述Flickr对云存储空间升至1TB确实是让人开心的事情，但相信很多人对这一数量级所代表的含义并不清晰。

所以Flickr在宣传这一新的升级产品时，采用了概念可视化的方案。从下图可以看出，用户可以动态的选择照片的大小，之后Flickr会采用动态交互的方式计算和显示出1TB能容纳多少张对应大小的。这样一来，用户便有了清晰的概念，知道这1TB是什么量级的容量了。

注意事项在总结了常见维度的数据可视化方法和范例之后，要再次总体强调下做数据可视化设计时的注意事项，总结了三点如下：

1）设计的方案至少适用于两个层次：一是能够整体展示大的图形轮廓，让用户能够快速的了解图表所要表达的整体概念；之后再以合适的方式对局部的详细数据加以呈现（如鼠标hover展示）。

2）做数据可视化时，上述的五个方法经常是混合用的，尤其是做一些复杂图形和多维度数据的展示时。

3）做出的可视化图表一定要易于理解，在显性化的基础上越美观越好，切忌华而不实。

总结：作为设计师，除了掌握方法来有针对性的设计之外，还要在平时多留心积累素材，同时培养自己的创造力和专业素养，保持一颗好奇心，才能真正的设计出样式精美又实用的数据可视化图表。

20个小技巧，让数据可视化图表更专业！

数据可视化6步法

在当前互联网，各种数据可视化图表层出不穷，本文尝试对数据可视化的方法进行归纳，整理成6步法。

一般的数据图表都可以拆分成最基本的两类元素: 所描述的事物及这个事物的数值，我们暂且将其分别定义为指标和指标值。比如一个 分布中，男性占比30%，女性占比70%，那么指标就是男性、女性，指标值对应为30%、70%。

1. 将指标值图形化

一个指标值就是一个数据，将数据的大小以图形的方式表现。比如用柱形图的长度或高度表现数据大小，这也是最常用的可视化形式。

传统的柱形图、饼图有可能会带来审美疲劳，可尝试从图形的视觉样式上进行一些创新，常用的方法就是将图形与指标的含义关联起来。

比如Google Zeitgeist在展现top10的搜索词时，展示的就是“搜索”形状的柱形，图形与指标的含义相吻合，同时也做了立体的视觉变化：

2. 将指标图形化

一般用与指标含义相近的icon来表现，使用场景也比较多，如下：

3.将指标关系图形化

当存在多个指标时，挖掘指标之间的关系，并将其图形化表达，可提升图表的可视化深度。常见有以下两种方式：

借助已有的场景来表现

联想自然或社会中有无场景与指标关系类似，然后借助此场景来表现。

比如百度统计流量研究院操作系统的分布，首先分为windows、mac还有其他操作系统，windows又包含xp、2003等多种子系统。

根据这种关系联想，发现宇宙星系中也有类似的关系： 宇宙中有很多星系，我们最为熟悉的是太阳系，太阳系中又包括各个行星， 因此整体借用宇宙星系的场景，将熟知的windows比喻成太阳系，将xp、window7等比喻成太阳系中的行星，将mac和其他系统比喻成其他星系，表现如下：

构建场景来表现

指标之间往往具有一些关联特征，如从简单到复杂、从低级到高级、从前到后等等。如无法找到已存在的对应场景，也可构建场景。

比如百度统计流量研究院中的学历分布，指标分别是小学、初中、高中、本科等等，它们之间是一种越爬越高，从低等级到高等级的关系，那么，这种关系可以通过构建一个台阶去表现，如下：

支付宝新出的个人年度账单中，在描述付款最多的三项时，构建了一个领奖台的形式：

小结：

根据之前3步，可将指标、指标值和指标关系分别进行图形化处理。

以最简单的 分布为例，可以得到一个线性的可视化过程，如下：

以上图示为供参考的线性化过程，实际可视化思考中，将哪类元素进行图形化或者图形化前后的顺序可能均有不同，需根据具体情况处理。

4. 将时间和空间可视化时间

通过时间的维度来查看指标值的变化情况，一般通过增加时间轴的形式，也就是常见的趋势图。

空间

当图表存在地域信息并且需要 表现的时候，可用地图将空间可视化，地图作为主背景呈现所有信息点。

Google Zeitgeist在2010和2012年的年度热门回顾中，都是以地图为主要载体（同时也结合了时间），来呈现热门事件：

5. 将数据进行概念转换

先看下生活中的概念转换，当我们需要喝水时，通常会说：给我来一杯水；而不会说：给我来30ml的水。在这里，30ml是一个实际数据，但是难以感知，所以用一杯的概念来转换。

同样在数据可视化，有时需要对数据进行概念转换，可加深用户对数据的感知。常用方法有对比和比喻：

对比：

下图是一个介绍中国烟民数量的图表：如果只看左半部分中国烟民的数量：32000000，知道数据量级很大，但具体有多大却很难感知；直到看到右半部分：中国烟民数量超过了美国人口总和，这样一对比，对数据的感知就加深了。

比喻

下图是一个介绍雅虎邮箱处理数据量的图表，大意是每小时处理的电子邮件大小有1.2TB，相当于644245094张打印的纸。

这又是一个很大的数据，但到底有多大？ 在这里用了一个比喻的手法：644245094张纸，如果把每一张纸首尾对接，可以绕地球4圈多。到这里，能较深刻感受到雅虎邮箱处理的数据量之大，为地球节省了很多纸张。

更进一步地，还将这个比喻进行了图形化表现。

6.让图表“动”起来

数据图形化完成后，可结合实际情况，将其变为动态化和可操控性的图表，用户在操控过程中能更好地感知数据的变化过程，提升体验。

实现动态化通常以下两种方式： 交互和动画。

交互

交互包括鼠标浮动、点击、多图表时的联动响应等等，如下是百度统计流量研究院的时间分布图，采用左图右表的联动形式，左图中，鼠标浮动则显示对应数据，点击则切换选择：

动画

包括增加入场动画、交互过程的动画、播放动画等等。

入场动画：即在页面载入后，给图表一个“生长”的过程，取代“数据载入中”这样的提示文字。

交互动画：用户发生交互行为后，通过动画形式给以及时反馈。

播放动画：一般来是提供播放功能，像看视 一样，让用户能够完整看到数据随时间变化的过程。下图是Gapminder在描述多维数据时，提供随时间播放的功能，可以直观感受到所有数据的变化。

总结

数据可视化形式多样，思考过程也不尽相同。以上6步法，是基于“数据”层面（区别于信息可视化），梳理思考过程，总结设计方法，为后续可视化提供可借鉴的思路。

如何创作与众不同的图表──数据可视化

数据可视化是数据展示的常见方式，所谓一图抵千言，好的图表能 传递信息，让观众一目了然，差的图表往往会不知所云。

人类大脑的一半完全是用于处理可视化信息的。当你给用户展示一张信息图的时候，你已经以大脑的最大带宽路径在影响他了。

一张设计优良的数据可视化图能即时给予观者深刻的印象，并能穿透一个复杂故事的芜杂直抵问题的核心。

众所周知，纽约时报的可视化图表非常专业，既能阐述事实，也不失简洁美观。

作为普通人，其实只要遵守一些设计规则，加上一点审美训练，也能制作出专业的可视化图表。

这次给大家介绍20个图表制作过程中有用的方法和规则。

错误的图表类型会导致混淆视听，同样的数据集可以选择多种图表类型，但大家要注意甄别用法。

你想要给观众展示什么，这是最重要的选择依据，下面给大家列举了的十几种图表类型。

绘制水平条形图时，在Y轴左侧绘制负值，在Y轴右侧绘制正值，不要把正负值绘制到轴同一侧。

垂直柱状图同理。

截断Y轴会导致表达失真。在下面的示例中，查看左侧的图表，可以很快得出结论，值 B 比 D 大 3 倍以上，而实际上差异要小得多。

从0基线开始可确保用户获得更准确的数据表达。

对于折线图，如果始终将 Y 轴比例限制为从0开始可能会使图表过于平坦，无法表达趋势变化。

由于折线图的主要目标是表示趋势，比较合理的是根据数据范围调整比例，保持折线上下高度占据 Y 轴范围的三分之二。

折线图是由线连接的“标记”组成，通常可用于表达时间序列变化。

当时间间隔很小，且时间点较多时，折线是一种非常好的展示变化的方式，比如股票分钟线。

但如果时间点比较稀疏，且时间间隔大，最好是使用柱状图来展示，比如月销量变化。因为此情况下折线图容易导致混淆。

平滑的折线图可能在视觉上令人愉悦，但它们歪曲了背后的实际数据，而且过粗的线条掩盖了真正的“标记”位置。

一般情况下，为了节省可视化空间，当有两个数据系列具有相同的度量但大小不同时，可能倾向于使用双轴图表。

但双轴图表不仅难以阅读，而且还会误导观众，以为代表了 2 个数据系列之间的比较。

大多数用户不会密切关注双轴比例差异，只是浏览图表，可能得出错误的结论。

饼图是最受欢迎且经常被误用的图表之一。

在大多数情况下，条形图是更好的选择。但是，如果非要使用饼图，需要注意以下几个点：

没有适当的标签，无论图表多好看——它都几乎没有意义。

直接在图表上标记对所有查看者都非常有帮助，因为一目了然，更节省时间。

查看图例需要花费很多时间，一般观众不会仔细去对比图例和图表的颜色。

将值放在切片之上可能会导致多个问题，可读性差，薄切片无法标注等。

更好的做法是，为每个数据标签添加带有清晰指向的黑色标签。

如果饼图切片大小无顺序，则很难理解表达的内容。

所以饼图切片需要以一定规则排序，一般是将最大的切片放在12点钟位置，然后按顺时针方向降序放置下一个切片。

柱状图排序也要避免随机性，按照一定规则排序会更加清晰易读。

将最大值放在顶部（对于水平条形图）或左侧（对于垂直条形图），以确保最重要的值占据最 的空间，减少眼球运动和阅读图表所需的时间。

当我们去掉饼图中间部分并创建一个圆环图时，我们可以腾出空间来显示额外的信息，但如果宽度过窄，它会使图表变得很难阅读。

不必要的样式不仅会分散注意力，还可能导致对数据的误解，让用户产生错误印象。

应该避免以下几种：

颜色是有效数据可视化的一个组成部分，在设计时考虑这 3 种调色板类型：

研究数据表明，大约每 12 个人中就有 1 人是色盲。图表只有在广泛的受众可以访问时，才能最大化它的价值。

所以在配色时注意以下几个方面：

确保排版准确传达信息，并帮助用户专注于数据，而不是分散注意力。

注意以下几点：

标签过长时不要使用旋转角度，而是用水平条形图来表达，这个简单的技巧将确保用户能够更有效地观看图表。

如果你想向Web 和 项目添加交互式图表，将使用什么图表库？

现在有很多专业的图标库可供选择，比如echarts、highcharts等。

图表库包含了许多前面提到的交互和规则。基于定义的库进行设计将确保易于实施，并为你提供大量交互想法。

通过更改参数、可视化类型、时间线帮助用户进行探索，可交互式图表能更有效的获取有用的信息。

好的数据可视化图表会在你的脑海里久久留下关于事实、趋势或者过程的心理模型。

图表制作并不难，但好的图表需要注意很多细节，避免画蛇添足、过犹不及。

本文除了柱状图、条形图、折线图、饼图等常用图表之外，还有数据地图、瀑布图和散点图，旭日图，漏斗图等等。一起了解下不同图表的使用场景、优劣势！（注：所有图表均来自BDP个人版）

1.柱状图

适用场景：适用场合是二维数据集（每个数据点包括两个值x和y），但只有一个维度需要比较，用于显示一段时间内的数据变化或显示各项之间的比较情况。

优势：柱状图利用柱子的高度，反映数据的差异，肉眼对高度差异很敏感。

劣势：柱状图的局限在于只适用中小规模的数据集。

延伸图表：堆积柱状图、百分比堆积柱状图，不仅可以直观的看出每个系列的值，还能够反映出系列的总和，尤其是当需要看某一单位的综合以及各系列值的比重时，最适合。

2.条形图

适用场景：显示各个项目之间的比较情况，和柱状图类似的作用；

优势：每个条都清晰表示数据，直观；

延伸图表：堆积条形图、百分比堆积条形图

3.折线图

适用场景: 折线图适合二维的大数据集，还适合多个二维数据集的比较。

优势：容易反应出数据变化的趋势。

4.各种数据地图（一共有6种类型）

适用场景：适用于有空间位置的数据集；

优劣势：特殊状况下使用，涉及行政区域；

（1）行政地图（面积图）

（2）行政地图（气泡图）

（3）地图图表（根据经纬度，可做区域、全国甚至全球地图）：点状图

（4）地图图表（同上）：热力图

（5）地图图表（同上）：散点图

（6）地图图表（同上）：地图+柱状/饼图/条形

（7）地图图表（同上）：动态轨迹图

Ps：区域地图，通过放大镜可以放大或缩小区域

5.饼图（环图）

适用场景：显示各项的大小与各项总和的比例。适用简单的占比比例图，在不要求数据精细的情况适用。

优势：明确显示数据的比例情况，尤其合适渠道来源等场景。

劣势：肉眼对面积大小不敏感。

饼图、环图你喜欢那个呢，可以直接在右下方设置~

6.雷达图

适用场景：雷达图适用于多维数据（四维以上），且每个维度必须可以排序，数据点一般6个左右，太多的话辨别起来有困难。

优势：主要用来了解公司各项数据指标的变动情形及其好坏趋向。

7.漏斗图

适用场景：漏斗图适用于业务流程多的流程分析，显示各流程的转化率。

优势:在网站分析中，通常用于转化率比较，它不仅能展示用户从进入网站到实现购买的最终转化率，还可以展示每个步骤的转化率，能够直观地发现和说明问题所在。

劣势:单一漏斗图无法评价网站某个关键流程中各步骤转化率的好坏。

8.词云

适用场景： 显示词 ，可以用来做一些用户画像、用户标签的工作。

优势：很酷炫、很直观的图表。劣势：使用场景单一，一般用来做词 。

9.散点图

适用场景：显示若干数据系列中各数值之间的关系，类似XY轴，判断两变量之间是否存在某种关联。散点图适用于三维数据集，但其中只有两维需要比较。

优势：对于处理值的分布和数据点的分簇，散点图都很理想。如果数据集中包含非常多的点，那么散点图便是最佳图表类型。

劣势：在点状图中显示多个序列看上去非常混乱。

延伸图表：气泡图（调整尺寸大小就成气泡图了）

10.面积图

适用场景：强调数量随时间而变化的程度，也可用于引起人们对总值趋势的注意。

延伸图表：堆积面积图、百分比堆积面积图还可以显示部分与整体之间（或者几个数据变量之间）的关系。

11.指标卡

适用场景：显示某个数据结果&同环比数据。

优势：适用场景很多，很直观告诉看图者数据的最终结果，一般是昨天、上周等，还可以看不同时间维度的同环比情况。

劣势：只是单一的数据展示，最多有同环比，但是不能对比其他数据。

12.计量图

适用场景：一般用来显示项目的完成进度。

优势：很直观展示项目的进度情况，类似于进度条。

劣势：表达效果很明确，数据场景比较单一。

13.瀑布图

适用场景：采用 值与相对值结合的方式，适用于表达数个特定数值之间的数量变化关系，最终展示一个累计值。

优势：展示两个数据点之间的演变过程，还可以展示数据是如何累计的。

劣势：没有柱状图、条形图的使用场景多。

14.桑基图

适用场景：一种特定类型的流程图，始末端的分支宽度总各相等，一个数据从始至终的流程很清晰，图中延伸的分支的宽度对应数据流量的大小，通常应用于能源、材料成分、金融等数据的可视化分析。

15.旭日图

适用场景：旭日图可以表达清晰的层级和归属关系，以父子层次结构来显示数据构成情况，旭日图能便于细分溯源分析数据，真正了解数据的具体构成。

优势：分层看数据很直观，逐层下钻看数据。

16.树图

适用场景：和旭日图类似；

17.双轴图

适用场景：柱状图+折线图的结合，适用情况很多，数据走势、数据同环比对比等情况都能适用。

优势：特别通用，是柱状图+折线图的结合，图表很直观。

劣势：这个好像没什么劣势，个人感觉。

当然，当你分析数据的时候一定不会只用一种图表，尤其是数据报告中，每次都会用到多个图表，那各种图表的结合效果图也简单展示一下：

（销售业绩分析）

所有的图表均来自BDP个人版哦

好了，今天关于“数据可视化常用的五种方式及案例分析”的话题就讲到这里了。希望大家能够通过我的讲解对“数据可视化常用的五种方式及案例分析”有更全面、深入的了解，并且能够在今后的学习中更好地运用所学知识。