关于前端:机器学习可视分析框架设计与实现

前言

数据可视化

数据可视化实质就是将数据转换为视觉编码，可视化善于摸索数据、迷信洞察、交换和教育领域。可视化与统计学有区别又有分割，区别在于前者没有必要明确问题，后者则钻研一个特定的问题；分割在于合作伙伴关系。可视化通过视觉编码吸引观众的注意力，进而将数据传递给观察者，另外通过计算机等媒介交互式摸索剖析数据。好的视觉编码将充分利用 人类天生具备的先意识解决能力 ，即并行处理空间、色彩、形态等信息。然而简直全副太多的信息无奈正当地在一个动态的图形中显示，因而，设计不仅仅是决定如何展现某些货色，而是依据咱们认为对设想中的读者来说重要的货色来决定展现什么和不展现什么。通过计算机，咱们依据读者的趣味按需定制图形。在设计交互时，咱们参考本·施奈德曼 (Ben Shneiderman) [1] 提出一个很好的 人机交互 的指南：概述 （Overview First）、 缩放和过滤 （Zoom and Filter）和 按需提供详细信息（Details on Demand）。首先概览是图形的初始模式。它的目标不是显示所有内容，而是提供所有数据的“宏观”视图；缩放和过滤是剔除显示的内容以关注感兴趣的主题的办法；按需提供的详细信息容许读者从图表中提取精确的值。

机器学习可视化

数据可视化在机器学习学科的利用称为机器学习可视化，依据不同的阶段不同用户群体的是应用数据状况，大抵可分为四类：训练数据 （Training Data）、 模型性能 （Model Performance）、 可解释性 + 模型测验 （Interpretability + Model Inspection）和 高维数据 （High-dimensional Data）。咱们通过数据可视化将模式裸露在眼睛背后，可视化工具利用机器学习为咱们提取模式，帮忙寻找开掘更深层次模式，并为咱们提供导航数据的新办法。机器学习提取的模式以特征向量模式形成高维数据，Embedding Projector [2] 是一款用于交互式可视化和高维数据分析的工具，它提供了四种对可视化高维数据十分有用的 数据降维 （data dimensionality reduction）办法，UMAP [3]、t-SNE [4]、PCA 和自定义线性投影 [5]（Custom Linear Projections)。

• UMAP，是一种基于流形学习技术和拓扑数据分析思维的降维算法。它为迫近流形学习和降维提供了一个十分通用的框架，但也能够提供具体的实现；
• t-SNE，可用于摸索部分近邻值和寻找聚类；
• PCA，通常能够无效地摸索嵌入的外在构造，揭示出数据中最具影响力的维度；
• 自定义线性投影，能够帮忙发现数据集中有意义的方向;

问题与挑战

在机器学习利用场景中，咱们遇到一系列挑战：（1）钻研对象具备不确定性 ，不可能当时设计好一张可能表白分明所有内容的动态图，当然也没有必要这样做。（2） 目前团体生态中短少高维数据可视化相干的建设 ，团体的 G2 [6] 是一套基于图形语法实践的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具备高度的易用性和扩展性。G2 以及相干的生态关注让用户无需关注图表各种繁琐的实现细节，一条语句即可应用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。截止到 G2 4.0 版本来看，G2 以及相干的生态更多的关注 单个统计图表可视化的问题 。机器学习场景除了关注特色空间的散布状况，还关注多个特色子空间比照剖析，特色时空散布比照剖析。当咱们摸索未知时，用于摸索的可视化高级语法，例如 Vega-Lite [7] 能帮忙对数据疾速剖析，创立了一系列富裕表现力的可视化，然而 Vega-Lite 无奈利用团体现有的可视化能力。（3）单元可视化理局限性，当数据量较大，在可视化编码期间，每个数据项都由一个惟一的可视标记，会导致性能问题；短少必要交互反对。

框架设计

针对以上挑战，咱们采纳可视化联合人机交互的形式解决钻研对象的不确定性。针对高维数据空间可视化和子空间比照剖析，咱们采纳多视图可视化技术。最初，咱们提供一种高级语法能直观的表白可视化的设计空间的可视剖析框架，反对高维海量数据的多数据、多属性、多视图可视剖析，涵盖时序、天文空间等比照剖析场景。

• Data，蕴含多行的数据表，每一行蕴含多个列或者多个属性，为了不便解决数据，数据个别采纳扁平的构造；

• Containers，容器是一种几何形象，包含一个 Group 将被搁置的地位和区域

  • bin, 抉择感兴趣的属性，将属性执行 bin 操作
  • layout，自定义计算可视化元素或者分组地位信息
