多年前讀過(guò)一篇非常震撼的文章，叫《Lisp之根》（英文版：The roots of Lisp），大意是Lisp僅僅通過(guò)一種數(shù)據(jù)結(jié)構(gòu)（列表）和有限的幾個(gè)函數(shù)，就構(gòu)建出了一門極為簡(jiǎn)潔，且極具擴(kuò)展性的編程語(yǔ)言。當(dāng)時(shí)就深深的被這種設(shè)計(jì)哲學(xué)所震撼：一方面它足夠簡(jiǎn)單，每個(gè)單獨(dú)的函數(shù)都足夠簡(jiǎn)單，另一方面它有非常復(fù)雜，像宏，高階函數(shù)，遞歸等機(jī)制可以構(gòu)建出任意復(fù)雜的程序，而復(fù)雜的機(jī)制又是由簡(jiǎn)單的組件組成的。
站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到羅城網(wǎng)站設(shè)計(jì)與羅城網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋羅城地區(qū)。
數(shù)據(jù)的可視化也是一樣，組成一幅內(nèi)容清晰、表達(dá)力強(qiáng)、美觀的可視化信息圖的也僅僅是一些基本的元素，這些元素的不同組合卻可以產(chǎn)生出令人著迷的力量。
要列出“可視化元素之根”很容易：位置、長(zhǎng)度、角度、形狀、紋理、面積（體積）、色相、飽和度等幾種有限的元素，邱南森在他的《數(shù)據(jù)之美》中提供了一張視覺(jué)元素的圖，其中包含了大部分常用的元素。
cdn.xitu.io/2017/5/20/6ab138d1a62e006199518ff97a236c55?imageView2/0/w/1280/h/960/format/webp/ignore-error/1">
令人振奮的是，這些元素可以自由組合，而且組合往往會(huì)產(chǎn)生1+1>2的效果。
數(shù)據(jù)可視化其實(shí)是基于人類的視覺(jué)認(rèn)知系統(tǒng)的，因此對(duì)人類視覺(jué)系統(tǒng)的工作方式有一些了解可以幫助我們?cè)O(shè)計(jì)出更為高效（更快的傳遞我們想要表達(dá)的信息給讀者）的可視化作品。
在生活中，我們會(huì)遇到這樣的場(chǎng)景：一件原價(jià)10元的商品，如果降價(jià)為5元，則消費(fèi)者很容易購(gòu)買；而一件原價(jià)100元的商品，降價(jià)為95元，則難以刺激消費(fèi)者產(chǎn)生購(gòu)買的沖動(dòng)。這兩個(gè)打折的絕對(duì)數(shù)字都是5元，但是效果是不一樣的。
韋伯-費(fèi)希納定理描述的正是這種非理性的場(chǎng)景。這個(gè)定理的一個(gè)比較裝逼的描述是：
感覺(jué)量與物理量的對(duì)數(shù)值成正比，也就是說(shuō)，感覺(jué)量的增加落后于物理量的增加，物理量成幾何級(jí)數(shù)增長(zhǎng)，而心理量成算術(shù)級(jí)數(shù)增長(zhǎng)，這個(gè)經(jīng)驗(yàn)公式被稱為費(fèi)希納定律或韋伯-費(fèi)希納定律。
– 摘自百度百科
這個(gè)現(xiàn)象由人類的大腦構(gòu)造而固有，因此在設(shè)計(jì)可視化作品時(shí)也應(yīng)該充分考慮，比如：
避免使用面積圖作為對(duì)比
在做對(duì)比類圖形時(shí)，當(dāng)差異不明顯時(shí)需要考慮采用非線性的視覺(jué)元素
選用多種顏色作為視覺(jué)編碼時(shí)，差異應(yīng)該足夠大
比如：
如上圖中，當(dāng)面積增大之后，肉眼越來(lái)越難從形狀的大小中解碼出實(shí)際的數(shù)據(jù)差異，上邊的三組矩形（每行的兩個(gè)為一組），背后對(duì)應(yīng)的數(shù)據(jù)如下，可以看到每組中的兩個(gè)矩形的絕對(duì)差都是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é)中的一個(gè)重要流派，她強(qiáng)調(diào)整體認(rèn)識(shí)，而不是結(jié)構(gòu)主義的組成說(shuō)。格式塔認(rèn)為，人類在看到畫面時(shí)，會(huì)優(yōu)先將其簡(jiǎn)化為一個(gè)整體，然后再細(xì)化到每個(gè)部分；而不是先識(shí)別出各個(gè)部分，再拼接為整體。
比如那條著名的斑點(diǎn)狗：
我們的眼睛-大腦可以很容易的看出陰影中的斑點(diǎn)狗，而不是先識(shí)別出狗的四條腿或者尾巴（事實(shí)上在這張圖中，人眼無(wú)法識(shí)別出各個(gè)獨(dú)立的部分）。
格式塔理論有幾個(gè)很重要的原理：
接近性原理
相似性原理
封閉性原理
連續(xù)性原理
主體/背景原理
當(dāng)然，格式塔學(xué)派后續(xù)還有一些發(fā)展，總結(jié)出了更多的原理。工程上，這些原理還在大量使用，指導(dǎo)設(shè)計(jì)師設(shè)計(jì)各式各樣的用戶界面。鑒于網(wǎng)上已經(jīng)有眾多的格式塔理論及其應(yīng)用的文章，這里就不在贅述。有興趣的同學(xué)可以參考這幾篇文章：
優(yōu)設(shè)上的一篇格式塔文章
優(yōu)設(shè)上的一篇關(guān)于格式塔與Web設(shè)計(jì)的文章
騰訊CDC的一篇格式塔介紹
《寫給大家看的設(shè)計(jì)書》一書中，作者用通俗易懂的方式給出了幾條設(shè)計(jì)的基本原則，這些原則完全可以直接用在數(shù)據(jù)可視化中的設(shè)計(jì)中：
親密性（將有關(guān)聯(lián)的信息物理上放在一起，而關(guān)聯(lián)不大的則通過(guò)留白等手段分開(kāi)）
對(duì)齊（將元素通過(guò)水平，垂直方向?qū)R，方便視覺(jué)識(shí)別）
重復(fù)（重復(fù)使用某一模式，比如標(biāo)題1的字體顏色，標(biāo)題2的字體顏色等，保持重復(fù)且一致）
對(duì)比（通過(guò)強(qiáng)烈的對(duì)比將不同的信息區(qū)分開(kāi)）
如果稍加留意，就會(huì)發(fā)現(xiàn)現(xiàn)實(shí)世界中在大量的使用這幾個(gè)原則。1，2，3三個(gè)標(biāo)題的形式就是重復(fù)性的體現(xiàn)；每個(gè)標(biāo)題的內(nèi)容自成一體是因?yàn)榻M成它的元素（數(shù)字，兩行文字）的距離比較近，根據(jù)親密性原則，人眼會(huì)自動(dòng)將其歸為一類；超大的數(shù)字字體和較小的文字形成了對(duì)比；大標(biāo)題的顏色和其他內(nèi)容形成了對(duì)比等等。
這些原則其實(shí)跟上面提到的格式塔學(xué)派，以及韋伯-費(fèi)希納定理事實(shí)上是相關(guān)的，在理解了這些人類視覺(jué)識(shí)別的機(jī)制之后，使用這些原則就非常自然和得心應(yīng)手了。
淡化圖表的網(wǎng)格（和數(shù)據(jù)圖形產(chǎn)生對(duì)比）
通過(guò)深色來(lái)強(qiáng)調(diào)標(biāo)尺（強(qiáng)烈的線條和其余部分產(chǎn)生對(duì)比）
離群點(diǎn)的高亮（通過(guò)不同顏色產(chǎn)生對(duì)比）
使用顏色（通過(guò)不同的顏色，利用親密性原則方便讀者對(duì)數(shù)據(jù)分組）
元素顏色和legend（使用重復(fù)性原則）
同一個(gè)頁(yè)面上有多個(gè)圖表，采取同樣的圖例，色彩選擇（強(qiáng)調(diào)重復(fù)性原則）
上篇文章提到我通過(guò)一個(gè)手機(jī)App收集到了女兒成長(zhǎng)的一些記錄，包括哺乳信息，換尿布記錄，以及睡眠信息。這個(gè)例子中，我會(huì)一步步的介紹如何將這些信息可視化出來(lái)，并解釋其中使用的視覺(jué)原理。
可視化的第一步是要明確你想要從數(shù)據(jù)中獲取什么信息，我想要獲取的信息是孩子的睡眠總量以及睡眠時(shí)間分布情況。
確定了可視化的目的之后，第二步是選取合適的視覺(jué)編碼。上面提到過(guò)，對(duì)于人眼來(lái)說(shuō)，最精確的視覺(jué)編碼方式是長(zhǎng)度。我們可以將睡眠時(shí)間轉(zhuǎn)化為長(zhǎng)度來(lái)展現(xiàn)，最簡(jiǎn)單的方式是按天聚合，然后化成柱狀圖。比如：
2016/11/21,768 2016/11/22,760 2016/11/23,700
不過(guò)這種圖無(wú)法看出時(shí)間的分布。我們可以考慮通過(guò)條形圖的變體來(lái)滿足前面提到的兩個(gè)核心訴求。先來(lái)在紙上畫一個(gè)簡(jiǎn)單的草圖?？v軸是24小時(shí)，橫軸是日期。和普通的條形圖不一樣的是，每個(gè)條形的總長(zhǎng)度是固定的，而且條形代表的不是簡(jiǎn)單非數(shù)據(jù)類型，而是24小時(shí)。在草稿中，每個(gè)畫斜線的方塊表示孩子在睡眠狀態(tài)，而虛線部分表示她醒著。
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,
這里有個(gè)問(wèn)題，我們的縱軸是24小時(shí)，如果她晚上23點(diǎn)開(kāi)始睡覺(jué)，睡了3個(gè)小時(shí)，那么這個(gè)條形就回超出24格的軸。我寫了一個(gè)函數(shù)來(lái)做數(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?<?row['name'],
????????????:date?=>?row['date'],
????????????:length?=>?row['length'],
????????????:note?=>?row['note']
????????}
????else
????????data?<?row['name'],
????????????:date?=>?date.strftime("%Y/%m/%d?%H:%M"),
????????????:length?=>?mins_until_end_of_day,
????????????:note?=>?row['note']
????????}
????????data?<?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ù)之后，我們可以編寫一些前端的代碼來(lái)繪制條形圖了。畫圖的時(shí)候有幾個(gè)要注意的點(diǎn)：
每天內(nèi)的時(shí)間段對(duì)應(yīng)的矩形需要有相同的X坐標(biāo)
不同的睡眠長(zhǎng)度要有顏色區(qū)分（睡眠時(shí)間越長(zhǎng)，顏色越深）
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ù)一個(gè)日期值返回一個(gè)X坐標(biāo)，這樣2016/11/21 19:23和2016/11/21 22:04都會(huì)返回一個(gè)整數(shù)值（借助d3提供的標(biāo)尺函數(shù)）。
另外，我們根據(jù)每次睡覺(jué)的分鐘數(shù)將睡眠質(zhì)量劃分為5個(gè)等級(jí)：
var?level?=?d3.scale.threshold() ??.domain([60,?120,?180,?240,?300]) ??.range(["low",?"fine",?"medium",?"good",?"great",?"prefect"]);
然后在繪制過(guò)程中，根據(jù)實(shí)際數(shù)據(jù)值來(lái)確定不同的CSS Class：
svg.selectAll(".bar")
??.data(data)
??.enter()
??.append("rect")
??.attr("class",?function(d)?{
??????return?level(d.length)+"?bar";
??})
//...實(shí)現(xiàn)之后，看起來(lái)是這個(gè)樣子的。事實(shí)上這個(gè)圖標(biāo)可以比較清楚的看出大部分睡眠集中在0-6點(diǎn)，而中午的10-13點(diǎn)以及黃昏18-20點(diǎn)基本上只有一些零星的睡眠。
上面的圖有一個(gè)缺點(diǎn)，是當(dāng)日期很多的時(shí)候（上圖差不多有100天的數(shù)據(jù)），X軸會(huì)比較難畫，如果縮減成按周，或者按月，又會(huì)增加很多額外的復(fù)雜度。
另外一個(gè)嘗試是變形：既然這個(gè)統(tǒng)計(jì)是和時(shí)間相關(guān)的，那么圓形的鐘表形象是一個(gè)很好的隱喻，每天24小時(shí)自然的可以映射為一個(gè)圓。而睡眠時(shí)間可以通過(guò)弧長(zhǎng)來(lái)表示，睡眠時(shí)間越長(zhǎng)，弧長(zhǎng)越大：
我們首先將整個(gè)圓（360度）按照分鐘劃分，則每分鐘對(duì)應(yīng)的角度數(shù)為：360/(24*60)，再將角度轉(zhuǎn)化為弧度：degree * π/180：
var?perAngle?=?(360?/?(24?*?60))?*?(Math.PI/180);
那么對(duì)于指定的時(shí)間，比如10:20，先計(jì)算出其分鐘數(shù)：10*60+20，再乘以preAngle，就可以得出起始弧度；起始時(shí)間的分鐘數(shù)加上睡眠時(shí)長(zhǎng)，再乘以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;
}實(shí)現(xiàn)的結(jié)果是這樣的：
初看起來(lái)，它像是星空?qǐng)D，但是圖中的不同顏色含義沒(méi)有那么直觀，我們需要在圖上補(bǔ)充一個(gè)圖例。通過(guò)使用d3的線性標(biāo)尺和定義svg的漸變來(lái)實(shí)現(xiàn)，定義好漸變和漸變的顏色取值范圍之后，就可以來(lái)繪制圖例了。
圖上的每段弧都會(huì)有鼠標(biāo)移動(dòng)上去的tooltip，這樣可以很好的和讀者大腦中的鐘表隱喻對(duì)照起來(lái)，使得圖表更容易理解。?
由于我將整個(gè)圓分成了24份，這點(diǎn)和普通的鐘表事實(shí)上有差異，那么如果加上鐘表的刻度，會(huì)不會(huì)更好一些呢？從結(jié)果來(lái)看，這樣的標(biāo)線反而有點(diǎn)畫蛇添足，所以我在最后的版本中去掉了鐘表的標(biāo)線。
可以看到，我們通過(guò)圓形的鐘表隱喻來(lái)體現(xiàn)每一天的睡眠分布，然后用顏色的深淺來(lái)表示每次睡眠的時(shí)長(zhǎng)。由于鐘表的形象已經(jīng)深入人心，因此讀者很容易發(fā)現(xiàn)0點(diǎn)在圓環(huán)群的正上方。中心的×××實(shí)心圓幫助讀者視線先聚焦在最內(nèi)側(cè)的圓上，然后逐漸向外，這和日期的分布方向正好一致。
最終的結(jié)果在這里：心心的睡眠記錄，完整的代碼在這里。
一個(gè)完整的可視化作品，不但要運(yùn)用各種視覺(jué)編碼來(lái)將數(shù)據(jù)轉(zhuǎn)換為視覺(jué)元素，背景信息也同樣重要。既然這個(gè)星空?qǐng)D是關(guān)于睡眠主題的，那么一個(gè)包含她在睡覺(jué)的圖片集合則會(huì)加強(qiáng)這種視覺(jué)暗示，幫助讀者快速理解。
制作背景圖
我從相冊(cè)中選取了很多女兒睡覺(jué)時(shí)拍的照片，現(xiàn)在需要有個(gè)工具將這些照片縮小成合適大小，然后拼接成一個(gè)大的圖片。這其中有很多有趣的地方，比如圖片有橫屏、豎屏之分，有的還是正方形的，我需要讓縮放的結(jié)果是正方形的，這樣容易拼接一些。
好在有imagemagick這種神器，只需要一條命令就可以做到：
$?montage?*.jpg?-geometry?+0+0?-resize?128x128^?\ -gravity?center?-crop?128x128+0+0?xinxin-sleeping.jpg
這條命令將當(dāng)前目錄下的所有的jpg文件縮放成128×128像素，并從中間開(kāi)始裁剪-gravity center，+0+0表示圖片之間的縫隙，最后將結(jié)果寫入到xinxin-sleeping.jpg中。
拼接好圖片之后，就可以通過(guò)CSS或者圖片編輯器為其添加模糊效果，并設(shè)置深灰色半透明遮罩。
body?{
??background-image:url('/xinxin-sleeping.png');
??background-size:cover;
??background-position:center;
}當(dāng)然，背景信息只是補(bǔ)充作用，需要避免喧賓奪主。因此圖片做了模糊處理，且加上了深灰色的半透明Mask（此處應(yīng)用了格式塔理論中的主體/背景原理）。
這篇文章討論了可視化作品背后的一些視覺(jué)元素理論，以及人類的視覺(jué)識(shí)別機(jī)制。在這些機(jī)制的基礎(chǔ)上，介紹了如何運(yùn)用常用的設(shè)計(jì)原則來(lái)進(jìn)行視覺(jué)編碼。最后，通過(guò)一個(gè)實(shí)例來(lái)介紹如何運(yùn)用這些元素 – 以及更重要的，這些元素的組合 – 來(lái)制作一個(gè)漂亮的、有意義的可視化圖表。
