- 大數(shù)據(jù)可視分析方法與應(yīng)用
- 陳為 巫英才 鮑虎軍等
- 5292字
- 2020-05-07 14:46:10
1.3 實例1——VisComposer:可視化圖表制作工具
可視化的需求日益巨大,這對可視化工作者們來說既是機遇也是挑戰(zhàn)。如何規(guī)范化地進行可視化系統(tǒng)開發(fā),提高開發(fā)和管理效率,是可視化工作者們所關(guān)心的問題??梢暬到y(tǒng)開發(fā)不僅涉及可視化設(shè)計流程,還跟軟件工程的軟件開發(fā)流程密切相關(guān)。為了提高可視化系統(tǒng)開發(fā)的效率,作者主導(dǎo)開發(fā)了一個基于嵌套增量模型的交互式的可視化設(shè)計工具VisComposer。VisComposer從軟件工程的角度出發(fā),提出針對可視化系統(tǒng)開發(fā)的嵌套增量模型,幫助和指導(dǎo)用戶進行可視化系統(tǒng)開發(fā)。
VisComposer的特點如下:
①面向普通用戶,提供簡單易上手的圖形界面,降低用戶的使用門檻;
②使用組件化的思想,提供預(yù)定義的可視化組件,讓用戶通過組件之間的自由組合來完成樣式更豐富的可視化設(shè)計;
③引導(dǎo)用戶有效地對可視化系統(tǒng)進行解構(gòu),以及進行更加精確和細粒度的調(diào)參和修改,提供強大的數(shù)據(jù)處理能力和可視化表達能力;
④與嵌套增量模型緊密相關(guān),有效幫助用戶在嵌套增量模型的標(biāo)準(zhǔn)開發(fā)流程下進行可視化系統(tǒng)開發(fā)。
1.3.1 框架設(shè)計
VisComposer由組件庫、場景樹、變換工作流和渲染器四大模塊組成,如圖1-4所示。組件庫提供了多種組件,供用戶完成各種任務(wù);場景樹負責(zé)維護圖元組件的結(jié)構(gòu)抽象;變換工作流則處理場景樹節(jié)點的數(shù)據(jù)變換和可視映射;最后由渲染器解析整個場景樹,并完成繪制。下面將詳細介紹每個模塊的設(shè)計和實現(xiàn)。

