之前三周分別針對(duì)Berkeley Earth，AQICN和Earth Nullschool三個(gè)網(wǎng)站的前端技術(shù)做了總結(jié),分別簡(jiǎn)稱為BAE，今天我們拋開技術(shù)，和大家聊兩點(diǎn)：

三個(gè)網(wǎng)站的對(duì)比

數(shù)據(jù)可視化的認(rèn)識(shí)

三個(gè)網(wǎng)站的對(duì)比

如果做一個(gè)比喻，我的感覺(jué)是B像一個(gè)事業(yè)有成的中年，A像一個(gè)充滿活力的青年，而E則是一位不拘一格的藝術(shù)家。如下是三個(gè)網(wǎng)站在中國(guó)區(qū)域的AQI可視化效果，看到這個(gè)對(duì)比圖后，你的第一印象是什么？中間京東618廣告？聽的我一口血吐到屏幕上。

首先，Berkeley有大量的原始數(shù)據(jù)，對(duì)數(shù)據(jù)管理上有很高的要求，比如歷史數(shù)據(jù)的對(duì)比，同時(shí)采用netcdf的數(shù)據(jù)存儲(chǔ)形式，供用戶下載。作為一個(gè)科研機(jī)構(gòu)，他的重心是研究，可視化上更側(cè)重反映數(shù)據(jù)的統(tǒng)計(jì)和分析，比如全球氣溫，中國(guó)的污染等，因此，基于數(shù)據(jù)的自身需求兩方面，更側(cè)重服務(wù)端開發(fā)，對(duì)前端要求很小，所以，B站很適合當(dāng)作數(shù)據(jù)服務(wù)提供者。

其次，從AQICN投放廣告的行為，不難理解，這是一個(gè)應(yīng)用為主的網(wǎng)站，本身并不側(cè)重于數(shù)據(jù)的維護(hù)，而側(cè)重于給用戶展現(xiàn)實(shí)時(shí)實(shí)用的數(shù)據(jù)，我們很容易從A站找到當(dāng)前的氣溫，AQI等數(shù)據(jù)，48小時(shí)內(nèi)的情況，未來(lái)兩周的趨勢(shì)等，但數(shù)據(jù)在時(shí)間維度上僅支持較短區(qū)間。本質(zhì)上來(lái)看，數(shù)據(jù)管理并不是自己的分內(nèi)事，如何將這么多種類，雜亂的數(shù)據(jù)，以一種規(guī)范，高效，安全的方式傳輸，是他的核心，所以代碼的更大一部分是在數(shù)據(jù)的請(qǐng)求，解析，而在前端展現(xiàn)上，風(fēng)格就是四個(gè)字：簡(jiǎn)單易用。這和B站有很鮮明的對(duì)比，前者數(shù)據(jù)單一，但專業(yè)性很強(qiáng)，比如近60多年的全球氣溫，最近半年每天的PM數(shù)據(jù)，而后者數(shù)據(jù)類型應(yīng)有盡有，但更大眾化，比如多數(shù)用戶不關(guān)心去年今天的氣溫，但想知道明天的天氣預(yù)報(bào)。

最后是我最欣賞的E站，很好的可視化效果，同時(shí)也沒(méi)有喪失實(shí)用性。不知道我了解的是否真實(shí)：作者是一位跳傘愛(ài)好者，同時(shí)也是微軟的一名開發(fā)人員，每次跳傘都要了解當(dāng)前的天氣，特別是風(fēng)，正是基于自己的這個(gè)需求，同時(shí)也有開發(fā)能力，所以搭建了這個(gè)網(wǎng)站，來(lái)方便全球跳傘愛(ài)好者，逐步擴(kuò)展和豐富。這里有不少出彩點(diǎn)：統(tǒng)一的傳輸格式epak，數(shù)據(jù)解析和傳輸上都有較好的保證；合理使用D3等第三方庫(kù)，代碼很輕；在實(shí)用和可視化效果上都很出色，技術(shù)和藝術(shù)上都很棒。說(shuō)了這么多，無(wú)非是想告訴廣大女性，如果有幸認(rèn)識(shí)了一位優(yōu)秀的程序員，這是上天賜予你的機(jī)會(huì)，千萬(wàn)不要錯(cuò)過(guò)。當(dāng)然，這里的重點(diǎn)是優(yōu)秀這一稀缺性。

