这是一本送给大家的数据可视化开发入门指南。介绍了可视化要解决的问题和可以直接使用的工具。我将从以下几个方面给大家介绍一下。同时以阿里/蚂蚁的可视化团队和资源为例：什么是数据可视化？如何进行数据可视化？数据可视化场景及工具数据可视化过程中的常见问题什么是数据可视化数据可视化研究是什么，如何将数据转化为交互式图形或图像，以视觉可感知的方式表达，增强人们的认知能力，达到发现的目的、解释、分析、探索、决策和学习。数据可视化（DataVisualization）和信息可视化（Infographics）是两个相似的专业术语。狭义的数据可视化是指以统计图表的形式呈现数据，而信息可视化是指非数值信息的可视化。前者用于传达信息，后者用于表达抽象或复杂的概念、技术和信息。从广义上讲，数据可视化是数据可视化、信息可视化、科学可视化等诸多领域的总称。——《数据可视化之美》广义数据可视化涉及信息技术、自然科学、统计分析、图形学、交互、地理信息等学科。科学可视化、信息可视化和可视化分析这三个学科通常被认为是可视化的三大分支。这三个分支融合形成的新学科“数据可视化”是可视化研究领域的一个新起点。——《数据可视化》这里简单介绍一下科学可视化、信息可视化和可视化分析：科学可视化（ScientificVisualization）是可视化领域最早、最成熟的跨学科研究和应用领域。面向的领域主要是自然科学，如物理学、化学、气象与气候、航天、医学、生物学等学科。这些学科通常需要解释、操作和处理数据和模型，旨在发现模式和特征、关系和异常。信息可视化信息可视化的对象是抽象的数据集合，起源于统计图形，与信息图形、视觉设计等现代技术有关。它的表现形式通常在二维空间，因此关键问题是在有限的展示空间内以直观的方式传达大量的抽象信息。与科学可视化相比，科学可视化处理的数据具有天然的几何结构（如磁感应线、流体分布等），信息可视化更注重抽象和高维数据。直方图、趋势图、流程图、树状图等是信息可视化最常用的视觉表现形式。这些图形的设计将抽象的数据概念转化为视觉信息。视觉分析视觉分析被定义为一门基于视觉交互的分析推理科学。它集成了图形学、数据挖掘、人机交互等技术。它以可视化交互界面为渠道，将人类的感知和认知能力以可视化的方式融入到数据处理过程中，形成人脑智能与机器智能相辅相成的和谐结合。相互促进，建立螺旋式的信息交流和知识提取通道，完成有效的分析、推理和决策。科学可视化、信息可视化和可视化分析有一些重叠的目标和技术，并且对这些领域之间的界限没有明确的共识。数据可视化的目标数据可视化的本质是通过各种可视化通道将数据映射成图形，从而使用户更快、更准确地理解数据。因此，数据可视化要解决的问题就是如何以直观可观察的方式表达数据。同时需要考虑美观性和可理解性，需要解决展示空间（画布）受限时的覆盖、杂乱、冲突等问题。然后以交互方式查看数据的详细信息。如何进行数据可视化用一张经典的图来说明如何进行数据可视化：数据可视化过程可以分为以下几个步骤：定义要解决的问题确定要展示的数据和数据结构确定维度（字段）要显示的数据确定图表的类型，用于确定图表的交互定义。首先明确一点，数据可视化就是让用户看得懂，看得懂数据。所以在你开始数据可视化之前，你必须定义你想要解决的问题。比如：我想看看最近两周销售额的变化，是增加了还是减少了，是什么原因造成的？您可以从趋势、比较、分布、过程、时序、空间、相关性等角度定义您要解决的问题。确定要显示的数据以进行数据可视化。首先，要有数据。由于画布大小的限制，过多的数据不能直接显示，所以要显示的数据必须判断：我要显示的数据是否已经处理过，是否有空值？是列表数据还是树数据？数据的规模是多少？您要汇总数据吗？是否要分层显示数据？选择不同的字段时需要选择字段，适合的图表类型也不同，在后面的链接中也有所不同。确定要使用的图表类型可以使用的图表类型很多，但是要显示的图表类型要根据要解决的问题、数据的结构、选择的数据维度来确定：如何选择图表类型可以参考：AntV图表使用：https://antvis.github.io/vis/doc/chart/classify/compare.html图表使用指南：https://www.yuque.com/mo-college/chart-usage数据可视化场景及工具目前互联网公司的可视化需求通常有几类：通用报表、移动端图表、大屏可视化、地图编辑&图形分析、地理可视化、通用报表需求。开发过程中面临的85%以上的需求是通用报表需求，可以使用通用图表库来满足日常开发需求。业界常用的图表库有：Highcharts、Echarts、amCharts等。AntV开源了一个基于图形语法的图表库：G2G2具有以下特点：千变万化，自由组合。从数据出发，只需几行代码，即可轻松获得想要的图表展示效果。形象生动，易于实施。基于大量的产品实践，提供绘图引擎、完备的图形语法、专业的设计规范等丰富的交互能力。基于图形语法，它提供了自定义交互的能力。目前阿里集团内部有大量基于G2封装的图表库，针对特定的框架和业务场景进行封装，其中部分开源：阿里巴巴国际UED团队出品的bizcharts、react封装G2，专注电商业务图表可视化，沉淀电商业务线可视化规范。在React项目中实现常用图表和自定义图表。Viser由阿里数据平台技术部出品，支持vue、react、angularjs三种框架。移动端可视化如果你面对的是需要PC端和移动端都兼容的场景，那就用G2，然后适配移动端屏幕，但是如果你使用H5或者移动APP上的小程序开发，那么选择F2F2是一个专注于一款移动端、开箱即用的可视化解决方案，完美支持H5环境，兼容多种环境（node、applet、weex）。完备的图形语法理论，满足您的各种可视化需求。专业的移动设计指南，为您带来最佳的移动图表体验。F2提供了对多平台的支持，阿里集团的其他团队也做了一些封装，比如my-f2就是小程序的封装版本。目前已开源：https://github.com/antvis/my-f2大屏可视化大屏可视化专注于会议会展、业务监控、风险预警、地理信息分析等各类业务的展示.它对图形渲染和视觉设计有很高的要求。目前，阿里巴巴集团内部大屏可视化团队包括：蚂蚁金服图形艺术实验室阿里云DataV团队阿里数据技术与产品部-数据之美大屏几乎成为toB项目的标配，以及应用场景越来越广泛。DiagramEditing&DiagramAnalysis图可视化主要有两大方面：图编辑：用于图建模（ER图、UML图）、流程图、思维导图等，需要用户深度参与关系的创建、编辑和删除场景图分析：用于风控、安全、营销等场景下的关系发现，以及图的一些基本概念的业务解读，如环、关键链路、连通性等。目前主流的开源框架有：jointjs专注于图编辑，包括常用流程图和BPMN图的功能。使用方便，开箱即可使用，但二次开发难度很大。d3.js是一个非常底层的可视化库。图分析场景有大量案例。上手成本高，demo和业务距离比较大。目前AntV已经开源了图可视化方向的基础图框架G6。主要完成以下功能：节点和边的渲染，包括自定义节点和边的事件交互机制，嵌入大量常用的交互常用布局，包括树布局和力引导布局在G6的上层。我们还提供G6-Analyzer和G6-Editor用于图形编辑和图形分析。地理可视化地理数据可视化主要是空间数据域的可视化，主要有三个方面：Infographics：主要用于展示位置相关的报表、信息图表、路径变化等。大屏应用：大屏显示一般以地理数据为载体，如建筑物、道路、轨迹等数据可视化。地理分析应用：这类应用往往是海量地理数据的交互分析、基于用户位置的用户推荐、新收购、激活推广等业务运营系统，或选址、风险监控等系统。AntVG2和L7都提供了地理数据可视化解决方案，其中：G2提供了对通用地理数据图表的支持。L7是更专业的地理数据可视化解决方案。采用WebGL渲染技术，支持海量地理数据可视化分析，支持多线程计算矢量瓦片解决方案。可满足大屏可视化地理分析应用需求。阿里集团的其他地理可视化框架包括：高德菜鸟鸟图Loca常见问题图表误用图表误用是最常见的问题。让我们看看下面的一些场景：示例1：类别太多的场景。下图显示了各省的人口比例。因为这张图的类别太多，出现了介绍中提到的问题。很难清楚地比较每个省份的人口数据占比，所以这种情况下，我们推荐使用水平直方图。示例二：以不同游戏类型的销量对比场景为例。对于表示分类比较的数据，我们应该使用直方图而不是折线图。MobileandPCChartsAntV提供了两种统计图表框架，G2和F2。用户往往同时面对移动端和PC端的业务。这时候，他们就会面临两个框架的选择问题。G2本质上是一个为传统中后端产品设计的图表库。除了一般的报表展示，还提供大量的交互和强大的分析能力；而F2是专门为移动端开发的，最关心的就是代码量，性能，表现力。所以我们有以下建议：如果你的用户主要来自PC端，那么请使用G2，它可以支持更多的图表类型和交互。如果你使用H5，钱包等重度APP的小程序开发，请使用F2。我们在许多移动平台上做了很多兼容性工作。如果你是开发BI分析系统，除了报表功能之外还需要一定的分析能力，请使用G2。如果在监控等开发中需要联动系统，主要用户来自PC端，就用G2。如果您开发的是报表系统，主要用户通过移动端查看图表，请使用F2（也可以在PC端查看）。数据量太大怎么办？我们在前端做的可视化，只能可视化小规模的数据。如果遇到非常大规模的数据，想要可视化，可以选择：数据分层数据聚合数据采样总结这是一篇总结可视化的入门文章，介绍了可视化要解决的问题和可以使用的工具直接使用。对可视化感兴趣的可以关注墨子学院
