可視化框架設計-總體思路

總體思路

• 可視化框架的構成
• G2的框架結構
• 數據圖形映射的流程

可視化框架的構成

數據可視化的本質是：將數據映射到圖形，同時將一些附加信息傳達給用戶。

一個可視化框架須要四部分： 
* 數據處理模塊，對數據進行加工的模塊，包括一些數據處理方法。例如：合併、分組、排序、過濾、計算統計信息等 
* 圖形映射模塊，將數據映射到圖形視覺通道(後面章節介紹)的過程。例如：將數據映射成顏色、位置、大小等 
* 圖形展現模塊，決定使用何種圖形來展現數據，點、線、面等圖形標記 
* 輔助信息模塊，用於說明視覺通道跟數據的映射關係，例如：座標軸、圖例、輔助文本等

G2的框架結構

G2實現了上面的四個模塊，而且對着四個模塊作了更進一步的細分：

這些細分的模塊在單獨的章節中各自介紹：

• DataFrame 數據的處理模塊，常見的數據處理方法
• Stat 對數據進行統計的模塊，min,max,mean等常見的統計
• Scale 將數據映射到0-1之間，方便映射到視覺通道
• Att，圖形屬性，數據映射到圖形的視覺通道，包括位置、顏色、大小、形狀等
• Coord 展現圖形需用到的座標系，將數據映射到位置的視覺通道（屬性）
• View 視圖，一個畫布上能夠顯示多張圖表，每一個圖表有各自的繪圖區域、數據源、座標系等信息
• Geom 數據映射到的幾何標識，G2中的幾何標識有：點、線、路徑、面積、多邊形等
• Shape更加細分的幾何標識的圖形，例如，點能夠分爲圓點、正方形、十字等，線能夠分爲點線、折線、曲線等
• Axis 座標軸，輔助用戶識別圖形所在的位置，判斷數據大小的輔助元素
• Legend 圖例，輔助用戶識別圖形的大小、顏色、形狀，一般用於判斷數據對應圖形的分類
• Tooltip 提示信息，用戶鼠標在畫布上移動時，實時出現的鼠標附近的數據信息
• Guide其餘輔助元素，能夠在圖上添加輔助的文本、輔助圖片、輔助線等，加強用戶對圖形的認知。

數據圖形映射的流程

可視化從數據映射到圖形須要如下流程：

• 原始數據：加載到頁面上的JSON數組
• 統計分析：統計函數加工數據
• 預處理數據：每一個視圖接收到的數據
• 過濾：行過濾，列過濾（是否保存整條數據，後面討論）
• 關注數據： 對數據進行行列的過濾，當前圖表關注的數據
• 映射：將數據從數值域轉換幾何屬性
• 繪製：調用繪圖庫，繪製出圖形
• 圖像數據：最終造成的圖表

g2的數據映射流程

G2的數據映射到圖形的過程總體上遵循這個流程，可是細節上有所增長：

幾個大的流程：

• G2的數據能夠在外部處理完畢後傳入圖表中，統計函數也能夠在外部執行
• View 中對數據進行初步的處理，對數據進行格式化成數字、調整數據等操做
• Core 核心層處理圖形的數據的映射

小流程的簡介：

• 統計，對數據進行統計處理，用戶能夠在傳入G2的圖表前對數據進行統計，也能夠將統計函數嵌入G2的語法中
• 過濾，對數據進行過濾，G2中圖例的操做也會引發數據的過濾
• view中設置數據源，單個視圖（view)擁有本身的數據源，多個View能夠同時在一個畫布上出現，展現異構數據

• 過濾列，防止傳入數據的列數過多，僅過濾出參與語法的列

  var data = [{a: '1',b: 'b',c: 'c1',d: 10}] // 數據中存在a,b,c,d四列 。。。 chart.point().position('a*b').color('c') // a,b,c參與了語法，因此d字段被過濾掉

  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
• 數字化，將分類類型，時間類型的數據轉換成數字,爲了能夠執行「數據調整」,調整圖形在畫布上的位置

• 數據調整，爲了更清晰的展現數據，圖形有時候須要層疊、分組、散開等，此時須要對數據進行調整

   
  

• 訓練度量度量包含了數據字段的信息，例如連續字段的最大值、最小值等信息，分類字段包含的分類,數據一旦進行調整，那麼度量中的信息再也不準確，因此須要進行度量的訓練

• 歸一化，將數據的值映射到 0-1空間內，方便數據到視覺通道的映射

• 計算圖形須要的點，繪製圖形時須要多個點，例如繪製一個柱狀圖，須要4個點，若是將座標系轉換，仍然是這4個點，僅僅是鏈接點的方式不一樣，就會生成不一樣的圖表

   
  

• 映射，將數據映射到圖形空間的視覺通道

• 繪製，繪製完成全部的圖形

更詳細的數據流程介紹和示例在後面的各種圖表中分別展現

更多

咱們能夠看到，在數據進行圖形映射的流程中，數據類型很是重要，不一樣的數據類型影響不一樣的映射方式，下一章節咱們介紹數據分類和度量

G2 網站： https://g2.alipay.com/