多年前讀過一篇非常震撼的文章,叫《Lisp之根》(英文版:The roots of Lisp),大意是Lisp僅僅通過一種數(shù)據(jù)結(jié)構(gòu)(列表)和有限的幾個(gè)函數(shù),就構(gòu)建出了一門極為簡潔,且極具擴(kuò)展性的編程語言。當(dāng)時(shí)就深深的被這種設(shè)計(jì)哲學(xué)所震撼:一方面它足夠簡單,每個(gè)單獨(dú)的函數(shù)都足夠簡單,另一方面它有非常復(fù)雜,像宏,高階函數(shù),遞歸等機(jī)制可以構(gòu)建出任意復(fù)雜的程序,而復(fù)雜的機(jī)制又是由簡單的組件組成的。
成都創(chuàng)新互聯(lián)從2013年成立,先為成縣等服務(wù)建站,成縣等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為成縣企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。數(shù)據(jù)的可視化也是一樣,組成一幅內(nèi)容清晰、表達(dá)力強(qiáng)、美觀的可視化信息圖的也僅僅是一些基本的元素,這些元素的不同組合卻可以產(chǎn)生出令人著迷的力量。
要列出“可視化元素之根”很容易:位置、長度、角度、形狀、紋理、面積(體積)、色相、飽和度等幾種有限的元素,邱南森在他的《數(shù)據(jù)之美》中提供了一張視覺元素的圖,其中包含了大部分常用的元素。
令人振奮的是,這些元素可以自由組合,而且組合往往會(huì)產(chǎn)生1+1>2
的效果。
數(shù)據(jù)可視化其實(shí)是基于人類的視覺認(rèn)知系統(tǒng)的,因此對人類視覺系統(tǒng)的工作方式有一些了解可以幫助我們設(shè)計(jì)出更為高效(更快的傳遞我們想要表達(dá)的信息給讀者)的可視化作品。
在生活中,我們會(huì)遇到這樣的場景:一件原價(jià)10元的商品,如果降價(jià)為5元,則消費(fèi)者很容易購買;而一件原價(jià)100元的商品,降價(jià)為95元,則難以刺激消費(fèi)者產(chǎn)生購買的沖動(dòng)。這兩個(gè)打折的絕對數(shù)字都是5元,但是效果是不一樣的。
韋伯-費(fèi)希納定理描述的正是這種非理性的場景。這個(gè)定理的一個(gè)比較裝逼的描述是:
感覺量與物理量的對數(shù)值成正比,也就是說,感覺量的增加落后于物理量的增加,物理量成幾何級數(shù)增長,而心理量成算術(shù)級數(shù)增長,這個(gè)經(jīng)驗(yàn)公式被稱為費(fèi)希納定律或韋伯-費(fèi)希納定律。
– 摘自百度百科
這個(gè)現(xiàn)象由人類的大腦構(gòu)造而固有,因此在設(shè)計(jì)可視化作品時(shí)也應(yīng)該充分考慮,比如:
避免使用面積圖作為對比
在做對比類圖形時(shí),當(dāng)差異不明顯時(shí)需要考慮采用非線性的視覺元素
選用多種顏色作為視覺編碼時(shí),差異應(yīng)該足夠大
比如:
如上圖中,當(dāng)面積增大之后,肉眼越來越難從形狀的大小中解碼出實(shí)際的數(shù)據(jù)差異,上邊的三組矩形(每行的兩個(gè)為一組),背后對應(yīng)的數(shù)據(jù)如下,可以看到每組中的兩個(gè)矩形的絕對差都是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)主義
的組成說。格式塔認(rèn)為,人類在看到畫面時(shí),會(huì)優(yōu)先將其簡化為一個(gè)整體,然后再細(xì)化到每個(gè)部分;而不是先識(shí)別出各個(gè)部分,再拼接為整體。
比如那條著名的斑點(diǎn)狗:
我們的眼睛-大腦可以很容易的看出陰影中的斑點(diǎn)狗,而不是先識(shí)別出狗的四條腿或者尾巴(事實(shí)上在這張圖中,人眼無法識(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)不大的則通過留白等手段分開)
對齊(將元素通過水平,垂直方向?qū)R,方便視覺識(shí)別)
重復(fù)(重復(fù)使用某一模式,比如標(biāo)題1的字體顏色,標(biāo)題2的字體顏色等,保持重復(fù)且一致)
對比(通過強(qiáng)烈的對比將不同的信息區(qū)分開)
如果稍加留意,就會(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ù)字字體和較小的文字形成了對比;大標(biāo)題的顏色和其他內(nèi)容形成了對比等等。
這些原則其實(shí)跟上面提到的格式塔學(xué)派,以及韋伯-費(fèi)希納定理事實(shí)上是相關(guān)的,在理解了這些人類視覺識(shí)別的機(jī)制之后,使用這些原則就非常自然和得心應(yīng)手了。
淡化圖表的網(wǎng)格(和數(shù)據(jù)圖形產(chǎn)生對比)
通過深色來強(qiáng)調(diào)標(biāo)尺(強(qiáng)烈的線條和其余部分產(chǎn)生對比)
離群點(diǎn)的高亮(通過不同顏色產(chǎn)生對比)
使用顏色(通過不同的顏色,利用親密性原則方便讀者對數(shù)據(jù)分組)
元素顏色和legend(使用重復(fù)性原則)
同一個(gè)頁面上有多個(gè)圖表,采取同樣的圖例,色彩選擇(強(qiáng)調(diào)重復(fù)性原則)
上篇文章提到我通過一個(gè)手機(jī)App收集到了女兒成長的一些記錄,包括哺乳信息,換尿布記錄,以及睡眠信息。這個(gè)例子中,我會(huì)一步步的介紹如何將這些信息可視化出來,并解釋其中使用的視覺原理。
可視化的第一步是要明確你想要從數(shù)據(jù)中獲取什么信息
,我想要獲取的信息是孩子的睡眠總量以及睡眠時(shí)間分布情況。
確定了可視化的目的之后,第二步是選取合適的視覺編碼。上面提到過,對于人眼來說,最精確的視覺編碼方式是長度。我們可以將睡眠時(shí)間
轉(zhuǎn)化為長度
來展現(xiàn),最簡單的方式是按天聚合,然后化成柱狀圖。比如:
2016/11/21,768 2016/11/22,760 2016/11/23,700
不過這種圖無法看出時(shí)間的分布。我們可以考慮通過條形圖的變體來滿足前面提到的兩個(gè)核心訴求。先來在紙上畫一個(gè)簡單的草圖??v軸是24小時(shí),橫軸是日期。和普通的條形圖不一樣的是,每個(gè)條形的總長度是固定的,而且條形代表的不是簡單非數(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è)問題,我們的縱軸是24小時(shí),如果她晚上23點(diǎn)開始睡覺,睡了3個(gè)小時(shí),那么這個(gè)條形就回超出24格的軸。我寫了一個(gè)函數(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ù)之后,我們可以編寫一些前端的代碼來繪制條形圖了。畫圖的時(shí)候有幾個(gè)要注意的點(diǎn):
每天內(nèi)的時(shí)間段對應(yīng)的矩形需要有相同的X坐標(biāo)
不同的睡眠長度要有顏色區(qū)分(睡眠時(shí)間越長,顏色越深)
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ù)每次睡覺的分鐘數(shù)將睡眠質(zhì)量劃分為5個(gè)等級:
var?level?=?d3.scale.threshold() ??.domain([60,?120,?180,?240,?300]) ??.range(["low",?"fine",?"medium",?"good",?"great",?"prefect"]);
然后在繪制過程中,根據(jù)實(shí)際數(shù)據(jù)值來確定不同的CSS Class:
svg.selectAll(".bar") ??.data(data) ??.enter() ??.append("rect") ??.attr("class",?function(d)?{ ??????return?level(d.length)+"?bar"; ??}) //...
實(shí)現(xiàn)之后,看起來是這個(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í)間可以通過弧長來表示,睡眠時(shí)間越長,弧長越大:
我們首先將整個(gè)圓(360度)按照分鐘劃分,則每分鐘對應(yīng)的角度數(shù)為:360/(24*60)
,再將角度轉(zhuǎn)化為弧度:degree * π/180
:
var?perAngle?=?(360?/?(24?*?60))?*?(Math.PI/180);
那么對于指定的時(shí)間,比如10:20
,先計(jì)算出其分鐘數(shù):10*60+20
,再乘以preAngle
,就可以得出起始弧度;起始時(shí)間的分鐘數(shù)加上睡眠時(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; }
實(shí)現(xiàn)的結(jié)果是這樣的:
初看起來,它像是星空圖,但是圖中的不同顏色含義沒有那么直觀,我們需要在圖上補(bǔ)充一個(gè)圖例。通過使用d3的線性標(biāo)尺和定義svg的漸變來實(shí)現(xiàn),定義好漸變和漸變的顏色取值范圍之后,就可以來繪制圖例了。
圖上的每段弧都會(huì)有鼠標(biāo)移動(dòng)上去的tooltip,這樣可以很好的和讀者大腦中的鐘表隱喻對照起來,使得圖表更容易理解。?
由于我將整個(gè)圓分成了24份,這點(diǎn)和普通的鐘表事實(shí)上有差異,那么如果加上鐘表的刻度,會(huì)不會(huì)更好一些呢?從結(jié)果來看,這樣的標(biāo)線反而有點(diǎn)畫蛇添足,所以我在最后的版本中去掉了鐘表的標(biāo)線。
可以看到,我們通過圓形的鐘表隱喻來體現(xiàn)每一天的睡眠分布,然后用顏色的深淺來表示每次睡眠的時(shí)長。由于鐘表的形象已經(jīng)深入人心,因此讀者很容易發(fā)現(xiàn)0點(diǎn)
在圓環(huán)群的正上方。中心的×××實(shí)心圓幫助讀者視線先聚焦在最內(nèi)側(cè)的圓上,然后逐漸向外,這和日期的分布方向正好一致。
最終的結(jié)果在這里:心心的睡眠記錄,完整的代碼在這里。
一個(gè)完整的可視化作品,不但要運(yùn)用各種視覺編碼來將數(shù)據(jù)轉(zhuǎn)換為視覺元素,背景信息也同樣重要。既然這個(gè)星空圖是關(guān)于睡眠主題
的,那么一個(gè)包含她在睡覺的圖片集合則會(huì)加強(qiáng)這種視覺暗示,幫助讀者快速理解。
制作背景圖
我從相冊中選取了很多女兒睡覺時(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像素,并從中間開始裁剪-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)然,背景信息只是補(bǔ)充作用,需要避免喧賓奪主。因此圖片做了模糊處理,且加上了深灰色的半透明Mask(此處應(yīng)用了格式塔理論中的主體/背景原理)。
這篇文章討論了可視化作品背后的一些視覺元素理論,以及人類的視覺識(shí)別機(jī)制。在這些機(jī)制的基礎(chǔ)上,介紹了如何運(yùn)用常用的設(shè)計(jì)原則來進(jìn)行視覺編碼。最后,通過一個(gè)實(shí)例來介紹如何運(yùn)用這些元素 – 以及更重要的,這些元素的組合 – 來制作一個(gè)漂亮的、有意義的可視化圖表。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)頁名稱:如何將枯燥的大數(shù)據(jù)呈現(xiàn)為可視化的圖像?-創(chuàng)新互聯(lián)
路徑分享:http://bm7419.com/article28/cdiojp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供服務(wù)器托管、企業(yè)建站、品牌網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)、網(wǎng)站營銷
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容