數(shù)據(jù)可視化

既然是數(shù)據(jù)可視化，數(shù)據(jù)則是其中的核心，BAE三個(gè)網(wǎng)站，同一類型的數(shù)據(jù)，以自己不同的理解和定位，各自找到了其稀缺性。好的可視化是一種表達(dá)數(shù)據(jù)的方式，能夠幫助你發(fā)現(xiàn)那些盲點(diǎn)。所以，當(dāng)我們面對(duì)問(wèn)題時(shí)，不要急于解決問(wèn)題，而是要抓住問(wèn)題的本質(zhì)。

數(shù)據(jù)可視化是一個(gè)很大的范疇，如上是FlowingData網(wǎng)站的一個(gè)簡(jiǎn)單分類，把一份數(shù)據(jù)從處理，統(tǒng)計(jì)，傳輸?shù)阶詈蟮脑O(shè)計(jì)，渲染，這是一個(gè)很長(zhǎng)的環(huán)節(jié)，技術(shù)上可以只攻克其中一個(gè)點(diǎn)，但真的做事情，則要把這條線貫通。

目前可視化的工具和庫(kù)也很多，比如D3，Echart等，也有很多開放的數(shù)據(jù)，都是值得我們研究和學(xué)習(xí)的對(duì)象，一份數(shù)據(jù)，可以多個(gè)維度的展現(xiàn)其不一樣的價(jià)值。如下圖，是最近十年的全球氣溫變化，以地球?yàn)檩d體體現(xiàn)氣溫變化，以統(tǒng)計(jì)圖現(xiàn)實(shí)具體的數(shù)據(jù)變化，同時(shí)輔以時(shí)間軸和播放速度，豐富交互體驗(yàn)。

喜歡如上范例的，在公眾號(hào)中回復(fù)“planet”，獲取示例代碼

另外，如果在數(shù)據(jù)的前面加上一個(gè)大，就變得更有意思了，如何保證數(shù)據(jù)傳輸和解析性能，如何實(shí)現(xiàn)大數(shù)據(jù)的渲染，傳統(tǒng)的json已經(jīng)無(wú)法勝任，相比而言，arraybuffer和webgl是大數(shù)據(jù)下Web傳輸和渲染的必然趨勢(shì)。如下，左側(cè)是WebGL渲染，右側(cè)是Canvas2D方式，仔細(xì)看綠色區(qū)域的過(guò)渡效果，前者平滑，后者略有跳幀，留給大家一個(gè)問(wèn)題，你覺(jué)得跳幀最可能的原因是什么？自認(rèn)為這是一個(gè)好問(wèn)題，因?yàn)镃anvas2D是可以做到平滑的，只是...要清楚為什么。

我并沒(méi)有在數(shù)據(jù)可視化方面有過(guò)多的學(xué)習(xí)和研究，如果對(duì)這方面有興趣，想要深造，推薦這個(gè)網(wǎng)站（flowingdata.com）和它推薦的書。所謂的創(chuàng)新，不是憑空的想象，而是日積月累的知識(shí)，不經(jīng)意的碰撞所迸發(fā)出的火花。我們不能預(yù)測(cè)某個(gè)引爆點(diǎn)，但唯有不斷充實(shí)自我，方能為這個(gè)奇點(diǎn)的到來(lái)做好準(zhǔn)備。

If there is a light, don't let it go out. 有生之年一定要去一次的演唱會(huì)

總結(jié)

以上是生活随笔為你收集整理的数据可视化之总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。