超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

來(lái)做一個(gè)數(shù)據(jù)可視化報(bào)表 遇見(jiàn)大數(shù)據(jù)可視化系列文章之三

2017-7-16    資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

上篇文章簡(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ò)程包含的步驟,大致有:

  1. 確定主題 - 2.?dāng)?shù)據(jù)獲得 - 3.圖表選擇(表達(dá))- 4圖表繪制

當(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ì)。

數(shù)據(jù)獲得

對(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ì),還有很多第三方也提供類似的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)。

圖表選擇(表達(dá))

對(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類共53個(gè)圖表,還提供了什么數(shù)據(jù)透視圖,自定義圖表等等,總之種類非常多。不過(guò)盡管圖表種類繁多,但其基本類型只有以下幾種:

曲線圖:用來(lái)反映隨時(shí)間變化的趨勢(shì);

柱形圖:用來(lái)反映分類項(xiàng)目之間的比較,也可以用來(lái)反映時(shí)間趨勢(shì);

條形圖:用來(lái)反映分類項(xiàng)目之間的比較;

散點(diǎn)圖:用來(lái)反映相關(guān)性或分布關(guān)系;

餅圖:用來(lái)反映構(gòu)成,即部分占總體的比例;

地圖:用來(lái)反映區(qū)域之間的分類比較;

那知道了,基礎(chǔ)圖表的類型,那怎么去選擇。國(guó)外專家Andrew Abela他將圖表展示的關(guān)系分為4 類:比較、分布、構(gòu)成、聯(lián)系。然后根據(jù)這個(gè)分類和數(shù)據(jù)的狀況給出了對(duì)應(yīng)的圖表類型建議。當(dāng)我們不確定使用什么類型的圖表的時(shí)候,可以參考下這個(gè)圖。

圖表繪制

俗話說(shuō)【不會(huì)擼碼的交互不是好的數(shù)據(jù)可視化設(shè)計(jì)師】,現(xiàn)在市面上有各式各樣的可視化的方法和工具,但坦白來(lái)說(shuō)【這些可視化工具都是大坑?。?!】,要想做好可視化的表現(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è)城市中最差的。

小結(jié)

將數(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ì)m.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