圖1-4 VisComposer可視化設(shè)計模型由四大模塊構(gòu)成
1.3.1.1 組件庫
很多可視化設(shè)計工具會采用模板化的方式幫助用戶制作可視化視圖,用戶只需將數(shù)據(jù)導(dǎo)入到模板中并設(shè)置好維度綁定就能生成視圖。而VisComposer則選用了一種更加靈活的方式——組件化。用戶能通過不同組件的自由組合,定制出不同的可視化視圖。系統(tǒng)提供的預(yù)定義組件主要包括以下四類。
①數(shù)據(jù)集:支持CSV或JSON格式的數(shù)據(jù)文件,同時支持用戶本地上傳數(shù)據(jù)和服務(wù)端存儲用戶數(shù)據(jù)。用戶直接在界面上通過交互上傳、查看和使用系統(tǒng)中的數(shù)據(jù)集。
②可視化元素:提供多種常用的圖元組件(如圓、矩形、扇形)和布局組件(如笛卡兒坐標(biāo)系、矩陣、極坐標(biāo)系),供用戶組成可視化圖表。
③數(shù)據(jù)處理:系統(tǒng)提供多種常用的數(shù)據(jù)處理組件,涵蓋了數(shù)據(jù)選取、排序、統(tǒng)計等功能。
④可視化模板:可視化模板組件采用JSON字符串的形式聲明式地保存可視化圖表模板,包括一些常用的圖表(如散點圖、柱狀圖、折線圖等),用戶只需接入自己的數(shù)據(jù)便可生成相應(yīng)的可視化視圖,也可根據(jù)需求在場景樹模塊和變換工作流模塊對這些視圖做出相應(yīng)修改;另外,用戶自己設(shè)計的可視化作品也能被保存成系統(tǒng)的可視化模板組件,然后用于分享和重用。
1.3.1.2 場景樹
場景樹模塊是可視化的結(jié)構(gòu)抽象,是可視化場景中所有圖元的層次關(guān)系,特別地,在我們實現(xiàn)的基于SVG繪制的Web系統(tǒng)中,與最后的繪制結(jié)果的Dom結(jié)構(gòu)一一對應(yīng)。很多設(shè)計軟件都采用場景樹的形式來管理場景結(jié)構(gòu),如Adobe Photoshop的圖層管理、3D Studio Max和Autodesk Maya的場景管理等。場景樹模塊能幫助用戶梳理可視化視圖的架構(gòu),自頂向下地完成可視化設(shè)計。
場景樹采用樹狀結(jié)構(gòu),包括了節(jié)點和邊兩個部分。節(jié)點表示的是同一類圖元,由用戶從可視化元素組件庫中選用并生成。特別地,每個場景樹都默認帶有根節(jié)點,根節(jié)點表示的是整塊畫布,其他節(jié)點則分成視圖節(jié)點和圖元節(jié)點兩種:視圖節(jié)點一定具有子節(jié)點,必須帶有布局組件,用來指定子節(jié)點的排列方式;圖元節(jié)點一般是葉子節(jié)點,不帶布局組件但跟最終繪制的可視化圖元一一對應(yīng)。邊表示的是視圖與視圖、視圖與圖元的包含關(guān)系,以及父節(jié)點向子節(jié)點分發(fā)數(shù)據(jù)和資源的過程。詳細的邏輯會在后面章節(jié)中結(jié)合實例說明。
場景樹的另外一個主要作用是支持用戶對可視化設(shè)計的復(fù)用和保存。用戶可以截取場景樹中的任意子樹選擇保存,系統(tǒng)將以JSON字符串的形式做聲明式的保存,并將其添加到組件庫的可視化模板庫中。當(dāng)用戶想再次生成該子樹時,只需將其添加到任意的節(jié)點下,系統(tǒng)將自動解析JSON字符串中的信息,并生成場景樹子樹,用戶只需接入相應(yīng)的數(shù)據(jù)。
1.3.1.3 變換工作流
VisComposer采用變換工作流模塊來管理和編輯場景樹節(jié)點的數(shù)據(jù)和屬性。變換工作流是一個比較自由的工作空間,在這個空間里,允許用戶進行三種類型的操作:數(shù)據(jù)過濾、指定數(shù)據(jù)和圖元的綁定。指定給所有子節(jié)點的輸出數(shù)據(jù)。輸入數(shù)據(jù)從其父節(jié)點傳入,在變換工作流中用工作流輸出端口表示。用戶通過添加數(shù)據(jù)處理組件對數(shù)據(jù)進行選取、過濾、排序、統(tǒng)計等操作。隨后再選取數(shù)據(jù)維度與視圖或圖元的視覺通道進行綁定。若節(jié)點有子節(jié)點,變換工作流中會列出所有的子節(jié)點,每個子節(jié)點由一個工作流輸出端口表示,用戶可將任意組件的輸出數(shù)據(jù)派發(fā)到指定的子節(jié)點上,讓這些數(shù)據(jù)在子節(jié)點中被可視化。
變換工作流中會維護一個組件列表,存儲了該工作流中所有的組件,并通過唯一的標(biāo)識符來標(biāo)識。每個組件可以具有多個輸入和多個輸出,統(tǒng)稱為端口,也都各有一個唯一的標(biāo)識符。輸入端口只能與其他組件的一個輸出端口唯一連接,而輸出端口則可以對應(yīng)多個其他組件的輸入端口。特別地,組件的輸入輸出端口還能與變換工作流輸入端口和工作流輸出端口連接,以接收該節(jié)點的父節(jié)點傳入的數(shù)據(jù)以及將數(shù)據(jù)傳遞給子節(jié)點的變換工作流。組件間的連接關(guān)系表達的是數(shù)據(jù)在組件間的流動,數(shù)據(jù)從輸入端口進來,經(jīng)過組件內(nèi)部的處理,再通過輸出端口輸出。整個變換工作流最終可以表述為工作空間中所有組件以及這些組件之間的拓撲序。
場景樹中的每個節(jié)點有且僅有一個對應(yīng)的變換工作流。父節(jié)點和子節(jié)點之間的變換工作流緊密聯(lián)系,父節(jié)點直接派發(fā)數(shù)據(jù)給子節(jié)點,每個子節(jié)點得到父節(jié)點數(shù)據(jù)集的一個子集。每個變換工作流中會列出從父節(jié)點傳下的數(shù)據(jù)以及該節(jié)點的所有子節(jié)點。每個節(jié)點的變換工作流都帶有一些默認的組件,如可視映射組件等。特別地,視圖節(jié)點的變換工作流中必須要添加布局組件。
1.3.1.4 渲染器
VisComposer配備了專門的渲染器,能解析用戶創(chuàng)建場景樹和變換工作流,并利用系統(tǒng)選定的繪制工具(如SVG或者Canvas)進行繪制。
圖1-5的例子解釋了渲染器解析場景樹和變換工作流的原理。圖1-5(a)中的場景圖含有兩層三個節(jié)點,渲染器會將這三個節(jié)點分別解析為三個函數(shù):FuncA、FuncB、FuncC。假設(shè)輸入數(shù)據(jù)為data,場景樹的渲染流程可以表示為對樹的深度優(yōu)先遍歷,并依次執(zhí)行每個節(jié)點的函數(shù):FuncA(data);FuncB[FuncA(data)];FuncC[FuncA(data)]。同樣地,在圖1-5(b)中,變換工作流中的組件都會被解析為函數(shù),并按照組件之間連接的拓撲序依次執(zhí)行每個組件的函數(shù),最終得出繪制結(jié)果。

