前言数据可视化数据可视化的本质是将数据转化为视觉代码。可视化擅长探索数据、科学洞察、交流和教育。可视化和统计之间既有区别又有联系。不同的是前者不需要明确问题，而后者研究一个具体的问题；联系在于伙伴关系。可视化通过视觉编码吸引观众的注意力，然后将数据传递给观察者，并通过计算机等媒介对数据进行交互探索和分析。好的视觉编码会充分利用人类与生俱来的前意识处理能力，即对空间、颜色、形状等信息的并行处理。但几乎所有信息都太多了，无法在静态图形中合理显示，因此设计不仅仅是决定如何显示某些内容，而是根据我们认为对想象中的读者重要的内容以及不显示的内容来决定显示什么.使用计算机，我们根据读者的兴趣定制图形。在设计交互时，我们参考本·施耐德曼（BenShneiderman）[1]提出了一个很好的人机交互指南：概览（OverviewFirst）、缩放和过滤（ZoomandFilter）和按需详细信息（Detailson要求）。第一个概述是图形的初始形式。它的目的不是展示一切，而是提供所有数据的“宏观”视图；缩放和过滤是剔除显示内容以关注感兴趣主题的方法；按需提供的详细信息使读者能够从图表中提取准确的信息价值。机器学习可视化数据可视化在机器学习学科中的应用称为机器学习可视化。根据不同用户群体在不同阶段的使用数据，大致可以分为四类：训练数据（TrainingData）、模型性能（ModelPerformance）、可解释性+模型检验和高维数据。我们通过数据可视化将模式暴露在我们的眼前。可视化工具使用机器学习为我们提取模式，帮助找到更深层次的模式，并为我们提供导航数据的新方法。机器学习提取的模式以特征向量的形式构成高维数据。EmbeddingProjector[2]是一个交互式可视化和高维数据分析的工具。它提供了四种数据归约方法，对于可视化高维数据非常有用。Dimensionality（数据降维）方法、UMAP[3]、t-SNE[4]、PCA和自定义线性投影[5]（CustomLinearProjections）。UMAP是一种基于流形学习技术和拓扑数据分析思想的降维算法。它为近似流形学习和降维提供了一个非常通用的框架，但也有具体的实现；t-SNE，可用于探索局部邻居和发现聚类；PCA，它通常可以有效地探索嵌入结构的内在特性，揭示数据中最具影响力的维度；自定义线性投影，可以帮助发现数据集中有意义的方向；问题与挑战在机器学习应用场景中，我们遇到了一系列的挑战：(1)研究对象具有不确定性，不可能事先设计出一张能够清晰表达所有内容的静态图片，当然也没有必要这样做。（2）目前，集团生态中缺乏高维数据可视化相关建设。该组的G2[6]是一套基于图文法理论的可视化底层引擎。它以数据为驱动，提供图文法和交互文法。它非常易于使用和可扩展。G2及相关生态关注点，让用户可以通过一条语句使用Canvas或SVG构建各种交互式统计图表，而无需关注图表各种繁琐的实现细节。从G24.0版本开始，G2及相关生态更加注重单体统计图表的可视化。机器学习场景除了关注特征空间的分布，还关注多个特征子空间的对比分析和特征时空分布的对比分析。当我们探索未知的、用于探索的高级可视化语法时，例如Vega-Lite[7]可以帮助快速分析数据并创建一系列富有表现力的可视化，但Vega-Lite无法利用现有的可视化功能群组。(3)单元可视化的局限性。当数据量很大时，每个数据项在视觉编码时都有唯一的视觉标记，会造成性能问题；缺乏必要的交互支持。框架设计针对上述挑战，我们采用可视化结合人机交互的方式来解决研究对象的不确定性。对于高维数据空间可视化和子空间比较分析，我们使用多视图可视化技术。最后，我们提供了一个具有高级语法的可视化分析框架，可以直观地表达可视化设计空间，支持多数据、多属性、多视图的高维海量数据可视化分析，覆盖对比分析场景如时间序列和地理空间。数据，包含多行的数据表，每行包含多个列或多个属性，为了便于数据处理，数据一般采用扁平结构；Containers，一个容器是一个几何抽象，包括一个Group将被放置的位置和Areabin，选择你感兴趣的属性，对该属性进行bin操作布局，自定义计算可视化元素或分组位置信息Groups，行数据的子集，Groups也可以是嵌套类型，Groups包括其他GroupsCells，这些GroupsCells是与数据相关的一行相关Container-specific实例Unit的集合，一行数据的图形表示。它们可以具有视觉属性，例如颜色、形状、大小（相对于外围单元格）和不透明度视图，视图是数据表的特定可视化；它可以链接与同一数据的其他视图交互，在整个数据可视化管道中，在数据层面进行过滤和排序操作；bin操作属性的选择；布局方法的选择；选择视觉编码；视觉单元的选择、提示、Hover等交互方式，甚至视图之间的联动分析动画、视觉元素的添加、更新、删除阶段动画关键步骤的原始数据为了更好的解释这个框架，我们分析来自特定的业务数据。实际数据以数组的形式提供，数组中的一条记录是一个实体描述，包括字段基本信息（base_info）、选择（selection）、特征（feats）、细节（details）。经过多次讨论确定的可视化方案采用多视图可视化技术，支持不同实体特征数据的纵向对比，特征数据按时间降序排列。//业务数据[//实体描述{//基本信息basic_info:{"id":"1",//Groupid...},selection:{...},//实体特征空间feats:{"feature_1":0,//布尔类型"feature_2":1,"feature_3":1,"feature_4":0,"feature_5":1,"feature_6":0,"feature_7":1,"feature_8":0,"feature_9":0,"feature_10":1,"feature_11":104,//numbertype"feature_12":104},details:{...},},...]//endAdvanced语法配置{width:600,height:200,margin:{top:10,right:30,bottom:30,left:100,},autoFit:true,//如果设置为false，需要手动设置宽高layouts:[{name:'layout1',type:'gridxy',aspect_ratio:'fillY',//layoutalign:'TB',//toptobottomsubgroup:{//subspacetype:'groupby',//bin｜groupby｜flattenkey:'basic_info.id',//按ID聚类},size:{type:'count',//count计数，根据子空间元素个数绘制大小},sort:null,//子空间元素排序方法padding:{//布局paddingtop:0,left:0,bottom:0,right:0,},margin:{//布局边距top:0,left:0,bottom:0,right:0,},box:{//boxstylefill:'white',stroke:'gray','stroke-width':1,opacity:0.5,},},{name:'layout2',type:'gridxy',subgroup:{type:'flatten',//平面布局key:'feats',//feature},aspect_ratio:'fillX',size:{type:'count',},align:'LR',//从左到右interactions:[],//interactionpadding:{//paddingtop:5,left:5,bottom:5,right:5,},margin:{//margintop:5,left:5,bottom:5,right:5,},box:{//boxstylefill:'white',stroke:'gray','stroke-width':1,opacity:0.5,}，}，]，标记：{shape:'rect',//单位形状isColorScaleShared:true,size:{//根据单位形状确定type:'uniform',//uniformsizewidth:20,//rectwidthheight:20,//rectheightrx:2,//rxry:2,//ry},},filters:[//过滤字段交叉处理'feature_1','feature_2','feature_3','feature_4','feature_5','feature_6','feature_7','feature_8','feature_9','feature_10','feature_11','feature_12',],chart:undefined,//使用自定义图表，不指定图表名称};结合下图4，首先从根容器开始，里面包含了所有的数据；然后根据实体数据中的基本信息-ID进行分组，根据元素个数和长度确定子容器的大小，布局方式为从上到下；然后根据实体数据中的特征属性，大小相等的方式，从左到右布局；lastdraworderMulti-viewvisualizationAdvancedsyntaxparsing为了生成目标可视化，我们的语法构建了一个根容器并递归地应用单元格可视化操作，直到所有容器都是单元格。换句话说，渲染变成了树的遍历，其中根容器是树的根节点，单元格容器是叶节点。一旦生成了所有单元格，布局就完成了，可以绘制单元格可视化图。在语法解析之前，我们首先构建根容器RootContainer，包括原始数据、前驱节点、标签、可视化空间（宽度、高度、填充和位置）等信息。layouts配置布局会被解析成层级嵌套结构，然后从RootContainer生成嵌套结构布局，生成各自层级下的子容器，ChildrenContainer。应用案例单用户订单热图多用户订单热图的交互行为支持点击、mouseover、mouseout等交互方式。其中click获取所有订单信息，mouseover和mouseout高亮和取消当前焦点订单的高亮。此外，还支持属性特征过滤。当用户只关注特征1和特征2时，效果如下图所示。参考资料[1]TheEyesHaveIt:ATaskbyDataTypeTaxonomyforInformationVisualizations[2]https://projector.tensorflow.org/[3]https://umap-learn.readthedocs.io/en/latest/how_umap_works.html[4]https://distill.pub/2016/misread-tsne/[5][使用线性变换的标记数据可视化]()[6]https://g2.antv.vision/zh/docs/manual/about-g2[7]https://vega.github.io/vega-lite/作者：ES2049/李老师的文章可以随意转载，但请保留原文链接。如果你有热情，非常欢迎你加入ES2049Studio。请将简历发送至caijun.hcj@alibaba-inc.com
