機器學習可視分析框架設計與實現

前言

資料視覺化

資料視覺化本質就是將資料轉換為視覺編碼，視覺化擅長探索資料、科學洞察、交流和教育領域。視覺化與統計學有區別又有聯絡，區別在於前者沒有必要明確問題，後者則研究一個特定的問題；聯絡在於合作伙伴關係。視覺化通過視覺編碼吸引觀眾的注意力，進而將資料傳遞給觀察者，另外通過計算機等媒介互動式探索分析資料。好的視覺編碼將充分利用人類天生具有的先意識處理能力，即並行處理空間、顏色、形狀等資訊。但是幾乎全部太多的資訊無法合理地在一個靜態的圖形中顯示，因此，設計不僅僅是決定如何展示某些東西，而是根據我們認為對想象中的讀者來說重要的東西來決定展示什麼和不展示什麼。通過計算機，我們根據讀者的興趣按需定製圖形。在設計互動時，我們參考本·施奈德曼 (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 嵌入投影（Embedding Projector）

問題與挑戰

在機器學習應用場景中，我們遇到一系列挑戰：（1）研究物件具有不確定性，不可能事先設計好一張能夠表達清楚所有內容的靜態圖，當然也沒有必要這樣做。（2）目前集團生態中缺少高維資料視覺化相關的建設，集團的 G2 [6]是一套基於圖形語法理論的視覺化底層引擎，以資料驅動，提供圖形語法與互動語法，具有高度的易用性和擴充套件性。G2 以及相關的生態關注讓使用者無需關注圖表各種繁瑣的實現細節，一條語句即可使用 Canvas 或 SVG 構建出各種各樣的可互動的統計圖表。截止到 G2 4.0 版本來看，G2 以及相關的生態更多的關注單個統計圖表視覺化的問題。機器學習場景除了關注特徵空間的分佈情況，還關注多個特徵子空間對比分析，特徵時空分佈對比分析。當我們探索未知時，用於探索的視覺化高階語法，例如 Vega-Lite [7]能幫助對資料快速分析，建立了一系列富有表現力的視覺化，但是 Vega-Lite 無法利用集團現有的視覺化能力。（3）單元視覺化理侷限性，當資料量較大，在視覺化編碼期間，每個資料項都由一個唯一的可視標記，會導致效能問題；缺少必要互動支援。

圖 2 G2 統計圖表官方案例

框架設計

針對以上挑戰，我們採用視覺化結合人機互動的方式解決研究物件的不確定性。針對高維資料空間視覺化和子空間對比分析，我們採用多檢視視覺化技術。最後，我們提供一種高階語法能直觀的表達視覺化的設計空間的可視分析框架，支援高維海量資料的多資料、多屬性、多檢視可視分析，涵蓋時序、地理空間等對比分析場景。

Data，包含多行的資料表，每一行包含多個列或者多個屬性，為了方便處理資料，資料一般採用扁平的結構；
Containers，容器是一種幾何抽象，包括一個 Group 將被放置的位置和區域
- bin, 選擇感興趣的屬性，將屬性執行 bin 操作
- layout，自定義計算視覺化元素或者分組位置資訊
Groups，行資料的子集，Groups 也可以是巢狀型別，Groups 包括其他的 Groups
Cells，是與資料集中一行相關的 Container 特定的例項
Units，一行資料的圖形表示。它們可以有視覺屬性，例如顏色、形狀、大小(相對於外圍單元格)和不透明度
View，檢視是資料表的特定視覺化;它可以與同一資料的其他檢視連結
Interaction，貫穿這個資料視覺化管道中，資料層面過濾、排序操作；bin 操作屬性選擇；佈局方法的選擇；視覺化編碼的選擇；視覺化單元的選中、提示、Hover等互動方式，甚至檢視之間的聯動分析
Animation，視覺化元素在新增、更新、刪除階段的動畫

圖 3 機器學習可視分析框架

關鍵步驟

原始資料

為了更好的解釋本框架，我們從一個具體的業務資料分析，實際資料以陣列的方式提供，陣列中一條記錄是一條實體描述，包括欄位基礎資訊（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分組，子容器大小由根據元素數量長度決定，佈局方式從上到下佈局；接著按照實體資料中特徵屬性，大小相等的方式，從左向右佈局；最後繪製訂單多檢視視覺化。

圖 4 高階語法生成的訂單多檢視視覺化

高階語法解析

為了生成目標視覺化，我們的語法構建了一個根容器，並遞迴地應用單元視覺化操作，直到所有容器都成為單元。換句話說，呈現變成了樹的遍歷，其中根容器是樹的根節點，而單元容器是葉節點。一旦生成了所有的單元，佈局就完成了，可以繪製單元視覺化。在語法解析之前，我們先構建根容器 RootContainer，包括原始 data、前驅節點、label、視覺化空間(width、height、padding 和 position)等資訊。layouts 配置佈局將解析成層級巢狀結構，然後將巢狀結構佈局從 RootContainer，生成各自層次下的子容器 ChilrenContainer。

圖 5 案例資料結果