‘壹’ 数据可视化是什么意思
数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。今天，我们使用的H5工具是Epub360，下面我们来介绍实现数据图表可视化效果的方法，零基础的你们准备好了吗？
首先，我们先来介绍一下数据图表组件。
数据图表组件是一款用于数据可视化动态展示的组件，满足各行业数据可视化快速设计需求，借助H5及时传播。应用场景多为企业月度、季度、年度业绩报表等数据展示；帮助各媒体行业，特别是数据新闻制作更快呈现，实现图、文、音视频、可视化数据在1个H5工具内完成。另，借助意派Epub360的自由定义页面，将适应更多设备场景展示。
目前数据图表组件支持柱状图、折线图、饼状图、散点图、条形图5种图表类型。
‘贰’ 如何将数据进行数据可视化展现
1、确认需求
在数据可视化设计前，分析人员要先完成业务需求的分析，将分析需求拆分成不同层级、不同主题的任务，捕捉其中业务的数据指标、标签，划分出不同优先级，为下一步取数做准备。
数据可视化-派可数据商业智能BI
此外，整个可视化图表页面中，色彩不宜太过丰富，颜色最好也不要太过鲜艳，把色彩对比强烈的颜色放到关键信息，用清晰的逻辑去呈现变化，突出重点部分，使用户产生更好地体验，这才是他们最希望看到的。
最后，回到数据分析本身，分析人员可以选择为制作完成的可视化图表附上自己从业务逻辑思考的信息，帮助用户更好地分辨图表展现的意义。
派可数据 商业智能BI可视化分析平台
‘叁’ 数据可视化适合哪些行业和应用场景
对于需要大屏展示数据并且追求数据展示精准生动的群体来说，Hightopo 都有其用武之地。目前大屏在通信、医疗、化工、司法、餐饮、环保、农业、电商、制造等各个行业都有真实应用场景。
品牌推广类：适合展会、媒体访问等公众场合，展示效果显着凸显特色，清晰展现数据，是企业和品牌彰显形象的优先手段。
商业沟通类：适用于凸显公司或机关的业务的能力以及主要特色业务，接待领导或者来访客户时，使其对公司有一个较清晰的定位和对公司业务有一个初步了解，提高公司核心竞争力，是传播公司业务的窗口。
数据分析类：根据行业现行模式，重点分析展现数据，展现效果直观、快速、易于接收。分析类的大屏对数据进行对比、串联，在展示美观的同时不影响数据的精准性。领导通过分析大屏能够掌握公司整体趋势和核心竞争力。
数据监控类：针对企业运营的性质，重点展现关键指标，关注数据实时性，强调数据的精准性。监控大屏可以辅助决策，在对实时情况有整体的了解之后，可以快速的做出决策，保证工作效率的快速性和可控性。
hightopo
数据可视化的基本手段：
1、数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式提取出来的信息，包括相应信息单位的各种属性和变量。
2、数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。但是，这并不就意味着数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味，或者是为了看上去绚丽多彩而显得极端复杂。
3、数据可视化与信息图形、信息可视化、科学可视化以及统计图形密切相关。当前，在研究、教学和开发领域，数据可视化乃是一个极为活跃而又关键的方面。“数据可视化”这条术语实现了成熟的科学可视化领域与较年轻的信息可视化领域的统一。
而 HT 拥有一套完整丰富的 2D 组态可供用户快速上手搭建，展示上拥有独特的主题风格设计，在各种比例下不失真，加上布局机制，解决了不同屏幕比例下的展示问题。通过数据对接的载入，可以搭建出一套完整的数据可视化系统的解决方案，应多各种行业上数据展示的需求。
(3)前端数据可视化有什么特点扩展阅读
Hightopo 是基于 HTML5 标准技术的 Web 前端 2D 和 3D 图形界面开发框架。非常适用于实时监控系统的界面呈现，广泛应用于电信网络拓扑和设备管理，以及电力、燃气等工业自动化 (HMI/SCADA) 领域。Hightopo 提供了一套独特的 WebGL 层抽象，将 Model–View–Presenter (MVP) 的设计模型延伸应用到了 3D 图形领域。使用 Hightopo 您可更关注于业务逻辑功能，不必将精力投入复杂 3D 渲染和数学等非业务核心的技术细节。
多年来数百个工业互联网可视化项目实施经验形成了一整套实践证明的高效开发流程和生态体系，可快速实现现代化的、高性能的、跨平台桌面Mouse/移动Touch/虚拟现实VR图形展示效果及交互体验。
‘肆’ 一图胜千言：数据可视化不完全总结（一）
这篇学习笔记是对数据可视化的一个较为全面的总结。大部分的内容来自于自己之前所学过的数据分析知识，还有一部分内容来自于我收集的一些资料，我将在这篇学习笔记中回答如下几个关键问题：
数据可视化（Data Visualization）是涉及信息技术、自然科学、统计分析、图形学、交互、地理信息等多种学科交叉领域，通过将非数字的信息进行可视化以表现抽象或复杂的概念和信息的技术。简单的说，这种技术将数据以图表的方式呈现，用以传递信息。人类有五官，能通过5种渠道感受这个物质世界，那么为什么单单要青睐可视化的方式来传递信息呢？这是因为人类利用视觉获取的信息量巨大，人眼结合大脑构成了一台高带宽巨量视觉信号输入的并行处理器，具有超强模式识别能力，有超过50%功能用于视觉感知相关处理的大脑，大量视觉信息在潜意识阶段就被处理完成，人类对图像的处理速度比文本快6万倍，所以数据可视化是一种高带宽的信息交流方式。
如果我们的视野再开阔些，数据可视化从广义上来说包含了三个分支：科学可视化（Scientific Visualization），信息可视化（Information Visualization）和可视分析学（Visual Analytics）。科学可视化是跨学科研究与应用领域，关注三维现象的可视化，在建筑学、气象学、医学或生物学方面的各种系统中有广泛的应用，这个领域研究的数据具有天然几何结构（如磁感线、流体分布等）。
信息可视化则研究抽象数据的交互式视觉表示以加强人类认知。抽象数据包括数字和非数字数据，如地理信息与文本，这个领域研究的数据具有抽象的结构，比如柱状图，趋势图，流程图和树状图，这些图表将抽象的概念转化成为可视化信息，常常以数据面板的形式体现。
可视分析学结合了交互式视觉表示以及基础分析过程（统计过程、数据挖掘技术），执行高级别、复杂的活动（推理、决策）。
数据科学的主要组成部分包含三个大的阶段：数据整理，探索性数据分析和数据可视化。站在一个更高的位置来看，数据可视化在数据科学中的位置是比较靠后的，是属于最后的成果展示阶段。如果要从头说起的话，首先，在 数据整理 阶段，我们的主要任务是数据的获取和解析，包括一系列对原始数据的清洗和加工工作，这一块的知识领域主要涉及计算机科学。紧接着是 探索性数据分析 阶段，这个阶段要大量使用统计和数据挖掘方面的专业知识，也需要绘制图表来解释数据和探索数据，这个阶段的主要任务是过滤和挖掘。但这个阶段的可视化分析只是你和数据之间的“对话”，是数据想要告诉你什么，而数据可视化则是数据和你的读者之间的对话，是你通过数据想要告诉读者什么，这是它们之间最大的区别。完成了上面两个阶段的内容，才到了我们最后的 数据可视化 阶段，这是一个多学科交叉的领域，涉及到图形设计，信息可视化和人机交互，我们的主要任务是对信息进行精炼，然后通过可视化表示出来，并与读者产生交互。然而，如果将数据科学的这三个阶段理解为按严格顺序进行的“线性”的模型那就大错特错了，它经历的是一个迭代的，非线性的过程。后面的步骤会让你更了解之前所做的工作，可能到了数据可视化阶段，才意识到还有太多疑点要弄明白，我们需要回到上一步重新进行之前的工作，就像画家翻来覆去才能最终完成一幅杰作一样，数据可视化的过程并不是给数据分析这个刚出炉的蛋糕加点糖霜，，而是有一个反复迭代，不断优化的过程。
数据可视化是一个再典型不过的多学科交叉领域了，可以说数据可视化所需要用到的知识，就是数据科学庞大知识体系的一个剪影。你会感受到数据科学理性的一面，同样也会感受到她感性的一面。你可以穷尽自己的一生，在这个浩如烟海的领域中尽情的探索，常学常新，其乐无穷。
数据可视化的本质，是充分理解业务的基础上对数据进行深入分析和挖掘，然后将探索数据所得到的信息和知识以可视化的形式展现出来。也就是说我们做的工作其实就是从数据空间映射到图形空间。我们要做的第一步工作是充分的结合业务理解数据，然后采用某些方法选择合适的图表类型，这又要求我们先对图表类型有个比较全面的了解。绘制完图表是不是就完成了呢？其实不是。我们还要对图表进行优化，优化所针对的对象是各种图表元素，对此我们有一系列的设计技巧，下面将一步一步的来介绍这些知识。
离开对业务的理解谈数据分析都是耍流氓。这里介绍一种快速了解数据与业务以开展进一步的探索与分析的方法，叫“5W2H法”。步骤一：WHAT，这是关于什么业务的什么事？数据所描述的业务主题是什么？步骤2：HOW，即如何采集的数据？采集规则会影响后续分析，比如如果是后端数据埋点，那么数据一般是实时的；而如果是前端数据埋点，那么就要进一步弄清楚数据在什么网络状态会上传？无网络状态下是如何处理的？这些都会影响最后数据的质量进而影响分析质量。步骤三：WHY，为什么搜集此数据？我们想从数据中了解什么？数据分析的目标是什么？步骤四：WHEN，是何时段内的业务数据？步骤五：WHERE，是何地域范围内的业务数据？步骤六：WHO，谁搜集了数据（Who）？在企业内可能更关注是来自哪个业务系统。步骤七：HOW MUCH，各种数据有多大的量，足够支持分析吗？数据充足和不足的情况下，分析方法是有所不同的。如果七个问题中有一个答复不能令人满意，则表示这方面有改进余地。
用简单的三个步骤就可以选择合适的图表类型：一看数据类型，二看数据维度，三看要表达的内容。
我们有两种数据类型，每种数据类型又有两个子类别。首先，我们有 分类数据 和 定量数据 。分类数据用来表示类别，比如苹果，香蕉，梨子和葡萄，就是水果的4种类别，称为 分类定类 ；有的分类变量是有一定顺序的，比如可以把红酒的品质分为低，中，高三档，人的身材有偏瘦，正常和肥胖等等，这种特殊的分类变量称为 分类定序 。定量数据也可以进一步分为两类，一类叫 连续值数据 ，比如人的年龄；一类叫 离散值数据 ，比如猫咪的数量。选择图表的第一步就是要看我要展示的数据是什么类型，最典型的例子就是相关性分析，如果要分析定量数据和定量数据之间的关系，那么散点图无疑是最佳选择，但如果有其他情况出现该怎么选择呢？数据类型直接影响你能选择的图表类型：
举几个例子来说明大家可能就明白了。
首先来看一个散点图的例子，比如我要分析一下汽车每加仑行驶的英里数和汽车重量之间的关系，因为两个都是定量数据，那么我们就应该选择散点图：
从散点图中我们可以看到每加仑行驶的英里数和汽车重量之间是呈线性负相关关系的，车的重量越重，每加仑行驶的英里数就越小。
下面这个马赛克图分析了《冰与火之歌》中五王之战各战争与战争类别之间的关系：
五王之战中总共有这样几种战争类别：
战争类型是分类变量，战争的胜负也是分类变量，马赛克图（也就是下面要介绍的“不等宽柱状图”）分析了战争类型和战争胜负的关系，可以很明显的看出ambush，siege和razing类型的战争，进攻方的胜率都是很高的。这意味着什么？如果我要建立一个预测战争胜负的模型，那么战争类型就是一个非常好的特征。
如果要分析分类数据和定量数据的相关性，那么箱线图就是一个比较好的选择了，请看下面这个例子：
这个箱线图展示了汽车的气缸数量和每加仑行驶的英里数之间的关系，气缸数量越多，每加仑汽油行驶公里数越少，说明相应的油耗越高，间接说明气缸数量和油耗具有相关性。这里可以将气缸数量这个离散型数值变量当做分类变量来看待。
看完了数据类型，接着看维度，要展示的数据是一维，二维还是多维的？如果是一维或者二维，那么一般的统计图表都能满足要求，但如果我们有多维的数据，我们就要把第三维开始的数据映射到上面提到的那7大视觉编码中。比如散点图表示了两个定量数据之间的关系，如果还存在第三个定量数据，那么我们就可以用点的大小来表示，那么散点图就变成了气泡图，如果第三个数据是分类数据，那么我们可以在散点图的基础上标记颜色来表示。
最后，还要考虑可视化主要想表达的内容是什么。对于4大内容：比较，分布，组合和关系，下面这张图给出了一份简单的指南。比如我想表达的是数据的分布，如果是单变量且只有比较少的数据点时，可以选择直方图。比如想表达数据之间的关系，如果是两个变量，则使用散点图，如果有第三个变量，那么如果编码成大小，则得到气泡图。
这也是当初一个比较困扰我的地方，到底有多少种图表可供我选择？作为数据分析师，我们得先对自己的武器库有个基本的认识和了解，才能在使用的时候挑选趁手的武器，下面将介绍一些常见的图表。
也称为“棒形图”或“柱形图”。条形图 (Bar Chart) 采用水平或垂直条形（柱形图）来比较不同类别的离散数值。图表其中一条轴代表要比较的具体类别，另一条则用作离散数值的标尺。条形图与直方图不同，前者不会显示数值在某时间段内的持续发展。条形图的离散数据是分类数据，针对的是单一类别中的数量多少。条形图其中一个缺点是当有大量条形时，将难以标签图表。
条形图有两种常见的变种： 多组条形图 和 堆叠式条形图 。多组条形图也称为“分组条形图”或“复式条形图”，在同一轴线上将两个或多个数据集并排，绘制数据并进行分类。跟条形图同样，每个条形的长度用来显示不同类别之间的离散数值比较。每个数据系列将获分配一种颜色（或同一颜色的其中一种深浅度）以进行区分，然后每组条形将独立放置，并与其他条形组分隔开。多组条形图通常用来将分组变量或类别与其他数据组（具有相同变量或类别种类）进行比较，也可用来比较迷你直方图，每组内的每个条形将表示变量的显着间隔。多组条形图的缺点：当有太多条形组合在一起时将难以阅读。
跟多组条形图不同（并排显示条形），堆叠式条形图 (Stacked Bar Graph) 将多个数据集的条形彼此重迭显示，适合用来显示大型类别如何细分为较小的类别，以及每部分与总量有什么关系。堆叠式条形图共分成两种：简单堆叠式条形图将分段数值一个接一个地放置。条形的总值就是所有段值加在一起。适合用来比较每个分组/分段的总量。100% 堆叠式条形图会显示每组占总体的百分比，并按该组每个数值占整体的百分比来绘制，可用来显示每组中数量之间的相对差异。堆叠式条形图的一个主要缺点：条形分段越多，图表就越难以阅读。另外，我们也较难比较不同分段，因为它们不在同一基线之上。
径向/圆形条形图只是在极座标系（而非笛卡尔座标系）上绘制的条形图。虽然看起来很美观，但径向条形图的问题在于条形的长度可能会被人误解。即使所代表的数值相同，但外围的条形看起来还是会比较长。由于每个条形都必须处于不同的半径，所以只能用角度来判断数值多少。我们的视觉系统比较擅于理解直线，因此笛卡尔条形图是比较数值的更好选择。因此，使用径向条形图通常只是为了美观。
也称为“圆形柱图”或“星图”。这种图表使用同心圆网格来绘制条形图。每个圆圈表示一个数值刻度，而径向分隔线（从中心延伸出来的线）则用作区分不同类别或间隔（如果是直方图）。刻度上较低的数值通常由中心点开始，然后数值会随着每个圆形往外增加，但也可以把任何外圆设为零值，这样里面的内圆就可用来显示负值。条形通常从中心点开始向外延伸，但也可以别处为起点以显示数值范围（如跨度图）。此外，条形也可以如堆叠式条形图般堆叠起来。
子弹图 (Bullet Graph) 能显示表现数据，功能类似于条形图，但加入更多视像元素，提供更多补充信息。子弹图最初由 Stephen Few 开发，用来取代仪表盘上如里程表或时速表这类图形仪表，解决显示信息不足的问题，而且能有效节省空间，更可除掉仪表盘上一些不必要的东西。主要数据值由图表中间主条形的长度所表示，称为“功能度量”(Feature Measure)；而与图表方向垂直的直线标记则称为“比较度量”(Comparative Measure)，用来与功能度量所得数值进行比较。如果主条形长度超越比较度量标记的位置，则代表数据达标。功能度量背后的分段颜色条形用来显示定性范围得分。每种色调（如上面示例中三种不同深度的灰色）表示不同表现范围等级，如欠佳、平均和良好。当使用子弹图时，建议最多使用五个等级。
平行座标图 (Parallel Coordinates Plots) 能显示多变量的数值数据，最适合用来同一时间比较许多变量，并表示它们之间的关系。举个例子：比较具有相同属性的一系列产品（比较不同型号的计算机或汽车规格）。在平行座标图中，每个变量都有自己的轴线，所有轴线彼此平行放置，各自可有不同的刻度和测量单位；或者我们也可以统一处理所有轴线以保持所有刻度间隔均匀。然后我们绘制一系列的直线穿越所有轴线来表示不同数值。轴线排列的顺序可能会影响读者如何理解数据，其中一个原因是相邻变量之间的关系会比非相邻的变量容易进行比较。因此重新排列轴线可以帮助了解不同变量之间的模式或相关性。平行座标图的缺点是容易变得混乱，当数据密集时更加难以辨认。解决这个问题的最好办法是通过一种名为“刷理”的互动技术，突出显示所选定的一条或多条线，同时淡化所有其他线条，让我们能更集中研究感兴趣的部分，并滤除干扰数据。
又称为“蜘蛛图”、“极地图”或“星图”。雷达图 (Radar Chart) 是用来比较多个定量变量的方法，可用于查看哪些变量具有相似数值，或者每个变量中有没有任何异常值。此外，雷达图也可用于查看数据集中哪些变量得分较高/低，是显示性能表现的理想之选。每个变量都具有自己的轴（从中心开始）。所有的轴都以径向排列，彼此之间的距离相等，所有轴都有相同的刻度。轴与轴之间的网格线通常只作指引用途。每个变量数值会画在其所属轴线之上，数据集内的所有变量将连在一起形成一个多边形。
然而，雷达图有一些重大缺点：在一个雷达图中使用多个多边形，会令图表难以阅读，而且相当混乱。特别是如果用颜色填满多边形，表面的多边形会覆盖着下面的其他多边形。此外，过多变量也会导致出现太多的轴线，使图表难以阅读和变得复杂，故雷达图只能保持简单，因而限制了可用变量的数量。雷达图的另一缺点是它未能很有效地比较每个变量的数值。即使借助蜘蛛网般的网格指引，在直线轴上比较数值始终较为容易。
也称为“象形统计图”。使用图案来显示数据量的象形图 (Pictogram Chart) 让人可以更全面地了解小型数据集，而且所用图案通常切合数据主题或类别，例如关于人口数据的图表将使用人物图案。每个图案可以表示一个单位或任何数量或单位（例如每个图案表示 10 个）。通过了解列或行中的图案多少，我们可以对数据集的每个类别进行比较。使用图案能克服语言、文化和教育水平方面的差异，是更具代表性的数据显示方法。举个例子，如果数据是“5 辆车”，图中便会显示 5 个汽车图案。使用象形图时有两点要避免：用于大型数据集，令人难以计数。只显示部分图案，令人混淆它们到底代表什么。
也称为“范围条形/柱形图”或“浮动条形图”。用来显示数据集内最小值和最大值之间的范围，适合用来比较范围，尤其是已分类的范围。跨度图只集中显示极端数值，不提供任何关于最小值和最大值之间的数值、整体平均值或数据分布等其他信息。
点阵图表 (Dot Matrix Chart) 以点为单位显示离散数据，每种颜色的点表示一个特定类别，并以矩阵形式组合在一起。适合用来快速检视数据集中不同类别的分布和比例，并与其他数据集的分布和比例进行比较，让人更容易找出当中模式。当只有一个变量/类别时（所有点都是相同颜色），点阵图表相等于比例面积图。
又称为“极面积图”。统计学家和医学改革家佛罗伦萨‧南丁格尔 (Florence Nightingale) 曾在克里米亚战争期间使用这种图表传达士兵身亡情况，故得名。南丁格尔玫瑰图 (Nightingale Rose Charts) 绘制于极座标系之上。每个数据类别或间隔在径向图上划分为相等分段，每个分段从中心延伸多远（与其所代表的数值成正比）取决于极座标轴线。因此，从极座标中心延伸出来的每一环可以当作标尺使用，用来表示分段大小并代表较高的数值。在南丁格尔玫瑰图中，代表数值的是分段面积，而不是其半径。南丁格尔玫瑰图的主要缺点在于面积较大的外围部分会更加引人注目，这跟数值的增量成反比。
非常适合用来比较数值和显示比例（尺寸、数量等），以便快速全面地了解数据的相对大小，而无需使用刻度。这种图表的缺点在于使用面积图难以得出估值，也就是说它们几乎只能用于通信目的，而不能作分析用途。虽然比例面积图通常使用正方形或圆形，但其实也可以使用任何形状，只要所使用的形状面积是表示数据即可。这种面积图的常见技术错误是，使用长度来确定形状大小，而非计算形状中的空间面积，导致数值出现指数级的增长和减少。
也称为“标签云图”。通过使每个字的大小与其出现频率成正比，显示不同单词在给定文本中的出现频率，然后将所有的字词排在一起，形成云状图案，也可以任何格式排列：水平线、垂直列或其他形状。字云图 (Word Cloud) 也可用于显示获分配元数据的单词。举个例子，我们把世界各地所有国家的名称加到字云中，再将人口数量分配给每个国家，以确定其名称的字体大小。在字云图上使用颜色通常都是毫无意义的，主要是为了美观，但我们可以用颜色对单词进行分类或显示另一个数据变量。字云图通常用于网站或博客上，以描述关键字或标签使用，也可用来比较两个不同的文本。
虽然简单易懂，但字云图有着一些重大缺点：较长的字词会更引人注意。字母含有很多升部/降部的单词可能会更受人关注。分析精度不足，较常是为了美观。
饼形图 (Pie Chart) 获广泛应用于项目演示和办公室，把一个圆圈划分成不同比例的分段，以展示各个类别之间的比例和百分比。每个圆弧的长度代表每个类别的所占比例，而全圆则表示所有数据的总和，相等于 100%。
饼形图适合用来快速展示数据比例分布，但主要缺点是：
尽管如此，如要在单一饼形图中比较给定类别在整体中所占的比例，这仍是有效之选。
圆环图 (Donut Chart) 基本上就是饼形图，只是中间的部分被切掉。然而，圆环图比饼形图略有优势，因为后者不时被人批评，说它只将重点放在不同部分彼此或相对于整体的大小关系，但当与其他饼形图作整体比较时，却不能显示出任何变化。圆环图算是解决了这个问题的其中一部分，让人不再只看“饼”的面积，反面更重视总体数值的变化：专注于阅读弧线的长度，而不是比较“饼与饼”之间的比例不同。另外，圆环图中间的空白处更可以用来显示其他信息，因此更能节省空间。
桑基图 (Sankey Diagram) 用来显示流向和数量（彼此之间的比例）。箭头或线的宽度用于显示大小，因此箭头越大，流量也越大。在每个流程阶段中，流向箭头或线可以组合在一起，或者往不同路径各自分开。我们可用不同颜色来区分图表中的不同类别，或表示从一个阶段到另一个阶段的转换。桑基图通常用于显示能量、金钱或材料数据的转移，但也可用于显示任何独立系统的流程。
热图 (Heatmap) 通过色彩变化来显示数据。当应用在表格时，热图适合用来交叉检查多变量的数据，方法是把变量放置于行和列中，再将表格内的不同单元格进行着色。热图适用于显示多个变量之间的差异；显示当中任何模式；显示是否有彼此相似的变量；以及检测彼此之间是否存在任何相关性。通常所有水平行都同属一个类别（在左侧或右侧显示的标签）；而所有垂直列将被分配为另一类别（在顶部或底部显示的标签）。每行或每列会再被分成子类别，全都以矩阵形式相互匹配。表格中的单元格内有不同颜色编码的分类数据，或是基于颜色标度的数字数据。单元格内的数据是基于相连行和列中两个变量之间的关系。我们需要图解来帮助阅读热图。分类数据采用不同颜色编码表示，而数字数据则需要一个颜色标度（从一种颜色转到另一种颜色）来帮忙表示高低值之间的差异。我们可以使用一系列的纯色来表示多个范围的数值（0-10、11-20、21-30等），或者可以将两种或多种颜色混合在一起，使用渐变标度来表示单一范围（例如 0 - 100）。由于热图依赖颜色来表达数值，它比较适合用来显示广泛数值数据，因为要准确地指出色调之间的差异始终有难度，也较难从中提取特定数据点（除非在单元格中加入原始数据）。如果将其中一行/列设为时间间隔，热图也可用于显示数据随时间的变化。其中一个例子就是使用热图来比较全年多个城市的温度变化，看看最热或最冷的地方在哪儿：我们可以把要比较的城市在水平行中列出，而垂直列则是月份，然后在单元格内填上温度值。
也称为“集合图”。文氏图 (Venn Diagram) 显示集与集之间所有可能存在的逻辑关系，每个集通常以一个圆圈表示。每个集都是一组具有共同之处的物件或数据。当多个圆圈（集）相互重迭时，称为交集 (intersection)，里面的数据同时具有重迭集中的所有属性。这里只显示了由 2 个数据集组成的文氏图，但也有 3、4、5、6 甚至 7 个数据集相互重迭的例子。
弧线图 (Arc Diagram) 是二维双轴图表以外另一种数据表达方式。在弧线图中，节点 (Nodes) 将沿着 X轴（一维轴）放置，然后再利用弧线表示节点与节点之间的连接关系。每条弧线的粗幼度表示源节点和目标节点之间的频率。弧线图适合用来查找数据共同出现的情况。弧线图的缺点：不能如其他双轴图表般清楚显示节点之间的结构和连接，而且过多连接也会使图表难于阅读。
弦图 (Chord Diagram) 可以显示不同实体之间的相互关系和彼此共享的一些共通之处，因此这种图表非常适合用来比较数据集或不同数据组之间的相似性。节点围绕着圆周分布，点与点之间以弧线或贝塞尔曲线彼此连接以显示当中关系，然后再给每个连接分配数值（通过每个圆弧的大小比例表示）。此外，也可以用颜色将数据分成不同类别，有助于进行比较和区分。弦图的缺点是过于混乱，尤其是当要显示太多连接的时候。
非彩带弦图 (Non-ribbon Chord Diagram) 是弦图的一个精简版本，仅显示节点和连接线，更加强调数据之间的连接关系。
也称为“网络地图”或“节点链路图”。这种图表使用节点/顶点和连接线来显示事物之间的连接关系，并帮助阐明一组实体之间的关系类型。这些节点通常是圆点或小圆圈，但也可以使用图标。节点之间的连接关系通常以简单的线条表示，但在某些网络图中，并非所有节点和连接都有相同属性，故可借此显示其他变量，例如通过节点大小或连接线的粗幼来表示其与数值之间的比例。通过描绘出链路连接系统、查找任何节点集群、节点连接的密度或图表布局，网络图可以用来解释各种网络结构。两种主要网络图分别为“不定向”和“定向”网络图；不定向网络图仅显示实体之间的连接，而定向网络图则可显示连接是单向还是双向（通过小箭头）。网络图数据容量有限，并且当节点太多时会形成类似“毛球”的图案，使人难以阅读。
后续内容，请查看 一图胜千言：数据可视化不完全总结（二）
‘伍’ 简述什么是数据可视化
“数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。它是一个处于不断演变之中的概念，其边界在不断地扩大。主要指的是技术上较为高级的技术方法，而这些技术方法允许利用图形、图像处理、计算机视觉以及用户界面，通过表达、建模以及对立体、表面、属性以及动画的显示，对数据加以可视化解释。
发展趋势
现在国内就有公司走的是这个路线。国内的图扑软件hightopo就是其中一个。
在学术界，现在可视化的期刊越来越多了。亚洲的pacific vis, 北美的transition vis, 欧洲的 Europ Vis。这些都是常见的还不算上顶级的期刊。可视化在学术界的运用已近变成香饽饽了。现在谁做研究出来的数据都是好几个GB的，需要有工具和专门的人员去做一个可视化来理解这些数据，而且很多二流的科研文章加上可视化，就可以投一流的期刊。
可视化并不是单独的一门学科，它是对于计算机图形学和统计学等一些学科的更深层次的延伸，比如说社交网络的图谱应用到了很多图形学的边算法，当然，很多时候是和数据挖掘关系最紧密，因为前者是为后者提供数据，后者是为了更好的展现数据。
数据可视化是和数据挖掘不可分割的，可视化作者想要表达的侧重点对于可视化的传达结果是有直接关联的。也就是说，当数据本身的特点与规律并不明显的时候，你需要进行大量的测试与研究来探寻出数据的规律，之后才能传达出正确而且有规律可循的可视化图案。
举个简单的hightopo大型风力发电 可视化案例，或许大家就能理解可视化数据。
依托于大数据技术以及对大型风力发电机整体数据挖掘分析，形成了风机远程集中监控系统。在可视化界面中能够看到，风机对环境的监控、现场风速、风向的实时数据，以及设备运行的具体情况。并且提供详细统计参数，例如年发电量、总功率、负荷率等数据，能灵活的满足用户的个人定制化需求，从而实现管理者对风电场的智能管控。
通过主面板可查看线框模式下的风机。可自由点选查看各个部件系统的运行状态，进行全生命周期的智慧运维。及时监测风电机组的健康状况，智能诊断风机故障并提出预警。并定期进行健康体检服务，将有效的降低风机故障发生和维修成本。
对电厂来讲，针对生产过程中各种参数的监控，毫无疑问是确保安全高效运行的必要手段。这里将整个风力发电机的发电工艺直观的展现出来，对接监测过程中的各种数据，并转换为可运行的程序。通过对工艺流程的全面监控来确保电厂安全生产。
更多资料
图扑软件（Hightopo）是由厦门图扑软件科技有限公司独立自主研发，基于HTML5标准技术的Web前端2D和3D图形界面开发框架。非常适用于实时监控系统的界面呈现，广泛应用于电信网络拓扑和设备管理，以及电力、燃气等工业自动化 (HMI/SCADA) 领域。Hightopo提供了一套独特的 WebGL 层抽象，将 Model–View–Presenter (MVP) 的设计模型延伸应用到了 3D 图形领域。使用 Hightopo 您可更关注于业务逻辑功能，不必将精力投入复杂 3D 渲染和数学等非业务核心的技术细节。
‘陆’ 想问下数据可视化的主要作用或者意义在哪儿
什么是数据可视化
数据可视化利用图形、图像处理、计算机视觉、以及用户界面，通过表达、建模以及对表面、立体、属性和动画的显示，对数据加以可视化解释。
作用
利用物联网和传感器收集的数据，对电力设备和网线进行实时监控并分析产生数据。采用3D可视化系统，提供更接近现实设备的画面，易于用户接受，提升对设备的辨识度。可以让用户洞悉整个系统同时，还可以观测到部分细节。兼顾了整体与局部，提供了丰富的交互体验。并且在成熟的 5G 技术支持下，因其大于 4G 数倍的带宽，快 4G 百倍的传输速率能更好的让 hightopo 轻量可视化在浏览器或移动端上实现远程可视化监控。
(6)前端数据可视化有什么特点扩展阅读
图扑软件（Hightopo）是由厦门图扑软件科技有限公司独立自主研发，基于HTML5标准技术的Web前端2D和3D图形界面开发框架。非常适用于实时监控系统的界面呈现，广泛应用于电信网络拓扑和设备管理，以及电力、燃气等工业自动化 (HMI/SCADA) 领域。
Hightopo提供了一套独特的 WebGL 层抽象，将 Model–View–Presenter (MVP) 的设计模型延伸应用到了 3D 图形领域。使用 Hightopo 您可更关注于业务逻辑功能，不必将精力投入复杂 3D 渲染和数学等非业务核心的技术细节。
多年来数百个工业互联网可视化项目实施经验形成了一整套实践证明的高效开发流程和生态体系，可快速实现现代化的、高性能的、跨平台桌面Mouse/移动Touch/虚拟现实VR图形展示效果及交互体验。
‘柒’ 前端需要会 数据可视化吗 知乎
当然这些都已经有了很成熟的前端解决方案，但是如何融合到一起，我相信你如果做过就知道我在说啥了…
对应的一套后端查询体系我们的架构是nodejs做的，dba和数据工程师负责对接我们mysql的视图，保证我们的查询简单化。
对应不同的数据产生对应的pdf，excel，xml，json，表，图都已经做成了一套统一的api。方便复用需求。
至于单页和非单页，我觉得从开发的角度考虑，单页不利于快速产生新的数据展示需求，除了前端和后端都需要额外开发外，速度和人力也是个问题。
非单页是我们采用的，通过nodejs统
‘捌’ 如何设计成功而有价值的数据可视化
[what]什么是数据可视化？
塔夫特所说，“图形表现数据。实际上比传统的统计分析法更加精确和有启发性。”对于广大的编辑、设计师、运营分析师、大数据研究者等等都需要从不同维度、不同层面、不同粒度的数据处理统计中，借助图表和信息图的方式为用户（只获得信息）、阅读者（消费信息）及管理者（利用信息进行管理和决策）呈现不同于表格式的分析结果。数据可视化技术综合运用计算机图形学、图像、人机交互等，将采集、清洗、转换、处理过的符合标准和规范的数据映射为可识别的图形、图像、动画甚至视频，并允许用户与数据可视化进行交互和分析。而任何形式的数据可视化都会由丰富的内容、引人注意的视觉效果、精细的制作三个要素组成，概括起来就是新颖而有趣、充实而高效、美感且悦目三个特征。
[why]为什么要进行数据可视化？
无论是哪种职业和应用场景，数据可视化都有一个共同的目的，那就是准确而高效、精简而全面地传递信息和知识。可视化能将不可见的数据现象转化为可见的图形符号，能将错综复杂、看起来没法解释和关联的数据，建立起联系和关联，发现规律和特征，获得更有商业价值的洞见和价值。并且利用合适的图表直截了当且清晰而直观地表达出来，实现数据自我解释、让数据说话的目的。而人类右脑记忆图像的速度比左脑记忆抽象的文字快100万倍。因此，数据可视化能够加深和强化受众对于数据的理解和记忆。
[how] 如何实现可靠的数据可视化
数据可视化包括数据的采集、分析、治理、管理、挖掘在内的一系列复杂数据处理，然后由设计师设计一种表现形式，或许是二维图表、三维立体视图，不管是什么样的信息图，最后由前端工程师创建对应的可视化算法及前端渲染和展现的实现。如果仅仅是能够将数据转化成漂亮的图表，设计出固定维度、不同式样的图表来解释你的观点，并不说明这样的结局就足够好。这只是一个简单的开始，只是一个美好愿望的萌芽。如果要成功报告结果，将你所分析的度量和数据有效地转化为有商业价值的见解，使其能够为基于事实所做的决策提供支持，那么还需要做更多的功课。
色彩提升信息可视化的视觉效果。在信息可视化通过造型元素明确传达信息及叙述的基础上，把握好视觉元素中色彩的运用，使图形变得更加生动、有趣，信息表达得更加准确和直观。色彩可以帮助人们对信息进行深入分类，强调和淡化、生动而有趣的可视化作品的表现形式，常常给受众带来视觉效果上的享受。当然，视觉效果要将企业品牌的色调融合进去，和企业的品牌文化保持高度的一致，这是一个最基本的常识。比如，如果企业的品牌色调比较热衷红色，你设计的可视化效果，就要有意识地朝着这个基调靠拢。但没有必要吻合，因为红色的可视化效果，通常都包含警示的韵味，所以，红色适合做预警、提醒和突出信息的功能。
排版布局增强信息可视化的叙事性。我有酒，你有故事吗？排版布局四大基本原则：
（1）对比（Contrast）： 如果两个项不完全相同，就应当使之不同，而且应当是截然不同。
（2）重复（Repetition）：设计的某些方面在整个作品中重复。
（3）对齐（Alignment）：任何元素都不能在页面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系。
（4）亲密性（Proximity）：将相关的项组织在一起，使它们的物理位置相互靠近相关的项将被看作凝聚为一体的一个组。
动态增加信息可视化的视觉体验。在信息可视化的视觉表达中，动态地将相互分离的各种信息传播形式有机地融合在一起，进行有关联、有节奏的信息处理、传输和实现。最终的目的是，为了实现数据之间的联动，解释数据表现之间驱动和联系的关系。通过图表样式和色彩的运动，满足受众的视觉感受，同时将信息内容更加深刻而精简地传达给阅读者，使整个信息传达的过程更加轻松便捷。对于数据可视化有诸多工具，如：ECharts、iCharts、D3js、Flot、Raphaël等功能都十分强大，但对于非专业可视化而又经常与图表打交道的职场人士来说，一款轻便易学而又实用的可视化软件则显得十分重要。比如cognos、tebleue等。如果需要展现的数据结构不是特别复杂，而又要把数据展现的绚丽多彩，而且具有交互性，那么水晶易表是不二之选。
1．谁是你的阅读者？
无论你是否在做一份传统的报表还是新式的信息图，首先问问自己有哪些阅读者看到这份报告？他们对将要讨论的事项了解多少？他们需要什么？、还有，他们会如何利用你要展示的信息和数据呢？而我在 《一份靠谱的数据分析报告都有什么套路？》 里讲过，明确清晰的分析目标和方法会有多重要，因为只有明确分析目标，才能有一个良好的驱动过程。无论是目标驱动还是分析过程驱动，后续的数据分析工作和分析报告里所要呈现的全部内容事项都是紧紧围绕着这个目标主题而服务的。
2．规划数据可视化方案
数据可视化方案，是一定是能够解决用户特定问题的。既然是能够解决用户特定的问题，那么这样的高度，是在基于你在深入地理解了这些数据的现象和本质的基础之上。简单来说，就是你的可视化方案，不仅懂得并且能够很好地解释数据分析的结论、信息和知识。并且管理者能够沿着你规划的可视化路径能够迅速地找到和发现决策之道。
举例来说，当企业的业绩不达标时（企业的业绩是否达标，关系到企业最关键的利益和存亡。）可视化方案的设计路径应该是这样的：
Step1，从整体运营出发，明确有哪些关键因素会影响成交和业绩。
比如：有效名单、demo品质、客服服务、产品属性等，相应地去看这些关键因素对应的KPI的表现，对整体的业绩来讲，这些因素都会是驱动因素，这些因素对应的KPI都会是对STV有直接驱动和影响作用的。这些驱动数据的可视化是基础，也是寻找解决方案最终的出发点和落脚点。因为，这些数据的表现，是关乎运营成功与否的最直接视图。
Step2，对关键因素深入分析确定是什么因素导致了业绩没达成，发现和挖掘导致业绩未达标的根本原因和问题。
比如：
1、对比分析，逐一观测201601月-201612月全部关键因素对应的KPI的表现，对比成交业绩最高的月份和成交业绩最差月份的关键因素对应的KPI差异在哪里，能够快速定位出哪些方面、哪些因素导致业绩未达标。然后能够有针对性地驱动和帮助业务部门去改善。
2、追踪对成交和业绩有驱动和改善的行动方案的落地和实施进度，存在什么样的问题，是否存在行动方案的执行不力影响了业绩达标。
Step3，针对这些问题因素，有的放矢地去做改善和探索提升业绩之道。
否则，设计再商业绚丽的可视化图表，如果不能快速地得到信息和商业决策建议和方案就毫无意义。可视化仅仅成了虚假和欺骗，华丽而不务实的结果。基于准备好的全部的这些问题所得出的答案，就要开始定制你的数据可视化方案以满足每个决策者的特定要求。数据可视化始终都应该是为其受众专门定制的，这样的报告里只应包括受众需要知道的信息，且应将这些信息置于和他们有关并对他们有意义的背景下。
3．给数据可视化一个清晰的标题。
当你的报告像一份报纸、杂志的新闻一样。从这个标题，就能给阅读者强烈的冲击。一个清晰的标题是能够很好地阐释报告和故事的主题，是对整个报告和故事概括的信息。当然，并不是鼓励运营分析人员去做“标题党”。好的标题，既不要模棱两可，也不要画蛇添足，只要解释清楚图表即可。这有助于帮受众直接进入主题。这样能让读者大致浏览文件，并能快速抓住核心所在。尽量让你的标题突出。
4．将数据可视化和你的策略、方案联系起来
如果数据可视化的目的在于介绍能解决具体的、可衡量的、可执行的、有相关性和时效性问题的数据，那就在开场白里加上这些问题。稍后再和你的策略连接起来以理清这些数据的定位，因此，读者便能立刻明白可视化数据的相关性和价值。最终，他们便能更好地参与进来，并能够更明智地利用这些信息。数据可视化，最终时为了企业良好的运营而服务的，这是它的商业价值。如果你不关注企业的战略和行动方案，很难建立起具有联动价值的信息图。比如，企业执行的行动方案，通常是为了达成和实现企业的战略目标，通过这样的手段实现精益管理和精益运营。所以，可视化的解决方案要能够做到，行动方案对战略目标的驱动效果、个体、团队对部门整体指标、KPI的驱动和影响效果。只有建立起来具有联系的信息视图，才会获得有价值的数据可视化。
5．明智地选择你的展示图表。
不管使用哪一类图表，bar图、折线图、雷达图等等，每一种图表都有它自身的优点和局限性。你无法找到完美的可视化图表。但你可以通过尝试混合展现方式让可视化表现再人性化一点点。所以的可视化效果，都应该尽可能简单精准地传达讯息。这就意味着：不论有多新潮、多好看或者多绚丽，这都不是设计数据可视化的初衷。诚然，我们在持续地并且永不满足地追求数据之美。但最佳的平衡点在于，用合适的数据可视化开阐释恰到好处的信息和知识的价值之美。
• 只用有关联能传达重要信息的且为你的受众所需要的图形。
•无需填满页面的所有空白——太多杂乱的内容只会干扰对重要信息的接收，会让人太难记住，又太容易忽略。
• 恰当运用色彩，增加信息深度。同时要注意有些色彩具备潜在含义。举例来说，红色被认为是代表警告或危险的颜色。适合预警额。
• 不要使用太多不同类的图表、表格和图形。如果需要对比各种图表，要确保你阐述数据时使用的是同类的图表，这样才能便于互相比较。
6．在恰当处备注文字说明
文字说明有助于用语言解释数据，并能在情境化图表的同时增加内容的深度。数字和表格或许仅能提供快照，而文字说明则让人对关键处了解更多，加以评论并强调其内涵。引导观看者去思考图形的主题，而不是方法论、图形设计、图形生成或其他东西。
• 避免歪曲数据原本的意图。
• 让庞大的数据集连贯一致。
• 吸引读者将不同的数据片段进行比对和比较，突出重点和优劣。
• 主旨要相当明确：描述、挖掘、作表、可视化自我解读。
‘玖’ ECharts 有哪些基本特性
ECharts 包含以下特性：
丰富的可视化类型: 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
多种数据格式无需转换直接使用: 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，此外还支持输入 TypedArray 格式的数据。
千万数据的前端展现: 通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量。
移动端优化: 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。
多渲染方案，跨平台使用: 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。
深度的交互式数据探索: 提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。
多维数据的支持以及丰富的视觉编码手段: 对于传统的散点图等，传入的数据也可以是多个维度的。
动态数据: 数据的改变驱动图表展现的改变。
绚丽的特效: 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。
通过 GL 实现更多更强大绚丽的三维可视化: 在 VR，大屏场景里实现三维的可视化效果。
无障碍访问（4.0+）: 支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问！