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