Showing posts with label InfoVis. Show all posts
Showing posts with label InfoVis. Show all posts

8/18/2009

Interaction Cost

最近念了一篇Infovis Symposium 2008的paper

題目是:A Framework of Interaction Costs in Information Visualization(link)
作者是Heidi Lam,現在在google工作
這篇文章review了434篇paper,然後參考了Norman's model,將所有user在Interaction的cost分成了七項,並且分別舉例,方便大家理解。(這裡的cost不妨當作機會成本來理解)

Norman's model是Donald A. Norman 提出來的HCI model,大致是將Interaction分成兩個stage, 7個細項:



  1. Execution: 指user的想法到傳遞給computer的過程
    (1)  establish the goal: user:在腦中決定想要做的事
    (2)  forming the interaction:組織系統操作的過程
    (3)  specifying the action sequence:確定行為流程
    (4)  execution the sequence:執行行為

  2. Evaluation:指computer的feed back傳遞到user理解的過程(1)  perceiving the system state
    (2)  interpreting the system state
    (3)  evaluating the system state


不過在這篇paper它修改了原始的架構,改成3個stage,將原來establish the goal 獨立為一個階段,因為這個階段與系統本身的互動並沒有太大關係,所以獨立出來。而原來兩個stage仍繼續保留。新版的stage如下:





然後他根據這七個階段,分別定義出七種不同的cost:

2/23/2009

Prototype!!!!

