搭建多層式網絡視覺化(visualization of the multilayer network)模型: 使用three.js, d3.js , Lodash 和observable(ㄧ)

screenshot.png

 

用多層次網絡(multilayer network )視覺化多組學資料

最近花了些時間把之前多組學(multi omic)資料分析的結果,往下延伸去做資料視覺化已呈現一些insights,到底該如何呈現一些複雜的觀念,來把高維度的資料,簡化成人眼有感覺的事情(好難啊!),整合了基因調控、基因產物間的互動和基因集的資料,當然,無法只用一張圖來說清楚一整個研究的思維,但總是希望能如提高Edward Tufte所說的data-ink ratio可參閱這篇 ),所以過程等於是一個打掉重做打掉再重做的過程

這設計其實是想要打破單純simple network的問題,因為回答或是用數據來解構生物問題時,常常會有不同層次的系統交疊,如今許多高通量的資料,他經過註解後,其實資料的維度是很高的,會需要用multilayer來把複雜性降低,以便讓想呈現的模式呈現,於是便需要用到multilayer network來架構這樣的multi-omic資料(可參閱這篇),不過話說,在多層次網絡這框架下,其實還很新,所以如何去設計layout背後的演算法,是個新的世界。

解決跨層間連線(between layer links)的視覺化問題

在keep simple的原則下,原本希望用css的transformation特性和d3.js就能完成這最初版本的多層網絡視覺化設計,但後來鑽研許久,把css 裡面的translate3d, rotate3d, perspective等特性來用在由d3.js產出的svg上,從實踐端踩了一遍,遇到蠻多有趣問題的(怪蟲xd)。關鍵在做“跨layer間的線”時會遇到很大的問題,其中一個關鍵是css 在做出3d效果時,所謂z座標的實現化,似乎是處在一個黑盒子,假如要完全模擬出來3d效果,其實就要重新用js改寫這些函數,來自己做這些座標的轉換,因為這樣做有點“重做輪子”的感覺,於是就硬者頭皮進入到webGL的領域,也就是原生的3d世界。

使用three.js來入手webGL的3d世界

老實說,three.js比d3.js更容易入手,這一點超乎我的想像,不過相對於d3.js在data-driven這一塊的設計,three.js就要自己重造視覺模塊跟資料的關聯,畢竟他其實不是為了“資料視覺化”(data-driven)而出現,是為了3d動畫、webVR而出現,但至少光3d的座標,就可以讓我直接使用(x,y,z)來做跨層間的資料處理,省下了一層功。另外,three.js也讓我看到了另外一種可能,因為在d3.js的操作下,很容易遇到速度瓶頸,尤其是在超複雜的視覺化上,速度會到一種慢到想哭的地步,每次render都要花到3-5分鐘,three.js則因為可以使用gpu來做視覺處理,皆有所謂的buffer設計,所以這特性可以好好用來做一些加速使用,甚至GPU運算。

用Observable來做快速prototyping

Mike Bostock新開發的Observalbe工具真的很棒,無痛版的jupyter,且越用越覺得他設計理念很棒,Observalbe基本上可以讓你直接使用各種js library,在上面邊寫邊摸索,且他引入蠻多interactive的概念,所以你可以設計一些reactive的參數,來調整資料,尤其在3d的世界中很重要,你通常要藉由直接嘗試來找到適當的呈現角度。

screenshot

可以看到observable notebook裡面可以設計滑動的參數,來調整觀看角度,因為three.js設計的方式,你會需要設定觀看角度的各種參數,所以使用這互動性的設計就能快速找到合適的觀賞方向。

D3.js的d3.simulation來提供network的layout

screenshot.png

可以看到最頂層的那個網絡是有layout的,這個layout便是使用d3.js 的d3.simulation來做背後計算的,當然這就會產生一些資料延遲的問題,這部分之後詳細分享。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s