圖1-5 場景圖和變換工作流示例圖
渲染器還會提供與場景樹、變換工作流等窗口并列的繪制結(jié)果窗口,提供實時的設(shè)計結(jié)果繪制展示,每當(dāng)用戶對場景樹或變換工作流中的任何屬性進行編輯時,繪制結(jié)果都會快速地進行實時更新。同樣,繪制結(jié)果上帶有一些默認的選中和平移交互,用戶可以直接在繪制結(jié)果上操作,渲染器會將同等意義的屬性修改同步到場景樹和變換工作流的相應(yīng)模塊上。
1.3.2 與嵌套增量模型的關(guān)系
VisComposer系統(tǒng)與嵌套增量模型的關(guān)系在于:它幫助用戶在嵌套增量模型的標(biāo)準(zhǔn)開發(fā)流程下進行可視化系統(tǒng)開發(fā)。首先,組件庫模塊體現(xiàn)了對可視化系統(tǒng)進行解構(gòu)的思想,用戶將完整的可視化系統(tǒng)拆分成若干個增量構(gòu)件,并保存為組件庫中的組件,每個增量構(gòu)件/組件的開發(fā)互相獨立、并行開發(fā);其次,場景樹模塊將不同的增量構(gòu)件組織在一起,組成完整的可視化系統(tǒng);再次,變換工作流模塊幫助用戶完成可視化設(shè)計流程中的數(shù)據(jù)處理和可視化映射與交互兩個步驟的工作,并能進行精確的、細粒度的屬性參數(shù)調(diào)整,渲染器模塊則完成可視化渲染的工作??梢哉f,用戶使用VisComposer工具開發(fā)可視化系統(tǒng)的過程,就是基于嵌套增量模型開發(fā)的過程。
1.3.3 系統(tǒng)實現(xiàn)
VisComposer系統(tǒng)界面如圖1-6所示。系統(tǒng)主要分為組件庫窗口、場景樹窗口、變換工作流窗口和視圖繪制窗口。所有窗口小部件和視圖都設(shè)計為可折疊,以便為主視圖保留更多的屏幕空間。用戶通過簡單的交互方式,用系統(tǒng)提供的各類組件,就可以不用編寫任何代碼,創(chuàng)建出各種可視化視圖。

圖1-6 VisComposer工具界面截圖,(a)、(b)、(c)、(d)分別為系統(tǒng)的組件庫窗口、變換工作流窗口、場景樹窗口和視圖繪制窗口
系統(tǒng)開發(fā)的技術(shù)棧如圖1-7所示。前端用到了Javascript的工具庫jQuery.js、SVG繪制庫D3.js和前端UI組件庫jQuery UI;后端則用node.js的Express框架實現(xiàn),負責(zé)處理用戶的上傳數(shù)據(jù)集、數(shù)據(jù)集讀取和可視化模板保存等操作,通過RESTful接口暴露給前端調(diào)用。

圖1-7 VisComposer系統(tǒng)開發(fā)的技術(shù)棧
本章接下來的小節(jié)將介紹四個窗口的詳細界面和功能設(shè)計。
1.3.3.1 組件庫窗口
前文介紹了四大類組件,包括數(shù)據(jù)集、可視化元素、數(shù)據(jù)處理和可視化模板。在VisComposer系統(tǒng)中,這些組件以圖標(biāo)的方式分類存放在組件庫窗口中,用戶直接雙擊或拖拽到場景樹窗口或變換工作流窗口使用。
圖1-6(a)部分展示了系統(tǒng)提供的一些預(yù)定義組件窗口??梢暬0澹‵orm)部分提供了散點圖、折線圖、柱狀圖、堆疊圖、矩陣、平行坐標(biāo)等12種可視化模板,用戶使用可視化模板組件時,直接將選用的可視化形式對應(yīng)的圖表拖到場景圖窗口的任意節(jié)點,就會生成新的子樹,用戶再在該子樹的根節(jié)點指定好輸入數(shù)據(jù)即可使用。
圖元(Primitive)部分提供了包括圓、矩形、多邊形、路徑、扇形、文字等12種圖元,這些圖元的視覺通道都已預(yù)先設(shè)定好,用戶可以在變換工作流中通過連線的方式直接將數(shù)據(jù)綁定到某個視覺通道上。
另外,布局(Composition)部分提供了水平排列、垂直排列、直角坐標(biāo)系、矩陣排列等8種布局;數(shù)據(jù)變換部分提供了數(shù)據(jù)維度選取、數(shù)據(jù)過濾、排序、數(shù)學(xué)運算等10種運算器。所有類型的組件都可以任意地擴充,特別是可視化模板組件,可直接由用戶從自己的設(shè)計中保存成模板。
VisComposer的組件庫還包括數(shù)據(jù)集組件庫。圖1-8展示的是用戶使用數(shù)據(jù)組件庫窗口上傳數(shù)據(jù)。系統(tǒng)支持用戶從本地上傳CSV和JSON格式的文件,CSV數(shù)據(jù)在上傳前需用戶先確認每個維度的數(shù)據(jù)屬性,數(shù)據(jù)集窗口列出的數(shù)據(jù)可以查看維度和詳細數(shù)據(jù)。每個數(shù)據(jù)集同樣是通過拖拽交互將數(shù)據(jù)導(dǎo)入到任意節(jié)點的工作流中。

圖1-8 CSV數(shù)據(jù)在上傳前需要用戶確認每個維度的數(shù)據(jù)屬性
1.3.3.2 場景樹窗口
場景樹窗口給用戶提供了創(chuàng)建場景樹的界面,用戶可執(zhí)行的操作包括添加/刪除場景樹節(jié)點、編輯節(jié)點屬性、選定節(jié)點編輯變換工作流和將任意子樹保存成可視化模板等。
圖1-9展示的是一個簡單的散點圖的場景樹結(jié)構(gòu)。CANVAS節(jié)點是場景樹的根節(jié)點,表示成一張二維平面上的畫布,用戶可以直接在節(jié)點上編輯畫布的長、寬和背景色;Scatterplot節(jié)點屬于視圖節(jié)點,含有笛卡兒坐標(biāo)系布局組件,以二維直角坐標(biāo)系的形式布局其含有的圖元;Circle節(jié)點是圖元節(jié)點,也是場景樹的葉子節(jié)點。

圖1-9 一個簡單的例子:散點圖的場景樹結(jié)構(gòu)
從圖1-9還能看到,一個150行的表格數(shù)據(jù)從Scatterplot節(jié)點導(dǎo)入,按行分發(fā)給下一層節(jié)點Circle,Circle節(jié)點對應(yīng)數(shù)據(jù)的行數(shù)自動生成了150個圓圖元。
圖1-9還展示了如何將場景樹中任意子樹保存成可視化模板:用戶只需在任意節(jié)點處右鍵點擊,即可看到“save as templates”選項,點擊過后組件庫窗口會新增一個可視化模板組件,表示該節(jié)點以及其子樹已經(jīng)成功地保存成模板。
用戶在場景樹窗口通過點選節(jié)點來編輯該節(jié)點的變換工作流。變換工作流窗口顯示的工作空間總是場景樹窗口中選中節(jié)點的變換工作流。
1.3.3.3 變換工作流窗口
變換工作流窗口是VisComposer系統(tǒng)的核心,用戶在場景樹搭好了可視化場景的框架之后,需要在每個節(jié)點內(nèi)指定好數(shù)據(jù)輸入、數(shù)據(jù)變換、可視映射還有對子節(jié)點的輸出,這些操作都在變換工作流窗口完成。
基于前文提出的模型,VisComposer系統(tǒng)實現(xiàn)了圖1-10中的變換工作流窗口,圖中展示的變換工作流對應(yīng)的是圖1-9的散點圖場景樹的Scatterplot節(jié)點。