I just finished my prototype last night
(I shall finished it earlier, but I am just too lazy~"~)

try this online

the data set is the abstract of the vis week papers during 1990 to 2008.


2/09/2009

Sankey Diagram

在我苦思好久怎麼解決表現relationship問題的時候

偉大的Chris提出了一個超棒的想法:Sankey Diagram

剛好可以解決我的問題!!!


然後他說我的東西結合Sankey Diagram大概就像Theme River結合Sankey Diagram

應該還滿有價值的(撒花花~~)

但是我最好不要讓它變得太application

朝這兩個圖的概念結合起來應該是比較可行的方向!!(筆記)

2/02/2009

Difference between InfoVis and HCI

HCI focus on "New interaction skill"

Infovis uses tranditional interaction, but what may be more important is "New Layout"


User study is really important for HCI, and it also helps a lot on InfoVis.
(But I think they're not as important as that in HCI)

9/23/2008

改版demo

Demo link

覺得還是flash做出來的效果比java好,所以就把程式改成flash版了

不過初版還少很多東西

1. clustering algorithm →不知道用哪一個clustering比較好,目前implement的很沒有效率,點多很容易就炸,但我又要限制在3組內儘可能大…所以實在不知道要用哪一個演算法比較好

2. group issue → 想要有階層架構,如果單就一個人的tag的資料來呈現,hierarchy的效果不是那麼明顯,但如果使用group的階層又怕會有一字多義造成階層錯誤的情況。

3. remove overlap: 參考[Using Spring Algorithms to Remove Node Overlapping] 的作法來移除重疊的點。這篇主要的原理是以變動的k來調整edge的長度


4. 另一大目標:標示出"使用者自訂字",例如我自己會把課程網站都加上一個標籤叫course,把研究相關的都加上一個research,要怎麼從tag裡面找到這種對使用者有特別意義的詞呢?


7/29/2008

OntoVis

website: link
paper: link

這是馬匡六教授在2006年IEEE Transactions on Visualization and Computer Graphics中發表的一套系統。

以social network為例,傳統的social network圖中, 往往使用Node表示actor,edge表示relationship,node上或edge上的attribute則是運用色彩、大小…各種屬性來比較。這種方法在分析attribute上的種類數量少時,非常的清楚(如圖1),然而一旦種類多了,就會讓畫面看來顯得凌亂,而且容易混淆!


圖1:利用顏色呈現各node的群組關係(圖片為我之前做tag cloud的測試設計圖)


而馬教授提出的以虛擬點呈現attribute的作法卻可以解決這個問題。對Ontovis(馬教授開發的系統)而言,attribute的value可以是一個"virtual node"。舉例而言,假定我們有4個組織的資訊,當我們想要看出有幾個組織位於希臘,那可以把"希臘"這個所在地的value設為一個virtual node,而得到圖2,從圖2可以看出來,4個組織都與Greece的node相連,可見這4個組織都位在Greece。


圖2: Greece與4個組織相連。


這種作法同時結合了filtering,還可以同時清楚的了解屬性間的異同,例如同上面的例子,我想要知道在Greece中的組織,有哪些分別是屬於anti-globalization及Leftist,我可以分別將這兩個attribute及Greece加入virtual node中,然後透過edge的關聯找出我想要的資訊。(p.s.這個例子跟paper中提及的figure 1(c)有些微不同,paper中例子的目的是要找出相異的attribute,而這個例子則是要找出有A屬性的Node們,在B屬性的分佈狀況)



此外,在Social Network中,常常會有兩個node間有多條Path可達,為了方便分析,圖3將一些不相關的node filter掉,僅保留相關的node們的資訊




圖3 將多餘的info 移除前後比較

OntoVis另外一個特色是利用Node的大小表現"Connectivity",因為這也是Social network中很常用來判斷一個節點的importance。因為OntoVis的Layout採用FDL,然而FDL並未考慮到Node size,所以他有使用一些refinement來處理tag的overlapping

7/25/2008

What is Visualization??

坦白說,去完這次的CGW之後,一度讓我有點疑惑到底什麼才是visualization,感覺起來會中很多東西都不是我之前認為是屬於visualization的東西卻被投到visualization的session中。但是究竟什麼是我心中以為的visualization呢?可能是我研究得還不夠透徹,總覺得心中似乎有個答案,但一直不知道怎麼表達我腦中所理解的visualization。沒想到我回來以後,卻在我的Reader上看到一個來自於EagerEyes.org 很棒的說明(原文連結)。因為太開心了,我決定嘗試將我所理解的重點寫下來,也順便驗證一下我的理解究竟有什麼不夠完備的地方!

在大多數人的認知,感覺真的要說起來,似乎什麼事情都可以說成跟visualization有關,然而作者覺得,Visualization至少應該要具備以下三項條件(當然,visualization要做的應該更多,不過這邊提到的是三個基本要素):
  1. 建構於(非visual的)資料之上。因為visualization的目的就是為了連接資料。換而言之,資料本身可能是來自於抽象的或是無法立刻被人了解的。因此,攝影(photography)及影像處理( image processing)都不能算是visualization。visualization是把invisible的轉換成visible。
  2. 產出影像。雖然似乎聽起來直覺上就是這樣,但這說法好像還不夠。產出的visual必須是想表達的主軸。輔以其他形式的呈現只能是為了傳達一些額外的資訊。因此,如果產出的圖像儘是work的一小部份過程,那這也不能算是visualization
  3. 結果必須是可讀及可理解的。visualization最重要的一個目的就是提供一個方法讓人們了解資料。雖然在將non-trival 的資料轉成可讀性高的圖表時,或多或少都會遺失一些其他的資訊,但至少必須呈現出資料的某些面向。

---

暫時先這樣好了,明天再來補上後面的例子跟重新順一下我的語法XD

7/23/2008

CGW Memo

Session: Animation
→這個session的領域我很不熟,就記有興趣的好了

以運動擷取資料程序式動畫品質
如果直接用程式產生動作(ex. 走路)的動畫,看起來會很不自然,
他們提出的方法是藉由motion capture的方式來修正auto generation的結果
motion capture只需要動作相同,即使角色不同都可以用同樣的動作來修正。

Animating Characters in Pictures
將picture中的角色產生3D model再做動畫
Model fitting->skin fitting -> skeleton -> Thickness adjustment


Session : VisualizationⅠ

應用於帕金森氏病人復健與治療計畫之虛擬環境場開發
使用Virtual Reality的方法建構帕金森氏病患的復健環境
(搭配偵測手套及立體視覺影像)

MizDesigner: a Visualization of Designer's Relationship in Ideastorming
用tag的co-occurence來找tag 的關聯性(只考慮co-occurence)
(They claim that there's nobody adopt the same way... but I don't think so)

使用叢集式電腦建構高互動平行顯示陣列
聽得不是很懂…略

以社會傳播模型模擬人群之集體社會行為
模擬人群傳播的特性,設定了人類內心的4種狀態,加入了被影響的門檻值來建立人類活動會受其他群眾影響的模型,(好像還沒有打算要設計實驗要驗證)


Keynote: Information Theory and Visualization
沈漢威教授提出了將data視為Random Variable,然後由entropy來處理volum visualization的idea,Infovis應該是要儘可能的呈現多元資訊,所以在View的Selection可以考慮選擇entropy較大的來呈現。同時,因為可以用來呈現資料的資源有限,所以在高解析度時應該以"important"的來顯示,而如果解析度的高低呈現結果差不多時,用低解析度就可以了。QA時間時,有人提到independent跟dependent variable的問題,這好像也是另一個值得探討的issue。然後,歐陽明教授也提及了"美學"與人類的認知的問題,教授提到了朝"visual intelligence"發展也許是不錯的方向。

Session: Visualization Ⅱ

以立體視覺為基礎之多物件軌跡記錄系統
以3D方式紀錄多物件的軌跡取代傳統只紀錄2維座標的方式。

A Hierachical Streamline Construction Method
利用流線(有箭號)的方式取代傳統的色調強化圖表現颱風動向,可以更明顯的看出風向。

電腦斷層攝影於植牙時對金屬假影的處理
解決某些人有金屬假牙時在照射電腦斷層攝影中會有干擾的情況
(太多物理的器材我聽不懂了啦~"~)

刀具掃開體積的容積素化之快速計算法
模擬手術刀的使用,提供給醫生在手術前模擬手術情況評估
(關於數學部份我實在無法了解…)

Integrating the PSONN and Boltzmann Function for Feature Selection and Classification of Lymph Node in Ultrasoinc Images
完全在講作法…




補充1:晚上跟大家一起住汽車旅館時在床上看到的


補充2: 對於Visualization的解釋似乎是太新的領域以致於很多看起來應該是很偏VR、Vision的題目也全部被投到這個Session來了,讓我還滿疑惑的!不過也許是我看過的visualization的東西太少了吧…

補充3: 7/25下午的VisualizationⅡ的present很多都是只有講解他們怎麼作,而沒有說明為什麼要這樣做,讓在底下聽的我們很容易lost!

7/20/2008

Vizster



Vizster是一套專門用來呈現Social Network 的Visualization tool,其特色如下:
1. 用2D的Force Directed Layout 來表現Social Network,
2. 可以觀測egocentric的SN
3. 提供即時的群組分析(可以指定群組的大小),群組演算法 - Newman’s community identification algorithm
4. 提供搜尋功能,可以尋找特定Node或attribute
5. X-Ray Mode:呈現不同屬性的比較
6. Accessibilty:
(1) 標示出有相連的節點
(2) 找出任兩個節點相通的中繼點




Egocentric View



X- Ray Mode: 用節點的顏色呈現各節點同一屬性值的比較


Cluster - 自動分群,將同一群組以同色背景呈現


顯示任兩節點間的中繼點

Demo 影片:http://www.cs.berkeley.edu/~jheer/vizster/vizster.wmv

★My Comments

1. 一次只針對同一個attribute的比較
2. Cluster雖然可以動態的決定群組大小,但是一般user很難明確知道自己想要分的群組範圍,所   
 以必須把各個size都試過後才能決定
3. FDL沒有解決節點重疊的問題
4. 呈上,因為FDL位置的重疊 與 群組用底色呈現,導致有些節點在視覺上被誤判群組
5. 沒有解決 multi-group的問題

7/08/2008

Many eyes

http://services.alphaworks.ibm.com/manyeyes/app

Manyeyes提供了不同的visualization views, 讓使用者可以上傳檔案(檔案格式),建立自己的Visualizations。雖然現在網路上有很多類似的visualization tools,但是目前survey到的很少有整合這麼多visualizations。


這個網站是IBM實驗室的產物,所以他們也根據使用者上傳的資料型態,選擇的visualization tools…等做了個分析,投稿在2007 IEEE Infovis上[Many Eyes: A Site for Visualization at Internet Scale]。

Tag Cloud

On displaying Tag, there are some important issue should be noticed.

1. Relationship with other words
Ⅰ semantic relationship
ex. "Information Visualization" and "Graphics"
Ⅱ hierarchy structure
ex. "Computer Science" and "Information Visualization"

2. Importance to the user


For now on, I would like to treat these tags as an social network.
The nodes are tags themselves, and the edges are the relationship between tags.

To display the similar concept of words, My Coloring Algorithm would be used.
However, Making nodes to display in similar color cannot shows the hierarchical structure of words. It seems that combine Treemap and Node-Link network is a good choice.
(For example, wordle is an good example, although the vertical layout is difficult for reading)

View tag's importance in Node size is trivial, However, Node size is depand on font size and the string length. the former can be solved by assign different size to each words, the later is still unsolved.

5/15/2008

ISOM Layout VS. Force Directed Layout

同色的為同一組,ISOM出來的效果在不畫出edge時,就已經很可以表現cluster的感覺



3/25/2008

Interesting WebSite about WordCloud

http://www.wk.com/

12/10/2007

Tag Visualization(2)


11/25/2007

Prefuse Tips

1. Set Label Size
 Iterator iter = vis.items("graph.nodes");
 while ( iter.hasNext() ) {
   VisualItem item = (VisualItem)iter.next();
   item.setSize(4)
 }

2. Read Data
 Iterator iter = vis.items("graph.nodes");
 while ( iter.hasNext() ) {
   VisualItem item = (VisualItem)iter.next();
   double tw = item.getDouble("weight");
 }

Tag Visualization

這是用prefuse的example先套出來的圖


沒有大小沒有顏色,所有字幾乎都黏在一起了,完全抓不到重點啊!
所以現在幫字依權重加上背景顏色的深淺,於是可以得到下圖
看出來flash最重要了耶!!




with size Effect