用多層次網絡(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的世界中很重要，你通常要藉由直接嘗試來找到適當的呈現角度。

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

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

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