圖1-10 圖1-9中Scatterplot節(jié)點的變換工作流
從圖1-10中可以看到,變換工作流本身有輸入和輸出,輸入?yún)^(qū)域a允許導(dǎo)入數(shù)據(jù)或者接收父節(jié)點傳下來的數(shù)據(jù);輸出區(qū)域b則列出自己所有的子節(jié)點,因為Scatterplot節(jié)點只有Circle一個子節(jié)點,所以圖中變換工作流的輸出只有一個Circle,任意的數(shù)據(jù)可以直接以連線的方式連進來,傳到Circle節(jié)點。b、c、d是三個組件,其中b是數(shù)據(jù)集組件,c是直角坐標(biāo)系的布局組件,而d是對應(yīng)視圖節(jié)點的圖元組件,用來編輯視圖的大小和位置等屬性。
變換工作流的輸入、組件和變換工作流的輸出通過端口之間的連接線組織在一起。
1.3.3.4 視圖窗口
視圖窗口用來展示可視化最終的繪制結(jié)果。圖1-11展示的是圖1-9場景樹對應(yīng)的繪制結(jié)果。系統(tǒng)采用D3.js作繪制工具,最終渲染成SVG的DOM節(jié)點,如圖1-11右下角所示,DOM節(jié)點的層次結(jié)構(gòu)與圖1-9場景樹相互呼應(yīng)。

圖1-11 視圖窗口展示繪制好的散點圖
用戶能直接在視圖上編輯視圖或節(jié)點的屬性。例如,用戶對一個視圖平移了一個(10,10)的位移,系統(tǒng)會自動將這個位移添加到該視圖的變換工作流的視圖組件中。
當(dāng)用戶用右鍵對圖元進行點擊時,會彈出一個菜單,其中第一個選項“apply new method”的意思是按照特定條件選取一組圖元實體,并在原來節(jié)點的同一層拆出一個新節(jié)點,用戶以這樣的方式對選中的這組圖元實體進行重新設(shè)計,比如替換成另外的圖元形式等。散點圖矩陣中會用到這個功能,因為該視圖展示一個表格數(shù)據(jù)維度之間的關(guān)系,比如一個四個維度的數(shù)據(jù),散點圖矩陣會生成一個4×4的方陣散點圖。然而,在正對角線上的散點圖的點都是排成一條直線,因為它們分別表示每個維度自己與自己在二維坐標(biāo)系下的關(guān)系。因此,一般會把這個對角線上的視圖替換成直方圖之類的統(tǒng)計圖,展示該維度的值域分布。用戶可直接在散點圖矩陣上用“apply new method”功能將對角線四個散點圖選出來生成新節(jié)點,然后將該節(jié)點的可視化形式改成堆疊圖。圖1-12顯示了這幾個交互操作的流程。

圖1-12 將散點圖矩陣對角線的散點圖替換為堆疊圖
- Unreal Engine:Game Development from A to Z
- 亮劍.NET:.NET深入體驗與實戰(zhàn)精要
- 西門子S7-200 SMART PLC從入門到精通
- AWS Certified SysOps Administrator:Associate Guide
- 3D Printing for Architects with MakerBot
- Visual Basic.NET程序設(shè)計
- 學(xué)會VBA,菜鳥也高飛!
- Cloud Security Automation
- 電氣控制與PLC原理及應(yīng)用(歐姆龍機型)
- 基于人工免疫原理的檢測系統(tǒng)模型及其應(yīng)用
- 傳感器原理及實用技術(shù)
- 大型機系統(tǒng)應(yīng)用基礎(chǔ)
- 網(wǎng)站規(guī)劃與網(wǎng)頁設(shè)計
- 計算機辦公應(yīng)用培訓(xùn)教程
- Hands-On Microservices with C#