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


整體思路

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

可視化框架的構成

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

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

G2的框架結構

G2實現了上面的四個模塊,並且對着四個模塊做了更進一步的細分:

image

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

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

數據圖形映射的流程

可視化從數據映射到圖形需要以下流程:

image

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

g2的數據映射流程

G2的數據映射到圖形的過程整體上遵循這個流程,但是細節上有所增加:

image

幾個大的流程:

  • 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
  • 數字化,將分類類型,時間類型的數據轉換成數字,為了可以執行“數據調整”,調整圖形在畫布上的位置
  • 數據調整,為了更清晰的展示數據,圖形有時候需要層疊、分組、散開等,此時需要對數據進行調整

    image 
    image

  • 訓練度量度量包含了數據字段的信息,例如連續字段的最大值、最小值等信息,分類字段包含的分類,數據一旦進行調整,那么度量中的信息不再准確,所以需要進行度量的訓練

  • 歸一化,將數據的值映射到 0-1空間內,方便數據到視覺通道的映射
  • 計算圖形需要的點,繪制圖形時需要多個點,例如繪制一個柱狀圖,需要4個點,如果將坐標系轉換,仍然是這4個點,僅僅是連接點的方式不同,就會生成不同的圖表

    image 
    image

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

  • 繪制,繪制完成所有的圖形

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

更多

我們可以看到,在數據進行圖形映射的流程中,數據類型非常重要,不同的數據類型影響不同的映射方式,下一章節我們介紹數據分類和度量

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM