2017-7-16 資深UI設(shè)計(jì)者
上篇文章簡(jiǎn)單的介紹了數(shù)據(jù)可視化的基礎(chǔ)，將數(shù)據(jù)進(jìn)行設(shè)計(jì)可視化后，可以讓我們有一種全新的方式去認(rèn)識(shí)數(shù)據(jù)，改變對(duì)數(shù)據(jù)的呈現(xiàn)和思考方式。那現(xiàn)在就讓開(kāi)始做一份數(shù)據(jù)的可視化表，一步步的來(lái)看下我們?nèi)绾潍@取數(shù)據(jù)，以及如何進(jìn)行可視化的展示。
在上章內(nèi)容中，提到了關(guān)于【數(shù)據(jù)可視化迭代過(guò)程】的步驟，這也能看出整個(gè)過(guò)程包含的步驟，大致有：
當(dāng)然了我們也可以看到可視化是要一個(gè)不斷迭代的過(guò)程，步驟之間都需要多次的迭代修改的。
這肯定是第一步了，在做數(shù)據(jù)可視化的時(shí)候，首先你要明了你要做什么，想要從數(shù)據(jù)獲中取什么信息，有了目標(biāo)才能明確的往下做。
那我們這次還是來(lái)做關(guān)于空氣質(zhì)量PM2.5的數(shù)據(jù)展示，了解歷年來(lái)PM2.5的實(shí)際情況和發(fā)展趨勢(shì)。
對(duì)于全國(guó)空氣質(zhì)量的數(shù)據(jù)，最權(quán)威的來(lái)源肯定是來(lái)自于中國(guó)環(huán)境監(jiān)測(cè)總站（http://www.cnemc.cn/）的數(shù)據(jù)提供。但是監(jiān)測(cè)總站的API提供的并不是很詳細(xì)，還有很多第三方也提供類(lèi)似的API接口，比如PM25.in（http://pm25.in/），在API說(shuō)明上做的很詳細(xì)，他們的數(shù)據(jù)每日更新。所以這次我們選擇PM25這個(gè)網(wǎng)站來(lái)獲取數(shù)據(jù)源。
我們可以看到PM25提供的內(nèi)容是相當(dāng)多，包括PM2.5、AQI、PM10、CO、NO2、O3等等。我們只需要PM2.5的數(shù)據(jù)，所以我們把其他不需要的數(shù)據(jù)都可以去除掉，同時(shí)把Json的數(shù)據(jù)轉(zhuǎn)換為CSV的數(shù)據(jù)格式，這里轉(zhuǎn)換數(shù)據(jù)只是為了下一步處理方便，我這邊是選用Processing來(lái)做數(shù)據(jù)可視化處理的。如果你用D3.js，Echart來(lái)做的話，Json可能會(huì)更方便點(diǎn)。
對(duì)于很多人（非設(shè)計(jì)師）來(lái)說(shuō)數(shù)據(jù)可能容易獲取，但是像要把數(shù)據(jù)轉(zhuǎn)換成合適的圖表進(jìn)行表達(dá)反而非常困難的。因?yàn)橥瑯拥臄?shù)據(jù)，用不同的圖表進(jìn)行展示出來(lái)，得到的效果是完全不一樣的。平時(shí)可能用到最多的就是通過(guò)Excel來(lái)做圖表，在Excel2010的版本里面，提供了10類(lèi)共53個(gè)圖表，還提供了什么數(shù)據(jù)透視圖，自定義圖表等等，總之種類(lèi)非常多。不過(guò)盡管圖表種類(lèi)繁多，但其基本類(lèi)型只有以下幾種：
曲線圖：用來(lái)反映隨時(shí)間變化的趨勢(shì)；
柱形圖：用來(lái)反映分類(lèi)項(xiàng)目之間的比較，也可以用來(lái)反映時(shí)間趨勢(shì)；
條形圖：用來(lái)反映分類(lèi)項(xiàng)目之間的比較；
散點(diǎn)圖：用來(lái)反映相關(guān)性或分布關(guān)系；
餅圖：用來(lái)反映構(gòu)成，即部分占總體的比例；
地圖：用來(lái)反映區(qū)域之間的分類(lèi)比較；
那知道了，基礎(chǔ)圖表的類(lèi)型，那怎么去選擇。國(guó)外專(zhuān)家Andrew Abela他將圖表展示的關(guān)系分為4 類(lèi)：比較、分布、構(gòu)成、聯(lián)系。然后根據(jù)這個(gè)分類(lèi)和數(shù)據(jù)的狀況給出了對(duì)應(yīng)的圖表類(lèi)型建議。當(dāng)我們不確定使用什么類(lèi)型的圖表的時(shí)候，可以參考下這個(gè)圖。
俗話說(shuō)【不會(huì)擼碼的交互不是好的數(shù)據(jù)可視化設(shè)計(jì)師】，現(xiàn)在市面上有各式各樣的可視化的方法和工具，但坦白來(lái)說(shuō)【這些可視化工具都是大坑！?。 浚胱龊每梢暬谋憩F(xiàn)，最好的方式還是需要掌握一門(mén)編程語(yǔ)言，只有這樣你才能最合適的表達(dá)清楚出你想傳達(dá)出來(lái)的數(shù)據(jù)信息。
這里給各位想跳入數(shù)據(jù)可視化這個(gè)大坑的設(shè)計(jì)師們（編程大佬請(qǐng)無(wú)視），推薦一下Processing這個(gè)創(chuàng)意編程語(yǔ)言。
Processing是美國(guó)麻省理工學(xué)院媒體實(shí)驗(yàn)室旗下美學(xué)與運(yùn)算小組創(chuàng)造出來(lái)的（搞設(shè)計(jì)的人做出來(lái)的編程語(yǔ)言），非常容易上手，代碼邏輯也很簡(jiǎn)單，幾段代碼就能做出十分出現(xiàn)效果的展示。
不過(guò)Processing沒(méi)有代碼提示的功能的，用起來(lái)還是十分痛苦的，經(jīng)常是因?yàn)橐粋€(gè)單詞寫(xiě)錯(cuò)了，而造成程序報(bào)錯(cuò)。不過(guò)后來(lái)我發(fā)現(xiàn)到Subilme Text能支持Processing的編譯環(huán)境，而且能提供代碼提示功能，簡(jiǎn)直是發(fā)現(xiàn)新大陸一樣，從此Processing用起來(lái)再也不費(fèi)勁了。
確定用Processing來(lái)實(shí)現(xiàn)后，我們繼續(xù)來(lái)做PM2.5的可視化展示。國(guó)家環(huán)保部將空氣質(zhì)量分為六個(gè)等級(jí)，分別用綠、黃、橙、紅、紫、褐六個(gè)顏色來(lái)標(biāo)注，對(duì)于著優(yōu)、良、輕度污染、中度污染、重度污染和嚴(yán)重污染六個(gè)空氣質(zhì)量。我們要展示歷年來(lái)PM2.5的實(shí)際情況和發(fā)展趨勢(shì)，就可以把每天的空氣質(zhì)量轉(zhuǎn)換一個(gè)個(gè)不同顏色的小方格，通過(guò)顏色的區(qū)別來(lái)展示當(dāng)天的PM2.5情況。
先在紙上畫(huà)一個(gè)簡(jiǎn)單的草圖。已年為劃分，下面用小方格展示該年內(nèi)每天的空氣質(zhì)量是什么等級(jí)，把當(dāng)天的PM2.5數(shù)值轉(zhuǎn)換對(duì)應(yīng)的顏色值。
代碼很簡(jiǎn)單的，我大概編寫(xiě)了40來(lái)行就完成了，代碼邏輯很簡(jiǎn)單就是導(dǎo)入數(shù)據(jù)，判斷當(dāng)前數(shù)據(jù)的值是多少，根據(jù)不同的值屬于小方塊不同的顏色。
實(shí)現(xiàn)之后，看起來(lái)就是這樣子的。日期時(shí)間軸是按照1月到12月排列的，通過(guò)上面的圖示我們可以比較清楚的看到污染程度比較高的時(shí)間是集中在開(kāi)頭和結(jié)尾，就是1-2月，11-12月之間，也就是每年冬天就是PM2.5污染程度高的時(shí)間。
我們繼續(xù)把成都?xì)v史的數(shù)據(jù)可視化后來(lái)看下。我們發(fā)現(xiàn)12年之前成都空氣質(zhì)量都還不錯(cuò)的，在14年的時(shí)候，就沒(méi)有小綠格了，可見(jiàn)14年成都空氣質(zhì)量有多差勁，15年、16年后慢慢的開(kāi)始有點(diǎn)好轉(zhuǎn)，應(yīng)該是政府開(kāi)始治理了。我們?cè)诎驯本?，上海和深圳的天氣拔?lái)看看。
第一列是成都08-16年的空氣質(zhì)量，第二列是北京的，第三列是上海的，第四列是深圳的。可見(jiàn)深圳的空氣質(zhì)量完爆成都、北京和上海。幾乎全是小綠格，真是宜居好地方啊。而帝都北京空氣質(zhì)量是這四個(gè)城市中最差的。
將數(shù)據(jù)可視化后，我們可以發(fā)現(xiàn)數(shù)據(jù)中更大的意義，最重要的還是實(shí)踐做出來(lái)，這篇文章簡(jiǎn)單的講解了下可視化的整個(gè)過(guò)程，我們?nèi)绾螌ふ覕?shù)據(jù)，以及做出有意義的可視化圖表出來(lái)。希望更多的人興趣，一起來(lái)做數(shù)據(jù)可視化。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com