文／ThoughtWorks 邱俊濤
可視化之根
多年前讀過一篇非常震撼的文章瞬雹，叫《Lisp之根》（英文版：The roots of Lisp）训唱，大意是Lisp僅僅通過一種數(shù)據(jù)結(jié)構(gòu)（列表）和有限的幾個函數(shù)，就構(gòu)建出了一門極為簡潔，且極具擴展性的編程語言妈橄。當(dāng)時就深深的被這種設(shè)計哲學(xué)所震撼：一方面它足夠簡單庶近，每個單獨的函數(shù)都足夠簡單，另一方面它有非常復(fù)雜眷蚓，像宏鼻种，高階函數(shù)，遞歸等機制可以構(gòu)建出任意復(fù)雜的程序沙热，而復(fù)雜的機制又是由簡單的組件組成的叉钥。
數(shù)據(jù)的可視化也是一樣，組成一幅內(nèi)容清晰篙贸、表達力強投队、美觀的可視化信息圖的也僅僅是一些基本的元素，這些元素的不同組合卻可以產(chǎn)生出令人著迷的力量爵川。
要列出“可視化元素之根”很容易：位置敷鸦、長度、角度寝贡、形狀轧膘、紋理、面積（體積）兔甘、色相谎碍、飽和度等幾種有限的元素妒穴，邱南森在他的《數(shù)據(jù)之美》中提供了一張視覺元素的圖灾锯，其中包含了大部分常用的元素。
令人振奮的是若债，這些元素可以自由組合澡匪，而且組合往往會產(chǎn)生1+1>2的效果熔任。
心理學(xué)與認知系統(tǒng)
數(shù)據(jù)可視化其實是基于人類的視覺認知系統(tǒng)的，因此對人類視覺系統(tǒng)的工作方式有一些了解可以幫助我們設(shè)計出更為高效（更快的傳遞我們想要表達的信息給讀者）的可視化作品唁情。
心理物理學(xué)
在生活中疑苔，我們會遇到這樣的場景：一件原價10元的商品，如果降價為5元甸鸟，則消費者很容易購買惦费；而一件原價100元的商品，降價為95元抢韭，則難以刺激消費者產(chǎn)生購買的沖動薪贫。這兩個打折的絕對數(shù)字都是5元，但是效果是不一樣的刻恭。
韋伯-費希納定理描述的正是這種非理性的場景瞧省。這個定理的一個比較裝逼的描述是：
感覺量與物理量的對數(shù)值成正比，也就是說，感覺量的增加落后于物理量的增加鞍匾，物理量成幾何級數(shù)增長交洗，而心理量成算術(shù)級數(shù)增長，這個經(jīng)驗公式被稱為費希納定律或韋伯-費希納定律橡淑。
– 摘自百度百科
這個現(xiàn)象由人類的大腦構(gòu)造而固有构拳，因此在設(shè)計可視化作品時也應(yīng)該充分考慮，比如：
- 避免使用面積圖作為對比
- 在做對比類圖形時梳码，當(dāng)差異不明顯時需要考慮采用非線性的視覺元素
- 選用多種顏色作為視覺編碼時隐圾，差異應(yīng)該足夠大
比如：
如上圖中伍掀，當(dāng)面積增大之后掰茶，肉眼越來越難從形狀的大小中解碼出實際的數(shù)據(jù)差異，上邊的三組矩形（每行的兩個為一組）蜜笤，背后對應(yīng)的數(shù)據(jù)如下濒蒋，可以看到每組中的兩個矩形的絕對差都是5:
var data = [
{width: 5, height: 5},
{width: 10, height: 10},
{width: 50, height: 50},
{width: 55, height: 55},
{width: 100, height: 100},
{width: 105, height: 105}
];
格式塔學(xué)派
格式塔學(xué)派是心理學(xué)中的一個重要流派，她強調(diào)整體認識把兔，而不是結(jié)構(gòu)主義的組成說沪伙。格式塔認為，人類在看到畫面時县好，會優(yōu)先將其簡化為一個整體围橡，然后再細化到每個部分；而不是先識別出各個部分缕贡，再拼接為整體翁授。
比如那條著名的斑點狗：
我們的眼睛-大腦可以很容易的看出陰影中的斑點狗，而不是先識別出狗的四條腿或者尾巴（事實上在這張圖中晾咪，人眼無法識別出各個獨立的部分）收擦。
格式塔理論有幾個很重要的原理：
- 接近性原理
- 相似性原理
- 封閉性原理
- 連續(xù)性原理
- 主體/背景原理
當(dāng)然，格式塔學(xué)派后續(xù)還有一些發(fā)展谍倦，總結(jié)出了更多的原理塞赂。工程上，這些原理還在大量使用昼蛀，指導(dǎo)設(shè)計師設(shè)計各式各樣的用戶界面宴猾。鑒于網(wǎng)上已經(jīng)有眾多的格式塔理論及其應(yīng)用的文章，這里就不在贅述叼旋。有興趣的同學(xué)可以參考這幾篇文章：
視覺設(shè)計的基本原則
《寫給大家看的設(shè)計書》一書中鳍置，作者用通俗易懂的方式給出了幾條設(shè)計的基本原則，這些原則完全可以直接用在數(shù)據(jù)可視化中的設(shè)計中：
- 親密性（將有關(guān)聯(lián)的信息物理上放在一起送淆，而關(guān)聯(lián)不大的則通過留白等手段分開）
- 對齊（將元素通過水平税产，垂直方向?qū)R，方便視覺識別）
- 重復(fù)（重復(fù)使用某一模式，比如標題1的字體顏色辟拷，標題2的字體顏色等撞羽，保持重復(fù)且一致）
- 對比（通過強烈的對比將不同的信息區(qū)分開）
如果稍加留意，就會發(fā)現(xiàn)現(xiàn)實世界中在大量的使用這幾個原則衫冻。1诀紊，2，3三個標題的形式就是重復(fù)性的體現(xiàn)隅俘；每個標題的內(nèi)容自成一體是因為組成它的元素（數(shù)字邻奠，兩行文字）的距離比較近，根據(jù)親密性原則为居，人眼會自動將其歸為一類碌宴；超大的數(shù)字字體和較小的文字形成了對比；大標題的顏色和其他內(nèi)容形成了對比等等蒙畴。
這些原則其實跟上面提到的格式塔學(xué)派贰镣，以及韋伯-費希納定理事實上是相關(guān)的，在理解了這些人類視覺識別的機制之后膳凝，使用這些原則就非常自然和得心應(yīng)手了碑隆。
一些例子
- 淡化圖表的網(wǎng)格（和數(shù)據(jù)圖形產(chǎn)生對比）
- 通過深色來強調(diào)標尺（強烈的線條和其余部分產(chǎn)生對比）
- 離群點的高亮（通過不同顏色產(chǎn)生對比）
- 使用顏色（通過不同的顏色，利用親密性原則方便讀者對數(shù)據(jù)分組）
- 元素顏色和legend（使用重復(fù)性原則）
- 同一個頁面上有多個圖表蹬音，采取同樣的圖例上煤，色彩選擇（強調(diào)重復(fù)性原則）
實例
上篇文章提到我通過一個手機App收集到了女兒成長的一些記錄，包括哺乳信息著淆，換尿布記錄劫狠，以及睡眠信息。這個例子中牧抽，我會一步步的介紹如何將這些信息可視化出來嘉熊，并解釋其中使用的視覺原理。
可視化的第一步是要明確你想要從數(shù)據(jù)中獲取什么信息扬舒，我想要獲取的信息是孩子的睡眠總量以及睡眠時間分布情況阐肤。
進階版的條形圖
確定了可視化的目的之后，第二步是選取合適的視覺編碼讲坎。上面提到過孕惜，對于人眼來說，最精確的視覺編碼方式是長度晨炕。我們可以將睡眠時間轉(zhuǎn)化為長度來展現(xiàn)衫画，最簡單的方式是按天聚合，然后化成柱狀圖瓮栗。比如：
2016/11/21,768
2016/11/22,760
2016/11/23,700
不過這種圖無法看出時間的分布削罩。我們可以考慮通過條形圖的變體來滿足前面提到的兩個核心訴求瞄勾。先來在紙上畫一個簡單的草圖∶旨ぃ縱軸是24小時进陡，橫軸是日期。和普通的條形圖不一樣的是微服，每個條形的總長度是固定的趾疚，而且條形代表的不是簡單非數(shù)據(jù)類型，而是24小時以蕴。在草稿中糙麦，每個畫斜線的方塊表示孩子在睡眠狀態(tài)，而虛線部分表示她醒著丛肮。
原始數(shù)據(jù)
name,date,length,note
心心,2016/11/21 19:23,119,
心心,2016/11/21 22:04,211,
心心,2016/11/22 02:03,19,
心心,2016/11/22 02:23,118,
心心,2016/11/22 05:58,242,
心心,2016/11/22 10:57,128,
心心,2016/11/22 14:35,127,
心心,2016/11/22 17:15,127,
心心,2016/11/22 20:02,177,
心心,2016/11/23 01:27,197,
這里有個問題赡磅，我們的縱軸是24小時，如果她晚上23點開始睡覺腾供，睡了3個小時仆邓，那么這個條形就回超出24格的軸鲜滩。我寫了一個函數(shù)來做數(shù)據(jù)轉(zhuǎn)換:
require 'csv'
require 'active_support/all'
require 'json'
csv = CSV.read('./visualization/data/sleeping_data_refined.csv', :headers => :first_row)
data = []
csv.each do |row|
date = DateTime.parse(row['date'], "%Y/%m/%d %H:%M")
mins_until_end_of_day = date.seconds_until_end_of_day / 60
diff = mins_until_end_of_day - row['length'].to_i
if (diff >= 0) then
data << {
:name => row['name'],
:date => row['date'],
:length => row['length'],
:note => row['note']
}
else
data << {
:name => row['name'],
:date => date.strftime("%Y/%m/%d %H:%M"),
:length => mins_until_end_of_day,
:note => row['note']
}
data << {
:name => row['name'],
:date => (date.beginning_of_day + 1.day).strftime("%Y/%m/%d %H:%M"),
:length => diff.abs,
:note => row['note']
}
end
end
有了干凈的數(shù)據(jù)之后伴鳖，我們可以編寫一些前端的代碼來繪制條形圖了。畫圖的時候有幾個要注意的點：
- 每天內(nèi)的時間段對應(yīng)的矩形需要有相同的X坐標
- 不同的睡眠長度要有顏色區(qū)分（睡眠時間越長徙硅，顏色越深）
var dateRange = _.uniq(data, function(d) {
var date = d.date;
return [date.getYear(), date.getMonth(), date.getDate()].join("/");
});
xScale.domain(dateRange.map(function(d) { return d.date; }));
function getFirstInDomain(date) {
var domain = xScale.domain();
var index = _.findIndex(domain, function(d) {
return date.getYear() === d.getYear()
&& date.getMonth() === d.getMonth()
&& date.getDate() === d.getDate();
});
return domain[index];
}
函數(shù)getFirstInDomain可以根據(jù)一個日期值返回一個X坐標榜聂，這樣2016/11/21 19:23和2016/11/21 22:04都會返回一個整數(shù)值（借助d3提供的標尺函數(shù)）。
另外嗓蘑，我們根據(jù)每次睡覺的分鐘數(shù)將睡眠質(zhì)量劃分為5個等級：
var level = d3.scale.threshold()
.domain([60, 120, 180, 240, 300])
.range(["low", "fine", "medium", "good", "great", "prefect"]);
然后在繪制過程中须肆，根據(jù)實際數(shù)據(jù)值來確定不同的CSS Class：
svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", function(d) {
return level(d.length)+" bar";
})
//...
實現(xiàn)之后，看起來是這個樣子的桩皿。事實上這個圖標可以比較清楚的看出大部分睡眠集中在0-6點豌汇，而中午的10-13點以及黃昏18-20點基本上只有一些零星的睡眠。
星空圖
上面的圖有一個缺點泄隔，是當(dāng)日期很多的時候（上圖差不多有100天的數(shù)據(jù)）拒贱，X軸會比較難畫，如果縮減成按周佛嬉，或者按月逻澳，又會增加很多額外的復(fù)雜度。
另外一個嘗試是變形：既然這個統(tǒng)計是和時間相關(guān)的暖呕，那么圓形的鐘表形象是一個很好的隱喻斜做，每天24小時自然的可以映射為一個圓。而睡眠時間可以通過弧長來表示湾揽，睡眠時間越長瓤逼，弧長越大：
角度轉(zhuǎn)弧度
我們首先將整個圓（360度）按照分鐘劃分笼吟，則每分鐘對應(yīng)的角度數(shù)為：360/(24*60)，再將角度轉(zhuǎn)化為弧度：degree * π/180：
var perAngle = (360 / (24 * 60)) * (Math.PI/180);
那么對于指定的時間霸旗，比如10:20赞厕，先計算出其分鐘數(shù)：10*60+20，再乘以preAngle定硝，就可以得出起始弧度皿桑；起始時間的分鐘數(shù)加上睡眠時長，再乘以preAngle蔬啡，就是結(jié)束弧度诲侮。
function startAngle(date) {
var start = (date.getHours() * 60 + date.getMinutes()) * perAngle;
return Math.floor(start*1000)/1000;
}
function endAngle(date, length) {
var end = (date.getHours() * 60 + date.getMinutes() + length) * perAngle;
return Math.floor(end*1000)/1000;
}
實現(xiàn)的結(jié)果是這樣的：
初看起來，它像是星空圖箱蟆，但是圖中的不同顏色含義沒有那么直觀沟绪，我們需要在圖上補充一個圖例。通過使用d3的線性標尺和定義svg的漸變來實現(xiàn)空猜，定義好漸變和漸變的顏色取值范圍之后绽慈，就可以來繪制圖例了。
圖上的每段弧都會有鼠標移動上去的tooltip辈毯，這樣可以很好的和讀者大腦中的鐘表隱喻對照起來坝疼，使得圖表更容易理解。
由于我將整個圓分成了24份谆沃，這點和普通的鐘表事實上有差異钝凶，那么如果加上鐘表的刻度，會不會更好一些呢唁影？從結(jié)果來看耕陷，這樣的標線反而有點畫蛇添足，所以我在最后的版本中去掉了鐘表的標線据沈。
可以看到哟沫，我們通過圓形的鐘表隱喻來體現(xiàn)每一天的睡眠分布，然后用顏色的深淺來表示每次睡眠的時長锌介。由于鐘表的形象已經(jīng)深入人心嗜诀，因此讀者很容易發(fā)現(xiàn)0點在圓環(huán)群的正上方。中心的黃色實心圓幫助讀者視線先聚焦在最內(nèi)側(cè)的圓上掏湾，然后逐漸向外裹虫，這和日期的分布方向正好一致。
最終的結(jié)果在這里：心心的睡眠記錄融击，完整的代碼在這里筑公。
更進一步
一個完整的可視化作品，不但要運用各種視覺編碼來將數(shù)據(jù)轉(zhuǎn)換為視覺元素尊浪，背景信息也同樣重要匣屡。既然這個星空圖是關(guān)于睡眠主題的封救，那么一個包含她在睡覺的圖片集合則會加強這種視覺暗示，幫助讀者快速理解捣作。
制作背景圖
我從相冊中選取了很多女兒睡覺時拍的照片誉结，現(xiàn)在需要有個工具將這些照片縮小成合適大小，然后拼接成一個大的圖片券躁。這其中有很多有趣的地方惩坑，比如圖片有橫屏、豎屏之分也拜，有的還是正方形的以舒，我需要讓縮放的結(jié)果是正方形的，這樣容易拼接一些慢哈。
好在有imagemagick這種神器蔓钟，只需要一條命令就可以做到：
$ montage *.jpg -geometry +0+0 -resize 128x128^ \
-gravity center -crop 128x128+0+0 xinxin-sleeping.jpg
這條命令將當(dāng)前目錄下的所有的jpg文件縮放成128x128像素，并從中間開始裁剪-gravity center卵贱，+0+0表示圖片之間的縫隙滥沫，最后將結(jié)果寫入到xinxin-sleeping.jpg中。
拼接好圖片之后键俱，就可以通過CSS或者圖片編輯器為其添加模糊效果兰绣，并設(shè)置深灰色半透明遮罩。
body {
background-image:url('/xinxin-sleeping.png');
background-size:cover;
background-position:center;
}
當(dāng)然方妖，背景信息只是補充作用狭魂，需要避免喧賓奪主罚攀。因此圖片做了模糊處理党觅，且加上了深灰色的半透明Mask（此處應(yīng)用了格式塔理論中的主體/背景原理）。
小結(jié)
這篇文章討論了可視化作品背后的一些視覺元素理論斋泄，以及人類的視覺識別機制杯瞻。在這些機制的基礎(chǔ)上，介紹了如何運用常用的設(shè)計原則來進行視覺編碼炫掐。最后魁莉，通過一個實例來介紹如何運用這些元素 – 以及更重要的，這些元素的組合 – 來制作一個漂亮的募胃、有意義的可視化圖表旗唁。
參考資料
這里有一些關(guān)于認知系統(tǒng)和設(shè)計原則的書籍，如果你感興趣的話痹束，可以用來參考
