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