• Groups，行数据的子集，Groups 也能够是嵌套类型，Groups 包含其余的 Groups
• Cells，是与数据集中一行相干的 Container 特定的实例
• Units，一行数据的图形示意。它们能够有视觉属性，例如色彩、形态、大小 (绝对于外围单元格) 和不透明度
• View，视图是数据表的特定可视化; 它能够与同一数据的其余视图链接
• Interaction，贯通这个数据可视化管道中，数据层面过滤、排序操作；bin 操作属性抉择；布局办法的抉择；可视化编码的抉择；可视化单元的选中、提醒、Hover 等交互方式，甚至视图之间的联动剖析
• Animation，可视化元素在增加、更新、删除阶段的动画

关键步骤

原始数据

为了更好的解释本框架，咱们从一个具体的业务数据分析，理论数据以数组的形式提供，数组中一条记录是一条实体形容，包含字段 根底信息 （base_info）、 抉择 （selection）、 特色 （feats）、 详情（details）。通过屡次探讨确定的可视化计划采纳多视图可视化技术，反对纵向比照不同实体的特色数据，特色数据依照工夫降序排列。

// 业务数据
[
  // 一份实体形容
  {
    // 根底信息
    basic_info: {
      "id": "1", // 分组 id
      ...
    },
    selection: {...},
    // 实体特色空间
    feats: {
        "feature_1": 0, // bool 类型
      "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, // 数字类型
      "feature_12": 104
    },
    details:{...},
  },
  ...
]
// end    
      

高级语法配置

{
  width: 600,
  height: 200,
  margin: {
    top: 10,
    right: 30,
    bottom: 30,
    left: 100,
  },
  autoFit: true, // 如果设置 false, 须要手动设置 width 和 height
  layouts: [
    {
      name: 'layout1',
      type: 'gridxy',
      aspect_ratio: 'fillY', // 布局形式
      align: 'TB', // 从上向下
      subgroup: { // 子空间
        type: 'groupby', // bin | groupby | flatten
        key: 'basic_info.id', // 依照 ID 聚类
      },
      size: {type: 'count', // 统计 count，依照子空间元素数量绘制大小},
      sort: null, // 子空间元素排序形式
      padding: { // layout padding
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
      },
      margin: { // layout margin
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
      },
      box: { // box 款式
        fill: 'white',
        stroke: 'gray',
        'stroke-width': 1,
        opacity: 0.5,
      },
    }, {
      name: 'layout2',
      type: 'gridxy',
      subgroup: {
        type: 'flatten', // 平铺布局
        key: 'feats', // 特色
      },
      aspect_ratio: 'fillX',
      size: {type: 'count',},
      align: 'LR', // 自左向右
      interactions: [], // 交互
      padding: { // padding
        top: 5,
        left: 5,
        bottom: 5,
        right: 5,
      },
      margin: { // margin
        top: 5,
        left: 5,
        bottom: 5,
        right: 5,
      },
      box: { // box 款式
        fill: 'white',
        stroke: 'gray',
        'stroke-width': 1,
        opacity: 0.5,
      },
    },
  ],
  mark: {
        shape: 'rect', // 单元形态
        isColorScaleShared: true,
        size: { // 依据单元形态决定
          type: 'uniform', // 对立大小
          width: 20, // rect width
          height: 20, // rect height
          rx: 2, // rx
          ry: 2, // ry
        },
  },
  filters: [ // 过滤字段 cross 解决
    '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, // 采纳自定义 chart，没明确指定图表名称
};

联合下图 4，首先从根容器开始，蕴含所有的数据；而后依照一个实体数据中的 根底信息 -ID分组 ， 子容器大小由依据元素数量长度决定，布局形式从上到下布局；接着依照实体数据中特色属性，大小相等的形式，从左向右布局；最初绘制订单多视图可视化。

高级语法解析

为了生成指标可视化，咱们的语法构建了一个根容器，并递归地利用单元可视化操作，直到所有容器都成为单元。换句话说，出现变成了树的遍历，其中根容器是树的根节点，而单元容器是叶节点。一旦生成了所有的单元，布局就实现了，能够绘制单元可视化。在语法解析之前，咱们先构建根容器 RootContainer，包含原始 data、前驱节点、label、可视化空间 (width、height、padding 和 position) 等信息。layouts 配置布局将解析成层级嵌套构造，而后将嵌套构造布局从 RootContainer，生成各自档次下的子容器 ChilrenContainer。

利用案例

单个用户订单热力求

多个用户订单热力求

交互行为

反对 click, mouseover, mouseout 等交互方式，其中，click 获取全副的订单信息，mouseover 和 mouseout 高亮和勾销以后 focus 订单的高亮。

此外，还反对属性特色过滤，当用户只关注 特色 1 和 特色 2 时，则成果如下图。

参考资料

[1] The Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations
[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] [Visualization of Labeled Data Using Linear Transformations]()
[6] https://g2.antv.vision/zh/docs/manual/about-g2
[7] https://vega.github.io/vega-lite/
​

作者：ES2049 / 李老师

文章可随便转载，但请保留此原文链接。
十分欢送有激情的你退出 ES2049 Studio，简历请发送至 caijun.hcj@alibaba-inc.com