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