前端之图形学-1 数据可视化

前端图形学篇为随手记，在学习推进过程会根据个人了解进行二次修改，文章中的观点可能来自看到的各个网站书籍，存在的错误或不完善的地方请谅解

It’s not what you look at that matters, it’s what you see.
重要的不是你正看着的是什么，而是你从中所看到的是什么。——亨利·戴维·梭罗

1. 什么是数据可视化？

数据可视化，是关于数据视觉表现形式的科学技术研究。以某种概要形式抽取出来的信息，包括相应信息单位的各种属性和变量，利用图形、图像处理、计算机视觉以及用户界面，通过表达、建模以及立体、表面、属性以及动画的显示，对数据加以可视化解释。

文章主要记录数据可视化在前端的要点，并不关注前期数据的采集清洗等工作。

图为美国各洲“选举人票”的占比情况。作者设计了两种表现方法，一是以“选举人票”的分布做为底图，一是直接以美国地图作为底图。除此图上方双方选举人票总体数量对比外，鼠标移至各洲上方还能显示各洲“选举人票”数量及对希拉里与特朗普的支持比例。

2. 为什么进行数据可视化

数据可视化的主要目的在于，将其数据进行可视化的能力，对信息的传播和交流要清晰且有效。因此数据可视化需要有效表达观点，不仅形式上要符合审美，而且功能上要符合需求，深入对信息稀疏且复杂的数据库提供洞见，并通过直观方式传达信息的关键方面。牵强且过多的可视化反而会杂乱无章，迷惑用户，加重了大数据时代的信息负担。

如同分叉路口上的一个匆忙过客，一个简单的明了的方向指向牌即可为，树立过多方向牌，杂乱的说明修饰都可能为其带来不必要的麻烦。

因此数据可视化主要有三个目的：

（1）大规模的可视化更高效，使得人们能够迅速从大量的数据树立自己的见解
（2）可视化能够帮助分析人员或者团队在问题的本质分析上获取更多洞见，并得到更为深入的了解
（3）适当的可视化能够帮助人们创建一个描述状况的共享视图，并对需求采取的措施达成共识。

数据不仅会越来越多、并且越来越开放，而且数据仓也将由孤立状态变成关联共享阶段。由此便能联通生活工作中衣食住行各个方面。

3. 如何进行数据可视化

大数据可视化的过程探讨

（1）数据的可视化

对原始数据采取合适的可视化元素来表达，原始数据包括文本型数据、符号、图像、动画、声音等，这里主要以数值文本型数据为本。

（2）指标的可视化

如同商店销售一样，销售人员要完成上级给予的任务，必然需要制定自身的销售指标，而指标的制定至关重要。例如人们需要获取某一区域人口画像，而指标则是该区域的人口数量、人口年龄情况、人口性别、消费情况、收入状况等等。通过明确的指标可视化构建整个区域的人口画像，人们可以迅速制定下一步的策略。

（3）数据关系的可视化

数据关系往往是可视化数据需要核心表达的主题宗旨，书的关系是大小、多少、高低等等，而在可视化展示中，则可以采用位置（上下左右）、大小、颜色等方式进行，而未来达到这样的效果，我们需要排序、分类、透视等等操作运算。

（4）背景数据的可视化

可视化要铭记一点“数据没有价值，信息才有价值”，这也是人们急需继续努力在爆炸性增长的大数据中提炼有价值的信息的原因。核心就是背景数据，例如销售数据，只看销售数据，真正有意义，为企业的决策服务，还需要更多的数据，典型的例如，需要销售计划数据，那么在图表中增加一条销售计划线，而销售数据是否达到销售计划可以一目了然。

（5）转换成便于接受的形式

对同一原数据，其实存在不同的表达形式，通过需要根据数据类型及特征来确定数据表达模型，但前提也需要考虑数据的接收群众的不同。群众年龄、收入、教育、职业等对数据模型的认识程度高低直接影响数据的效果。如50岁高层政府职员与20岁大学学生之间，对于前者更趋向稳重色系和数据的直观表达。

