走進小作坊(二十三)----數據之美

            這段時間,對數據可視化的研究從橫向與縱向都有擴展。橫向意義在於從更廣闊的視角思考可視化方案,縱向意義在於深挖方案的具體實現。這本《數據之美》兼有橫向與縱向內容。

   一、可視化文檔

    在朋友幫助下,研讀了一些層次數據可視化文檔。文檔構建如下:


    此文檔從層次數據定義開始講起。捎帶提及層次數據可視化挑戰。挑戰主要在於層次數據的展現與交互上,反映到微觀上,分別是點和邊的空間排布組織形式以及用戶對相關部分觀察分析交互的探索。文檔大頭在於對層次數據可視化方法的介紹,樂帝這裏比較關注樹圖(treemap)構建。

    此文檔從宏觀上對層次數據可視化給了介紹,填充了樂帝在層次數據這方面理論知識的盲點。

    另一篇文檔專門基於樹圖可視化的文檔更偏向算法論述。但文中涉及樹圖可視化交互還是值得借鑑。


   二、《數據之美》

   《數據之美》這本書與《鮮活的數據》出自同一個作者,內容側重點互爲補充。前者更適合設計師,後者更適合技術人員。《數據之美》各個部分,都從宏觀講述可視化構建流程。前面幾部分比較微觀。後面如瞭解數據、使可視化更清晰、爲讀者進行可視化,可以分別從選定可視化形式、可視化展現優化、檢查可視化角度理解。其中涉及樹圖可視化展現與交互非常有參考價值:


   三、D3 Treemap佈局

   D3中treemap佈局,可以非常方便的對傳入數據進行樹圖數據結構構造,並且提供一些額外的優化展示方法,API構建如下圖:


   下面看看D3 treemap對數據結構的修改,原始數據對象:


   經過treemap處理後的root數據結構(其中area屬性爲dx、dy乘積):


   未經處理時,子對象數據結構:


   經過treemap處理後,子對象數據結構:


   樂帝在這裏寫了一個treemap實現樹形結構簡單例子:

   http://download.csdn.net/detail/yingyiledi/8352817

   例子效果圖如下:


    此佈局與樂帝研究期許有些許出入,D3 treemap佈局構建樹圖是通過計算子對象所佔父對象比例填充到父對象中。在涉及父子對象有位置關係或者子對象不是100%填充父對象的場景中,並不能滿足需求。但treemap計算比例關係還是有價值的。

    四、其他treemap案例:

    http://jstreemap.com/

    http://www.cs.umd.edu/hcil/treemap/

    http://blog.csdn.net/dragonszy/article/details/7931635


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章