2011年5月3日

簡易的標籤雲演算法

標籤雲(Tag cloud)是一種視覺化資料呈現的方法,因為我們在看「一堆資料」時,通常只會注意最醒目的項目,而自動忽略掉那些不醒目的東西,例如誇張的字型、大小、顏色。如果在一個資料集合中,有某個數值可以用來當計算準則,而且數值高通常也是使用者會感興趣的東西,就能套用標籤雲的做法。

舉例來說,底下這張 Web 2.0關鍵字組成的標籤雲,通常看一眼就會注意到Web 2.0字樣。
Fig 2: A Web2.0 Tag cloud, by Markus Angermeier, 2005 (refer)
那標籤雲的程式該怎麼寫呢?

首先來看一個範例,這是只有用不同字體大小組成的標籤雲,所以在計算時只需考慮其中一項數值。
假設系統已經有一組資料集,是不同商品的銷售數量。
  • MP3隨身聽 (10)
  • 平板電腦 (30)
  • 320GB隨身硬碟 (15)
  • 筆記型電腦 (5)
括號內的數字就是已銷售數量。

先取最大值=30、最小值=5。

然後開始套用公式:字型大小級數 = (最大值 * (銷售量 - 最小值)) / (最大值 - 最小值)

計算出的字型大小級數為:
  • MP3隨身聽 (6x)
  • 平板電腦 (30x)
  • 320GB隨身硬碟 (12x)
  • 筆記型電腦 (0x)
如果要直接用這個計算結果顯示,最小值的部分應該例外處理,設定成1x,才不會根本看不到。

但是在網頁上呈現時,我們可能希望控制字型大小範圍,免得小到看不見、大到整個版面都走樣。假設用相對大小做設定(預設16px,200%就是32px),希望最小字型百分比為75%、最大字型百分比為300%,其中百分比差距225%。

所以用公式把字型級數換算成相對百分比:字型級數百分比=字型大小級數/最大級數值。

計算出的百分比為:
  • MP3隨身聽 (0.2 = 20%)
  • 平板電腦 (1.0 = 100%)
  • 320GB隨身硬碟 (0.4 = 40%)
  • 筆記型電腦 (0 = 0%)
再換算成我們希望的大小範圍:實際字型大小=最小字型百分比+(相對百分比*(最大字型百分比-最小字型百分比)),例如0.75+0.2*2.25=1.2(120%)。

最後計算結果就是:
  • MP3隨身聽 (120%)
  • 平板電腦 (300%)
  • 320GB隨身硬碟 (165%)
  • 筆記型電腦 (75%)
這樣銷售最好的平板電腦就會顯示成我們希望的最大字型300%,而最差的筆記型電腦就是最小的字型75%。

沒有留言:

張貼留言

lyhcode by lyhcode
歡迎轉載,請務必註明出處!