來聽這場演講 醫院、菜價、Youbike 資料視覺化的實現–如何在 5MB 的瀏覽器上呈現 5GB 的資料？ ，老樣子，即時筆記。

講者：Muyueh（李慕約）
網站：http://muyueh.com/42/

比起一連串表格數值，資料視覺化能加快訊息傳達、降低使用者取得目標資訊的成本，更突顯所有數值不合理的地方。

媒介

已不僅在是紙上，可以有更多互動技巧。

資料視覺化的實現

資料 + 假設 + 計算＝結論

數據來源會被質疑，「假設」更容易被受到挑戰。
讓使用者相信、不用質疑或懷疑。當「假設」不同，使用者就會挑戰你。
挑戰你的方式可以用「使用者自由操控」來讓他使用你提供的資料，增加使用者對資料的信賴感。

彈性大的介面

傳統紙本表格資料呈現，當改變欲呈現的資料主體時，整份表格就要重做。使用前端技術只要從新排列即可。
（可利用過場動畫等，讓使用者了解資料結構。）

重複利用圖表

現在是前端的時代，有沒有可能產出現成的樣板、模組，像 Word 裡的直方圖、圓餅圖等是通用型的，未來遇到相似結構的資料可以立刻馬上套用。

使用者操作自由度

低操控自由度：畫面清楚簡單但無互動，使用者停留時間短。
高操控自由度：操作難度高、資訊量龐大、可能需要教學，但使用者對資料較信賴。

中場課題

試著將 顏色列表 資料視覺化
http://zh.wikipedia.org/wiki/%E9%A2%9C%E8%89%B2%E5%88%97%E8%A1%A8

（我懂耶我懂～～舉手！）
「先分 RGB、CMYK，再用色相環計算顏色數值，可以再分層下去。有很多種作法。」
（這問題根本衝著設計師來的。）

講者的作法：http://muyueh.com/greenhoney/
該站包含中文色彩命名的分類、英文色彩名稱分類，另有水果；花卉；明、暗、亮；地理區域等各種命名方式。

怎麼做資料視覺化

描述、研究你手上的資料，將新發現的東西用圖表呈現。

不是把資料扔給前端或美工就會有美美的結果跑出來！

沒有在資料裡附加更多新價值的話，閱者也不會得到什麼。開發者如果沒有認真研究手上要資料視覺化的資料，是無法做資料視覺化的。

要知道用什麼方式去切換圖表的資料模式，只能靠平時多看多學累積的經驗，以及自己的好奇心了。

好的資料視覺化圖表會告訴你更多

如何讓使用者能夠非常簡單就查覺到：「什麼情況下菜價會是這麼完美穩定、而其他地區的菜價波動這麼大？」開發者對手上資料的認知和研究不夠深刻，就無法完整發揮手上資料的力量，更難傳達新資訊給使用者。

數字會說話

數字能突顯問題。

簡單易懂的圖表讓資訊更容易被閱讀，有問題的數字會非常容易被看到，資料視覺化就是方便使用者抓出問題的利器。使用者能透過好的資料視覺化圖表發現更多他原本沒注意到的部份。

技術面

（開始準備進入 RD 才聽得懂的領域了，我努力點，看能聽懂多少就寫多少。）

要怎麼把資料濃縮？

瀏覽器傳輸上限是 5 MB，要怎麼把幾 G 的資料濃縮到 5 MB裡是重要課題。

• 分類切割，依最可能被操作的分類方式切割資料、拆成幾個檔。
• 重覆的資訊，如日期、地區等中文字，中文字很吃空間，重覆有規則的比較像標籤。標籤可以用數字，資料量就會大幅減少。
• 用不到的欄位就刪掉了。

以上都是假設，如果一開始就擺明「這個欄位是我不需要看的所以就砍掉」，萬一砍錯就麻煩了。

連續數字怎麼簡化？

• 標籤法：18歲以下一個標籤，18~30一個標籤，減少資料量。
• 假設小數點之後的位數都不重要，全刪掉。（小心假設錯誤。）

關心的重點

和顯示層面連動，使用者關心哪個維度，就呈現那個維度的資料就好。分類的方式可以連動圖表項目分類，根據使用者操作去撈不同分類或標籤的檔案。

預想各種可能的輸出，做不同的組合，不要什麼都靠 Server 運算硬上。資料量就會減少。

時間成本

80% 在前期資料研究，20％ 才在實作上。