可視化開腦洞期刊(一)

人類的大腦嗜圖如命，但其實對數據很無感。

如果給你一座城市的建築數據，包括建築年齡、建築高度、建築類型，你會怎麼去展現，讓讀者有更好的感知呢？

如果給你一組歷屆奧運會的金牌得獎情況，怎麼更好地體現性別之間的差異、不同洲之間的差別、歷史的演進呢？

在現在買瓶勁酒都講大數據的時代，很多數據必須要用視覺化的方式呈現，不然讀者根本把握不住這些數據的意義，看一眼就成過眼雲煙了。

那怎麼做到數據可視化，製作一張「好圖」呢？

Edward Tufte教授認為，好圖與好翻譯一樣，應該做到三個標準：信、達、雅。簡單地說就是

1. 真實地表達豐富的數據，避免扭曲數據（avoid distorting data）；

2. 目的清晰，發人深省，激發觀察者去比較不同的數據內容（serve a clear purpose and encourage the eye to compare）；

3. 有美感（aesthetic）

優秀的可視化案例燦若繁星，在這裡挑出兩個，傳達出怎麼造就一個好圖

案例1——曼哈頓的所有建築3D地圖

一、地址（需翻牆）

https://tbaldw.in/nyc-buildings/

二、簡介

利用canvas實現的3D地圖，精確展示1800年-2017年的紐約曼哈頓地區的所有建築信息，圖中的一個小塊就是一棟建築

三、Demo演示

https://www.zhihu.com/video/980900157633794048

如Demo所示，3D地圖提供了兩種交互方式。一種是自動展示，全程自動播放。另外一種是手動控制的。

四、Demo解說

通過滑鼠拖拽可以調整地圖的展示方向，實現橫向縱向360度全方位看。

通過滑鼠縮放實現地圖的放大和縮小，實現宏觀和微觀地瀏覽地圖。

並且可以通過建築年齡，建築高度，建築類型三個維度區分這些建築。

• 維度1—建築年齡

地圖展示了1800年到2017年的曼哈頓建築，由圖中的大部分區域色-紫色可以看出，曼哈頓的建築是比較古老的

• 維度2—建築高度

地圖展示了不同高度的建築，黃色佔比比較多，高樓層建築佔大部分

• 維度3—建築類型

地圖將建築分為了7大類：混合租賃型租房、有電梯的租房、合作房、公寓、家庭住宅、酒店、非住宅等等

下圖就是經過篩選後的曼哈頓的酒店：

案例2——自1896年以來的夏季奧運的所有金牌得主

一、地址

http://www.datasketch.es/august/code/nadieh/

二、簡介/背景

從1896年第一屆奧林匹克運動會開始以來，超過5000個項目產生了冠軍。自1904年開始奧運會開始為這些優勝者頒發獎牌。請看下面的圖片，看看這些獎牌都是自56個大項目中產生的。儘管在之後這些項目有所增減，但到2016年的里約奧運會上，有41個項目仍存在。

三、Demo演示

（壓縮的gif變模糊了，建議打開網址看~）

Demo使用奧運五環的色系來表示各大洲：

期初奧運會中的大部分項目都是由男性參加的，幸運地是在上世紀後半葉，這一情況得到了改變。不同性別在各個項目的獎牌數量也在逐漸變得相同。到了2016年的里約奧運會，只有三個項目是只有單性別比賽的了：古典式摔跤(男)，藝術體操(女)和花樣游泳(女)。

到了2016年的里約奧運會，奧運會已經舉辦31屆了。其中由於兩次世界大戰的原因，1916、1940和1944年的三屆奧運會被迫取消了。在1900年到1920年拔河比賽曾是奧運會的一部分。

在圖中表示獲取獎牌的弧度都是相同的，而不是使用相同寬度來表示。這樣是為了強調錶達越靠近當代的獎牌，贏得它的意義越大。

四、圖表解讀

圖中每一個的圓表示一組相似類型的體育項目，例如水上運動或者球類運動等。 每一個的圓都是由不同切片組成的，我們把每一塊切片都稱為一根「羽毛」，為了使這類體育項目更容易區分。每根羽毛代表可以代表具體一小項運動。

通過上圖可以發現，每個」羽毛「又被分成了31個層疊的小塊，每一小塊可以代表自1896年起到2016年，各屆奧運會該項運動會的具體成績。

每個切片會被分為兩部分，分為男性、女性項目。切片的最大角度是根據此類運動在當屆奧運會中所獲得獎牌數量的兩倍來計算的（角度會均分為男女兩部分，通過紅色、藍色來區分）。

所有獲獎牌情況的弧度都相同，你可以看到在每屆奧運會上每個獎牌的弧度是多少。如果比賽屬於男女混合類團體類項目，則在圖中會表現為男、女各獲得0.5塊獎牌。獎牌顏色則是根據洲來進行區分，例如中國獲得一塊乒乓球項目的獎牌在圖中會表現為黃色。此外，根據性別和奧運會年份，這些連續堆積的色塊可以表示出贏得獎牌數最多的洲。

最後，一些體育項目有奧運會，例如田徑和游泳等。作為一個額外的細節，金牌得主達到了目前的奧運記錄的事件會被標記為一個白點。當你懸停在獎牌上時，你可以看到記錄。

結語

數據可視化會讓一些原本模糊的關聯瞬間變得明如星漢。就像我們考試背書一樣，來張思維導圖比死記硬背往往效率更高、印象更深。

加入數據可視化團隊猶如手握利劍，將浩瀚的數據揮舞出鏗鏘有力、令人過目不忘的美麗捲軸。如果你現在尋找前端攻城獅機會的話，不妨加個微信（微信號：13710321807）或者私聊，我們一起聊聊，招聘貼長期有效哦~

團隊出品，必屬精品~

團隊亮點：全額五險一金，股票期權，標配 Mac + 大顯，團隊氛圍好！前端團隊組建2年以來0離職率~

關於數瀾UED團隊：

1、阿里大牛 + 社會我佩奇哥的厲害組合，沉澱了一系列的腳手架工具、前端開發工具包、通用組件庫，實實在在的良心開發環境??

2、自帶互相傷害GIF表情包的友好團隊??