数据可视化：核心、交互、分类与工具

一、写在前面

1.1 相关背景

麦肯锡公司2011年提出【大数据时代】，大数据时代的提出背景： IDC于2011年发布一项统计表明，再过去5年中，每年全世界数据总量均比前一年翻一番；2011年全世界创建和复制的数据总量达到1.8ZB（1ZB=109TB）。当前信息处理和分析手段，远远落后于数据获取速度。人们认识到数据的价值。

随着“大数据时代”的出现，人们对数据的价值也日益重视，在各种展台会议，展览会，推荐会，常常可见到许多的大屏幕，大屏幕上通过一些炫酷的图谱和色彩，将数据信息展现出来，那大屏幕上的内容的开发，通常就是前端程序员的工作之一，也就是常说的“大屏”与数据可视化的具体实现。

这种具体实现，例如下面这几张2020年天猫双十一的大屏截图：

1.2 导读

本文主要分为以下几部分：

①数据可视化系统核心

②交互准则

③可视化对象分类及其工具

④web 应用开发工具

二、正文部分

2.1 数据可视化系统核心

数据可视化系统核心分为两部分，一是“视觉呈现”，二是“用户交互”。

视觉呈现是指通过合适的色彩搭配，借助合适的图谱工具，将数据信息以更生动形象的视觉效果表现出来，强调视觉效果的美观、直观以及艺术性。例如更炫酷的色彩搭配，能生动准确表达数据信息特点的雷达图、热力图的呈现形式。

用户交互关注用户和系统的交互设计，包括交互操作的合理性，是否符合大多数用户的使用习惯，交互操作的“障碍”是否足够低，是否设计有合适的交互反馈等。

2.2 交互准则

① 遵循普遍适用原则

遵循普遍适用原则的意思是，交互设计要符合大多数用户的文化习惯使用习惯，在阅读习惯上，在审美上，能被大多数人接收并欣赏；在交互操作设计上，能让大多数用户轻松学会。

②交互延时

交互延时准则，要求用户和系统的交互操作延时期间具有及时有效的视觉反馈提示，以及每次交互的延时的时长不宜过长。例如用户的一个上传行为，系统应及时给予上传进度提示，一个查询或更新数据行为，系统反馈结果的时间，不应让用户“等太久”。

③交互成本

交互成本关注的是交互所花费的用户成本是否足够低，包括交互的记忆成本，理解成本，也就是要求交互应该是理解负担轻的，记忆负担轻的，简单的，符合用户习惯的。禁忌复杂多层嵌套的交互设计。

④适度的交互场景变化

交互设计的交互过程应当配上适度的交互场景变化，适度的场景变化可以增强交互感，增强反馈感，甚至可以减轻用户的“视觉疲劳”，愉悦用户的心情，及时“留住”用户的注意力。凡事过犹不及，交互场景变化也强调“适度性”和“可接受度”。

2.3 可视化对象分类及其工具

可视化分类从不同维度可以有多种划分，这里提到的是按照可视化对象分类，可分为：医学可视化、科学可视化、信息可视化、可视分析四类。

这些分类也分别具有相应的软件工具支持，如下：

①医学可视化软件：3D Slicer、VolView

3D Slicer是一个用于医学图像分析和可视化的开源软件平台，你可以使用它来进行医学图像的标注和交互式分割并可以得到三维的渲染图。作为一款具有丰富扩展能力的跨平台(Linux、MacOS、Windows)软件，3D Slicer已经被大量应用到图像指导的医学治疗工作中。同时作为一款开源软件，Slicer由来自世界范围的工程师或生物医学研究者花费了近20年的时间共同开发和维护。

② 科学可视化软件：GrADS、OpenDx、AVS、Amira、IDL、World Wind、Vis5D、Goolge Earth

③信息可视化软件

信息可视化在不同的领域也有不同的支撑工具，例如：

面向图的可视化软件：IBM System G、Gephi、CiteSpace

面向高维多变量：XmdevTool、InfoScope、ParSets

面向文本可视化：Jigsaw、IN-SPIRE

面向商业智能：TableAu、Spotfire、Power BI、Splunk、Weave

面向公众传播：FlowingData、Visual.ly

④可视化分析软件：Gapminder、Google Public Data Explorer、Palatir

2.4 web 应用开发工具

和前端程序距离最近的就是 web 相关开发工具了，例如下面的这些：

①ECharts （免费，阿帕奇基金会孵化，有好的文档，丰富的社区案例，在做web相关的可视化工作时，常被 web 开发人员选用，受欢迎度非常高。）

②AntV （免费，蚂蚁集团全新一代数据可视化解决方案，自述“让数据栩栩如生”，这是一个系列，包括 G6（偏向展示，便捷的关系数据可视化引擎与图分析工具）， X6（偏向编辑，极易定制、开箱即用、数据驱动的图编辑引擎）,L7等）

③DataV（收费，DataV旨在让更多的人看到数据可视化的魅力，帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用。DataV提供丰富的可视化模板，满足您会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求。）

④D3.js（Data-Driven Documents），Raphael.js，Processing.js

⑤流程可视化：BPMN.js、X6、Jsplumb、G6-editor（已闭源）

⑥其他，例如帆软（付费，无需编码。FineBI数据可视化。），Arena （即视大屏编辑器，拖拽，修改配置项做成。）等

三、写在后面

值得一提的是，可视化的出现要远比“大数据时代”的概念要早，只不过当时没和“数据”强相关，比较早地重视和应用可视化的行业应该是医学行业。

另外，关于编程和可视化的关系，有一种观点是“从命令编程走向可视化编程”。

关于正文中提到的“交互准则”，适用性不仅限于可视化中的交互。