原文Data Visualization: Modern Approaches
作者 Cameron Chapman 譯者：西喬 黃色/小粗體字體部分為譯注
數(shù)據(jù)的表現(xiàn)形式可以是美麗、優(yōu)雅和描述性的。有多種傳統(tǒng)的數(shù)據(jù)表現(xiàn)形式 在每個(gè)項(xiàng)目及可能的場合被頻繁地使用：如表格、餅圖、柱狀圖等。但為了更有效地向你的讀者傳達(dá)信息，有時(shí)你需要絕不僅僅是一張餅圖。有更好的、深刻的、富于創(chuàng)造性以及富有趣味的方法來可視化數(shù)據(jù)。它們中的許多將在未來數(shù)年內(nèi)變得應(yīng)用普遍。
我們期待的是什么？有哪些些革新性的想法已經(jīng)在成熟使用？還有哪些創(chuàng)意地表現(xiàn)數(shù)據(jù)的方式是我們從未想過的？
讓我們看看最有趣和最現(xiàn)代的數(shù)據(jù)可視化方法，以及一些相關(guān)文章、資源和工具。
1. Mindmaps 概念圖
Informationarchitects.jp 依據(jù)分類、相似性、成功度、知名度和前景，為當(dāng)年互聯(lián)網(wǎng)上最成功的200個(gè)網(wǎng)站制作了一張趨勢地圖。這些網(wǎng)站以前顯然從未以這種方式建立過聯(lián)系。相當(dāng)詳盡。
譯注：（這是一個(gè)著名的數(shù)據(jù)可視化創(chuàng)意，作者通過改造東京地鐵地圖，將站點(diǎn)設(shè)計(jì)成地鐵站，每種網(wǎng)站應(yīng)用類型是一條地鐵線。比如粉紅色代表分享類網(wǎng)站，紫紅色代表工具類，大紅色代表技術(shù)網(wǎng)站，檸檬黃色代表知識類網(wǎng)站……
當(dāng)然如果你對東京的城市地理狀況有所了解，看這張地圖時(shí)會露出更多會心的微笑。設(shè)計(jì)師在圖中安排了大量暗喻和巧合，
比如google從澀谷移到了新宿的位置，而Youtube已經(jīng)控制了澀谷地區(qū)。澀谷在通常理解中，代表年輕人出沒的喧嚷的地方。而新宿代表黑社 會控制，很酷的地方。微軟移到了池袋，雅虎移到了上野，維基百科在新橋（一個(gè)遍布頭腦清醒上班族的地方）。日本的網(wǎng)站主要集中在金融路線附近，北部的站點(diǎn)線（山口線）上的項(xiàng)目多數(shù)比較“無聊”。等等）
2. Displaying News 新聞?wù)故?/h2>
Newsmap（新聞地圖）是google新聞聚合器上實(shí)時(shí)的新聞反饋的可視化呈現(xiàn)。數(shù)據(jù)塊的大小對應(yīng)了新聞受歡迎的程度。
譯注：（Newsmap反映的是google新聞聚合器實(shí)時(shí)更新的新聞。這種數(shù)據(jù)可視圖基于treemap樹狀圖的算法，適合表現(xiàn)大量信息的聚合。
用顏色、顏色深度、標(biāo)題字號、區(qū)塊面積來展現(xiàn)歸并后的信息。打破空間限制，幫助用戶快速識別、分類和認(rèn)知新聞信息、平面而直觀地展現(xiàn)不斷變化的信息片段。）
Voyage是一個(gè)rss閱讀器。它在屏幕中心呈現(xiàn)最新更新的新聞。新聞可以縮放和退出，有一條基于時(shí)間軸的導(dǎo)航。
譯注：（Voyage根據(jù)當(dāng)前時(shí)間點(diǎn)形成一條坐標(biāo)軸，使用了三維效果來分層次展現(xiàn)當(dāng)前的資訊和新聞點(diǎn)，將信息的時(shí)間要素呈現(xiàn)地非常生動(dòng)?？赏ㄟ^rss地址控制訂制信息來源。）
Digg BigSpy 將最受歡迎的文章放在頂部，字號越大代表支持者越多。
譯注：（digglab使用5種動(dòng)態(tài)的數(shù)據(jù)可視化方式來表現(xiàn)信息的數(shù)據(jù)變化狀態(tài)。
Digg BigSpy是試驗(yàn)項(xiàng)目其中之一，最新被digg的新聞會向下滾動(dòng)更新屏幕，digg數(shù)越高，標(biāo)題字體越大。在版面中使用字號變化是傳統(tǒng)媒體的表現(xiàn)手段，在這里和實(shí)時(shí)滾動(dòng)的效果結(jié)合，很有沖擊力。）
Digg Stack: 根據(jù)用戶的digg數(shù)將文章排列成許多柱狀條，digg數(shù)越高，柱型越高。
譯注：（Digg Stack同 樣也是digg lab的實(shí)驗(yàn)性項(xiàng)目之一，將最新/最熱/全部的100條digg文章排列成一行柱狀圖，水平線上的柱形高度代表digg數(shù)，水平線下的柱形高度代表評論 數(shù)。
某篇文章digg數(shù)實(shí)時(shí)增加時(shí)，會從屏幕上方掉一個(gè)小方塊下來，俄羅斯方塊那樣，溶進(jìn)該新聞對應(yīng)的柱形中。點(diǎn)擊單個(gè)柱體可以分別查看每個(gè)時(shí)間區(qū)間內(nèi)的 digg指數(shù)。這是一個(gè)非常有實(shí)時(shí)感和動(dòng)感的視覺系統(tǒng)，極好地呈現(xiàn)了數(shù)據(jù)生成的實(shí)時(shí)性和聚合性。）
3. Displaying Data 數(shù)據(jù)展示
Amaztype 圖書搜索：根據(jù)從亞馬遜上采集的數(shù)據(jù)，將圖書的搜索結(jié)果根據(jù)你所提供的關(guān)鍵字的字母形狀進(jìn)行排列。可以點(diǎn)擊單本書查看詳細(xì)信息。
Flickrtime 也應(yīng)用了相似的創(chuàng)意。這個(gè)工具利用Flickr API 將上傳的圖片根據(jù)當(dāng)前時(shí)間排列成時(shí)鐘數(shù)字的形狀。
c
Time Magazine（時(shí)代周刊）使用峰值形狀的分布來強(qiáng)調(diào)地圖上美國人口的稠密程度。
CrazyEgg 使用熱圖來讓您研究您的訪客的新聞，通常被點(diǎn)擊更多，更受歡迎的區(qū)域，使用的更“溫暖”的紅色來高亮顯示。
譯注:（CrazyEgg允許注冊用戶通過提交頁面url，顯示頁面的熱點(diǎn)圖、獲取每個(gè)元素的詳情、查看原始數(shù)據(jù)的完整摘要信息。熱圖是用戶行為分析的常見方法，這是一個(gè)著名的UE研究分析工具，給UE分析師提供觀察用戶行為，做出設(shè)計(jì)改進(jìn)意見的數(shù)據(jù)基礎(chǔ)。）
Hans Rosling TED Talk （漢斯。羅斯林的TED演講）瑞典著名教授Hans Rosling發(fā)表了一次傳統(tǒng)期的演講，解釋了他提出的表現(xiàn)統(tǒng)計(jì)數(shù)據(jù)的新方法。他的趨勢分析軟件（剛剛被google收購）將復(fù)雜的全球趨勢、十幾年的流行數(shù)據(jù)轉(zhuǎn)化為生動(dòng)的動(dòng)畫。用網(wǎng)格上的多彩的泡泡代表亞洲的各個(gè)國家，展現(xiàn)全民醫(yī)療和財(cái)富的狀況。用動(dòng)態(tài)的鐘型曲線表現(xiàn)國民收入分配的漲伏。在 Rosling的手里，全球趨勢——預(yù)期壽命、兒童死亡率、貧困率——都變得清晰、直觀和有趣。
三視圖展示了地球的3個(gè)視點(diǎn)： 每個(gè)國家使用一個(gè)圓形代表，用圓圈的大小來代表軍費(fèi)開支額度，顏色的深度來代表占財(cái)政收入的比例，數(shù)據(jù)的演示非常緊湊和美觀。
We Feel Fine（我們感覺很好）根據(jù)來自大量blog的統(tǒng)計(jì)結(jié)果，表現(xiàn)了人類的感情。
譯注:（這是一個(gè)駭人的項(xiàng)目。。從2005年8月，該項(xiàng)目組從大量頁面上記錄人類的感情。每個(gè)幾分鐘，系統(tǒng)就會搜索世界上新近發(fā)布的blog里包含“我覺得”或“我的感覺”這類短語的文章，記錄包含這些短語的句子，并計(jì)算出里面c所包含的情緒，是悲傷、快樂、沮喪。這些信息和作者的社會結(jié)構(gòu)、年齡、性別、地理位置以及當(dāng)時(shí)當(dāng)?shù)氐奶鞖庖黄鸨槐Ａ粝聛怼?/h5>
這個(gè)包含了數(shù)百萬人感情的數(shù)據(jù)庫，每天新增15000~2000條記錄，并提供了一系列有趣的接口用于查詢和做數(shù)據(jù)挖掘。
上圖中的粒子系統(tǒng)是通過接口生成的可視化形式之一，抽取了1500條數(shù)據(jù)，每條數(shù)據(jù)是一個(gè)粒子，代表每個(gè)人的一種情緒。顏色對應(yīng)情緒類型，比如幸福是亮黃色，悲傷是深藍(lán)色，憤怒是紅色，平靜的感情是淺綠色。每個(gè)粒子的大小和表達(dá)情緒的語句的長度關(guān)聯(lián)。）
Visualizing the Power Struggle in Wikipedia（維基百科上：可視化的爭議）在熱力地圖上展示了最受歡迎的文章和被搜索最頻繁的請求。
譯注:（疑原文有誤。heatmap：熱力型地圖，做用戶體驗(yàn)分析的同學(xué)可能比較熟悉，是一種使用冷暖色來映射二維變量，以便于做出聚類分析的圖像，擅長用于體現(xiàn)頻率、密度等。
譯注:但是下面這兩張信息圖形使用的是氣泡型地圖。反映的是wiki百科中爭議性詞條的修訂次數(shù)。圓圈越大，修訂次數(shù)越多。排名前幾位的是：耶穌、阿道夫希特勒、2003年10月、任天堂革命、卡特里娜颶風(fēng)……）
Websites as graphs 圖表網(wǎng)站。一個(gè)HTML DOM的可視化應(yīng)用程序，根據(jù)url、表格、div標(biāo)簽、圖片、表單和其他標(biāo)簽，將網(wǎng)站可視化為信息圖形。
譯注:（這是一個(gè)分析頁面源碼的項(xiàng)目，使用樹狀分支圖。其中藍(lán)色代表<a>，紅色代表<table>類標(biāo)簽，綠色代表<div>,紫色代表<img>黃色代表數(shù)據(jù)集群（下拉菜單）…………。于是每個(gè)網(wǎng)站頁面的特性就以這樣一種奇特的圖像方式呈現(xiàn)出來了，從不同的結(jié)果圖像中可以看出每個(gè)網(wǎng)站的不同性格，比如門戶網(wǎng)站會生成非常龐大的樹狀圖；某些blog，主要是鏈接，會形成放射型圖像。蘋果網(wǎng)站生成的圖形就很簡潔和規(guī)整。google.com就更不用說了，自由非常少的幾簇。猜猜上面的圖代表的是哪個(gè)網(wǎng)站？
譯注:yahoo.com。你可以發(fā)現(xiàn)它的圖里面沒什么綠色，但有許多紅色。。因?yàn)樗麄儧]有使用div布局，這在07年也是很罕見的了。）
Interactive History Timeline （互動(dòng)歷史年表）將英國的歷史劃分為可交互的塊狀數(shù)據(jù)，同時(shí)呈現(xiàn)了歷史時(shí)間的密度。
譯注:（這個(gè)系統(tǒng)里每個(gè)顏色塊代表一段歷史時(shí)期，白點(diǎn)代表該時(shí)期中的歷史大事件。每個(gè)色塊可放大點(diǎn)擊，背景圖上有該歷史時(shí)期的標(biāo)志性圖像，可點(diǎn)擊每個(gè)白點(diǎn)查看事件信息。是一個(gè)不錯(cuò)的歷史演示系統(tǒng)，設(shè)計(jì)雅致，操作感很強(qiáng)，形式和內(nèi)容很匹配。）
Winning Lotto Numbers （樂透大獎(jiǎng)號碼）該圖展示了每年的中獎(jiǎng)號碼中每個(gè)數(shù)字的出現(xiàn)頻率。當(dāng)然這張圖并不算是一個(gè)很清晰的案例。
譯注:（這張圖描繪了樂透獎(jiǎng)號碼在88~06年里出現(xiàn)的頻率。每種顏色代表一個(gè)球，編號從1~49。作者認(rèn)為所有的數(shù)字集群傾向于形成一個(gè)循環(huán)，會有12.24%的重復(fù)率。。。）
Elastic Lists （滑動(dòng)菜單）使用滑動(dòng)菜單（也叫手風(fēng)琴菜單）的原理來展現(xiàn)多維的數(shù)據(jù)結(jié)構(gòu)。每組菜單代表一種數(shù)據(jù)維度，每個(gè)菜單項(xiàng)代表一種屬性。你可以通過點(diǎn)選多個(gè)菜單項(xiàng)，瀏覽數(shù)據(jù)在不同維度不同屬性上的組合。每個(gè)菜單項(xiàng)的高度和寬度和該屬性內(nèi)數(shù)據(jù)總量的相對比例有關(guān)聯(lián)。作者的blog 會更新一些關(guān)于數(shù)據(jù)可視化領(lǐng)域的實(shí)驗(yàn)性研究的文章，值得觀賞，很有收藏價(jià)值。
譯注:（這個(gè)項(xiàng)目對于實(shí)現(xiàn)多維交叉的數(shù)據(jù)的平面化展現(xiàn)，是一個(gè)很好的范例。每個(gè)菜單實(shí)際上充當(dāng)了一個(gè)過濾器，把他們想象成一組多選菜單就好了。但是形式比乏味的多選框要迷人多了。）
The JFK Assassination Timeline（肯尼迪遇刺事件的時(shí)間軸）使用ajax來可視化表現(xiàn)歷史事件：約翰.肯尼迪的遇刺和時(shí)間軸上眾多關(guān)聯(lián)性條件。更新的案例的相關(guān)文章。
4. Displaying connections 顯示關(guān)聯(lián)
Munterbund 使用信息圖形展現(xiàn)了書中文字的相似性。“我們嘗試創(chuàng)造一個(gè)能夠按照某些定義好的規(guī)則來自動(dòng)生成圖像的系統(tǒng)。難度在于圖像形式和文章的排版樣式 這兩者都是極富吸引力和信息量的。”
譯注：（這個(gè)項(xiàng)目根據(jù)詞頻等信息要素關(guān)聯(lián)到扇形區(qū)域的直徑和弧度，以及控制氣泡的面積。有一套非常復(fù)雜的篩選算法。在可以看到項(xiàng)目組嘗試過的多種可視化算法，以及一批十分魅力的成品）
Burst Labs（突發(fā)實(shí)驗(yàn)室）使用泡泡圖來表現(xiàn)你提出的搜索請求之間的相似和關(guān)聯(lián)性。雖然不那么前衛(wèi)但還是令人振奮。
Universe DayLife 將某一話題關(guān)聯(lián)的事件、人物和新聞事件像星座那樣陳列在它的周圍。
譯注:（這也算一個(gè)令人驚異的項(xiàng)目，創(chuàng)作團(tuán)隊(duì)模擬了一個(gè)數(shù)字化星空，每個(gè)關(guān)鍵字都是一個(gè)星座。通過輸入關(guān)鍵字將你請求查詢的星座定位在屏幕中心，旁邊圍繞著相關(guān)的關(guān)鍵字星座。內(nèi)容包括圖片、新聞、人物。每時(shí)每刻地球上都會發(fā)生各種事件，事件之間有關(guān)聯(lián)，會互相作用。從這點(diǎn)上，使用宇宙星系來表現(xiàn)新聞事件的特效是很適合的。這個(gè)項(xiàng)目除了極富想象力，界面上也極具特色。創(chuàng)作了一種星座字體，所有的ICON和邊框都用星座的形象來表現(xiàn)。）
Musiclens 會根據(jù)你當(dāng)前的心情和音樂喜好制作圖表，給你推薦音樂。
你可以在Figd’t Visualizer（Figd’t展臺）上和網(wǎng)絡(luò)上的其它用戶進(jìn)行互動(dòng)。你的用戶界面是由Flickr和LastFM上的TAG構(gòu)成的，使用任何Tag都可以創(chuàng)建一個(gè)磁極，在照片或音樂中和你共用這個(gè)tag的用戶會被吸引到磁極的周圍。兼容Mac OS X，Windows和Linux平臺。測試版本。
譯注:（通過照片和音樂喜好，創(chuàng)作者希望動(dòng)態(tài)、可視化地表現(xiàn)人與人之間的關(guān)系：傾向性，趨勢，聚合，吸引力。除了直線條的連接線，作者還在另一張圖中使用了優(yōu)美的曲線，整體造型非常迷人。）
What have I been listening to?:（究竟我在聽什么？）拜倫.李通過創(chuàng)建直方圖描述了他的音樂之旅。
譯注:（每種顏色代表一個(gè)歌手，拜倫.李搜集了他在last.fm上18個(gè)月來的聽歌記錄。創(chuàng)作者選用這種可視化形式原因是它的失真最少，能生成高雅的非對稱曲線。這種的圖表形式被稱為Stream Graph流圖。）
Shape Of Song（音樂的形狀）音樂看起來像什么？音樂的形狀是一個(gè)看起來很怪誕的命題。這款定制軟件使用半透明的拱形來描述了音樂的形狀，讓人們能看到存在于互聯(lián)網(wǎng)上的任意音樂的真實(shí)形狀。
譯注:（該項(xiàng)目用這種圖像可視化了許多音樂類型和樂曲，直觀地將節(jié)奏、韻律和起伏展現(xiàn)出來。每種音樂風(fēng)格的個(gè)性與差異在這里表現(xiàn)地很明顯。這類數(shù)據(jù)可視化方式真正實(shí)現(xiàn)了“通感”。）
Musicmap（音樂地圖）:他們創(chuàng)建了一個(gè)頁面，通過連接線表現(xiàn)音樂之間的關(guān)聯(lián)。
Musicovery 展現(xiàn)了不同音樂喜好之間的關(guān)聯(lián)性，讓你在聽一首音樂的時(shí)候發(fā)現(xiàn)相似風(fēng)格的歌曲。
譯注和潘多拉或last.fm一樣推薦試聽網(wǎng)站，會根據(jù)你的喜好選擇，為你推薦音樂。同時(shí)可視化音樂之間的關(guān)系。）
Lanuage Poster （語言海報(bào)）使用傳統(tǒng)的時(shí)間軸方式來表現(xiàn)程序語言的發(fā)展史，簡單的線條也能用于表現(xiàn)復(fù)雜的狀況。
譯注O’REILLY出版社制作的海報(bào)，每根箭頭線代表一種語言的發(fā)展歷程，同時(shí)反映了語言之間的繼承或分支關(guān)系。）
5. Displaying web-sites 可看的網(wǎng)站
Spacetime （時(shí)空)公司承諾，那些通過網(wǎng)頁的小縮略圖像挖礦一樣查找信息的時(shí)代一去不返了。它提供的服務(wù)易讀和優(yōu)雅的三維特效來呈現(xiàn)你的搜索請求結(jié)果，支持google 、yahoo、Flickr 、eBay 、google圖片搜索。
UBrowser 是一個(gè)使用開源的概念模型。Mozilla的渲染引擎Gecko的植入實(shí)例：使用OpenGL在幾何面上動(dòng)態(tài)渲染頁面，。
6. Articles & Resources 文章和資源
該項(xiàng)目介紹了數(shù)據(jù)可視化最美麗的方法和進(jìn)一步的參考資料。擁有超過450輯的圖片。在他的文章《Infosthetics: 數(shù)據(jù)可視化之美》中，Andrew Vande Moere通過他的知名blog《Infosthetics》探討了數(shù)據(jù)可視化的審美及領(lǐng)域中的前沿應(yīng)用。創(chuàng)意設(shè)計(jì)意圖的組合形式、內(nèi)涵以及迷人的案例。這是下一代的新藝術(shù)領(lǐng)域？
這篇文章介紹了13種新的數(shù)據(jù)可視化技術(shù)的實(shí)例以及深入的參考。
7. Tools and Services 工具和服務(wù)