（6）聚焦

在过载的数据中，并不可能对全部数据进行统一展示，因此我们需要将原有的可视化进行二次优化，对那些需要强化的，小部分数据、信息按照可视化的标准，进行再次聚焦处理。

（7）集中或者汇总展示

汇总展示（集中）是数据可视化必不可少的一环，通过前面数据指标、关系、聚焦等处理后，我们已经完成基本的数据可视化设计，但如果存在过多的模型，就需要进行模型进行汇总展示。通过汇总模型，如一段文本类型、数值类型、图形等告诉人们数据展示的核心意义，从而更好引导人们进行进一步的策略工作。

（8）扫尾处理

修饰性工作要做，这些工作是为了让可视化的细节更为精准、甚至优美，比较典型的工作包括设置标题，表明数据来源，对过长的柱子进行缩略处理，进行表格线的颜色设置，各种字体、图素粗细、颜色设置等等。

（9）风格化

风格化并非样样求异，相反是要标准化基础下的特色化。例如布局、用色、图素，常用的图表、信息图形式、数据、信息维度控制，典型的图标(ICON)，甚至动画的时间、过渡等等。

数据的可视化由最基础的元素组成，就像邱南森《数据之美》提到9大元素：位置、长度、角度、方向、形状、纹理、面积、色相、饱和度。

而这些最基础的元素的组合便能构成前端中绚丽直观的可视化图表，如长方形与高低长短量化组合成常见的柱状模型。

下图为我们提供模型选择的思路，我们根据数据类型、指标权重、数据关系等确定数据最终呈现的模型。

以现在常用的大屏可视化为例，大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。例如天猫双11大屏可视化，通过“大面积、炫酷动画、丰富色彩”能在视觉感官下给大众留下震撼而深刻的印象。

双11大屏背景数据来自不断刷新的消费记录与及海量的消费人群。通过指标的定义，梳理出关键指标，根据业务需求划定各个指标的优先级别，聚焦我们所需的数据。确定指标分析纬度，选定可视化类型（有效）。

4. 数据可视化设计的注意原则

以终为起，如果用户不能方便使用数据可视化获取结论并行事，不如放其寻祖，对于任何美学艺术的设计而言，清晰、实用性以及用户友好性至关重要。

减法法则，少即是多，苹果产品能赢得设计界的赞美非因其包含的特征，而是加以减略的特征，拒绝任何功能过剩和繁杂界面。

互动互通，如同地图，用户与地图的不断交互获取必要的目的，因此增加互动能使得用户迅速提出并回答问题，从而支撑其更好得决策。

使用相对数，相对得反义是绝对，在数据可视化得决策中，过多的绝对数是非常不明智缺乏理论基础的，相对数能减少用户“数据和什么比较”的疑惑，从而更能获取数据的来龙去脉。

数据可视化的未来

量化自我

未来我们不再被当成透明的存在，数据对个人的重构必将经历从外带内的整合。从智能穿戴技术量化人体的身体温度、血氧、心率，再到智能人体芯片对基因的演变、记忆的存储。无论数据将以屏幕还是VR全息可视化的展示，毫无疑问，量化自我必将给人们带来革命性的体验。

物联网

物联网通过智能感知、识别技术与普适计算等通信感知技术，广泛应用于网络的融合中。一个典型的例子是机器监控，使用安装在不同机器部件上的多个传感器，将有关温度、震动、压力等数据上传分析系统，分析系统对其进行处理识别及响应。可视化便是分析系统与用户间非常重要的一个桥梁，通过物联网可视化更加高效快捷整合连接生活工作中的实物。

文章图片来自网络，侵删

参考文章:

维基百科.“数据可视化”

数据观.大数据可视化概念简介以及相关工具介绍

Phil Simon.大数据可视化-重构智慧社会