標籤: visualization

視覺設計原則：Salience – 凸顯

發表留言

 

The fact of being important for or connected with what is happening or being discussed of     — definition from Cambridge Dictionary

視覺設計原則中，如何去“凸顯(salience)”重要的要素，是其中一個技巧。其目的便是能創造合適的對比，讓觀看者能快速地看到局部的特徵。

Points Of View : Salience Fig1
salience through visual features

從這篇Nature methods的文章Fig1-a，可以發現一眼望去，符號A相對於P，很容易就被看到，這樣的設計就是所謂的凸顯，可以使用顏色、大小、方向、形狀、標記、動作、分組的方式去達到這個目的。

凸顯的目的有二：

第一個，降低觀看者的認知負擔，減少其找尋到特定特徵和意義的時間，適合在像是簡報或是海報等，觀看者同時還在聆聽資訊，兩種感官在競爭觀看者的注意力。

第二個，加快使用者理解較複雜圖形的意義，以便理解設計者進一步疊加在視覺表達上的意義。

Points of View: Salience Fig2
Visual conjuctions

從Fig2的真實例子可以發現，如今的資料複雜度是越來越高的(所以視覺化設計的能力便需要提升)，往往想要在一張圖中，放入多維度的意義，這樣就無法良好的凸顯想要傳達的一系列訊息，實際上，可以用Fig2-b的方式，有效地且次序地表達到想要呈現的資訊。這類的圖片通常需要觀者去執行所謂的Visual conjuction的搜尋（看圖標，然後進而去主圖中搜尋），當圖標過多種，此時就達不到良好的突顯，讓使用者找尋特定資訊和理解的時間增加。

 

閱讀參考：

Bang Wong(2010). Points Of View: Salience. Nature Methods
Ware, C. Visual Thinking for Design (Morgan Kaufmann Publishers, Burlington Massachusetts, USA, 2008).

書籍閱讀：Visualization Analysis & Design

發表留言

visualizationAnaalysisandDesign這本書Visualization Analysis & Design是由UBC資工系教授Tamara Munzner所撰寫的，是目前視覺化領域做為教科書很好的教材，內容可以說是極盡用心，每章節最後都會附有延伸閱讀可以進一步擴展。

這本書的出現，本身就是Tamara Munzner為了解決視覺化這新興領域沒有良好架構的問題而撰寫的，其擷取許多前人的大作，從Tufte開始，作者最喜歡的是他那本Envisioning Information，但唯一的缺點是Tufte的書通常都停留在非常傳統的視覺化技術，而最近20年來，視覺化技術最重要的是想要知道如何在互動性下能讓人探索到資料中更多的未知性質。作者推薦可以搭配此書的有：

Colie Ware.(2008).Visual Thinking for Design

假如想要更深入的或是偏技術面則可以考慮下面這兩本：

Wilkinson, Leland.(2005).Grammar of Graphics

Matthew O. Ward, Georges Grinstein, Daniel Keim.(2015).Interactive Data Visualization:Foundations, Techniques, and Applications

本書總共有15章：

第一章：介紹一套分析架構來做視覺化設計，藉由提問What-Why-How和相對應的Data-Task-Idiom
第二章：介紹What，也就是資料的類型和特性
第三章（精華）：分別介紹Ｗhy和How，這邊算是整本最重要的地方，把整個思考架構的大圖講解出來。
第四章:延伸這個分析架構，多加上domain situation level和algorithm
第五章:多介紹一些關於視覺編碼的原則
第六章:提供八個設計法則
第七章:介紹表格類視覺化
第八章：介紹空間資料視覺化
第九章：介紹網絡資料視覺化
第十章：介紹顏色在視覺編碼中的原則
第十一章：討論如何處理關於視覺化中“視角”的問題
第十二章：如何處理視覺化中多重視角的設計
第十三章：如何簡化資料呈現量
第十四章：如何填加附屬的資料
第十五章：用六個例子收尾

假如想快速搭建自己設計視覺化的架構，可以閱讀第一張和第三張，第二章有點惱人。
這邊分享第三章的內容：

visualization_action_whyvisualization_how

畫3D scatter plot的工具：plotly, scatterplot3d

發表留言

3D scatterplot的使用可以用來顯示如Principle Component Analysis的結果，目前在R中可以畫3D圖形的package其實不多，scatterplot3d和plotly是唯二可以做這件事情的，scatterplot3d可以做出傳統使用R lattice所展現出來的繪圖功能，基本功能完善，但無法即時動態的去旋轉圖，這其實是畫3D Scatterplot最想做的事情，而這部分plotly提供非常好的R接口可以完成，plotly畫出來的圖形是可以即時去調整他的角度和一些顯示的細節，在探索一些三維下有無cluster現象時，真的很方便！

這邊附上官網的範例，非常簡單上手

library(plotly)

mtcars$am[which(mtcars$am == 0)] <- 'Automatic'
mtcars$am[which(mtcars$am == 1)] <- 'Manual'
mtcars$am <- as.factor(mtcars$am)

p <- plot_ly(mtcars, x = ~wt, y = ~hp, z = ~qsec, color = ~am, colors = c('#BF382A', '#0C4B8E')) %>%
  add_markers() %>%
  layout(scene = list(xaxis = list(title = 'Weight'),
                     yaxis = list(title = 'Gross horsepower'),
                     zaxis = list(title = '1/4 mile time')))

幾乎語法上跟ggplot2類似，只是在做輸出時候的layout會嚴謹一點
screenshot.png