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