今年春節(jié)那段時(shí)間，疫情依舊是反反復(fù)復(fù)，幾個(gè)城市都出現(xiàn)了確診病例，感覺(jué)又回到了之前每天看信息圖的那會(huì)兒。

 

來(lái)源：北京大學(xué)可視化與可視分析實(shí)驗(yàn)室

 

這種信息圖跟普通的網(wǎng)頁(yè)差別很大，無(wú)法用傳統(tǒng) Web 開(kāi)發(fā)技術(shù)實(shí)現(xiàn)，叫作數(shù)據(jù)可視化。作為前端領(lǐng)域中一個(gè)幾乎不用寫(xiě)網(wǎng)頁(yè)的特殊分支，可視化利用計(jì)算機(jī)的圖形學(xué)和圖像處理技術(shù)，將數(shù)據(jù)轉(zhuǎn)換成圖形或圖像，在屏幕上顯示出來(lái)，并進(jìn)行交互處理。

 

它可以實(shí)現(xiàn)很多傳統(tǒng) Web 網(wǎng)頁(yè)無(wú)法實(shí)現(xiàn)的效果，應(yīng)用領(lǐng)域也非常廣泛，除了前面說(shuō)過(guò)的疫情地圖以外，還有淘寶“雙 11”的可視化大屏、平臺(tái)的年度賬單、企業(yè)級(jí)應(yīng)用中的態(tài)勢(shì)感知和指揮調(diào)度大屏，甚至是國(guó)家大力推廣的智慧城市、智慧生活等等。

將 GitHub 中提交開(kāi)源項(xiàng)目的次數(shù)做成 3D 可視化圖表

 

所以，行業(yè)對(duì)可視化工程師的需求越來(lái)越大，很多一線互聯(lián)網(wǎng)公司都設(shè)有相關(guān)崗位，但這方面的專業(yè)人才卻寥寥無(wú)幾。

 

優(yōu)秀的可視化工程師，會(huì)根據(jù)產(chǎn)品經(jīng)理和設(shè)計(jì)師的想法，實(shí)現(xiàn)貼合用戶需求、靈活多變的可視化作品。要做到這一點(diǎn)，絕不是會(huì)使用某個(gè)庫(kù)、調(diào)用某個(gè) API 就能實(shí)現(xiàn)的，需要深入技術(shù)棧底層，充分理解數(shù)據(jù)，掌握視覺(jué)呈現(xiàn)技術(shù)和基本原理，之后再系統(tǒng)學(xué)習(xí)可視化領(lǐng)域的方法論，才能真正提高解決問(wèn)題的能力。

 

為了幫你梳理每部分的知識(shí)重點(diǎn)，分享給你一張可視化知識(shí)結(jié)構(gòu)圖：

 

 

這張圖譜出自月影，說(shuō)起月影，在前端圈，大家應(yīng)該都挺熟悉的。他曾是 360 最大前端團(tuán)隊(duì)奇舞團(tuán)的團(tuán)長(zhǎng)，并兼任 360 測(cè)試團(tuán)隊(duì) Qtest 的負(fù)責(zé)人?，F(xiàn)在去了字節(jié)跳動(dòng)，級(jí)別也是高的嚇人，最早我還讀過(guò)他那本《JavaScript 王者歸來(lái)》，收獲很大，把我對(duì)于 JS 的疑惑都串了起來(lái)。

 

這幾年，他一直在可視化領(lǐng)域深耕，開(kāi)發(fā)了跨平臺(tái)的開(kāi)源圖形系統(tǒng) SpriteJS，不僅能高性能地渲染酷炫的可視化大屏，還有很好的跨平臺(tái)能力，可移植到任何擁有 Canvas 環(huán)境的平臺(tái)上。

 

所以，那會(huì)兒看他推出了專欄《跟月影學(xué)可視化》，我第一時(shí)間就訂閱了。之前就用各種 JavaScript 圖形庫(kù)寫(xiě)過(guò)一些可視化圖，但僅限于滿足 API 調(diào)用，大多數(shù)時(shí)候還是不得要領(lǐng)。直到遇到這門(mén)課，跟著月影大佬學(xué)完，讓我對(duì)可視化的理解上了一個(gè)新高度。

拼團(tuán)+口令「yueying88」立省 ￥85

原價(jià) ￥199，僅「前 100 人」有效

在專欄中，他通過(guò) 5 大項(xiàng)目實(shí)戰(zhàn)，帶你從 0 到 1 構(gòu)建可視化技術(shù)體系，掌握 4 大繪圖系統(tǒng)底層實(shí)現(xiàn)原理，進(jìn)而開(kāi)發(fā)出適合自己的可視化工具集，實(shí)現(xiàn)效果酷炫的 3D 可視化大屏，徹底掌握可視化這個(gè)熱門(mén)技能。

 

最近，專欄剛剛完結(jié)，滿打滿算 54 講，口碑也非常不錯(cuò)，截了些評(píng)價(jià)供你參考??

       

   

月影是如何講解可視化的？

根據(jù)可視化的實(shí)現(xiàn)方式，他將內(nèi)容分為五個(gè)部分。

 

第一部分：圖形基礎(chǔ)，結(jié)合實(shí)際案例，講解 HTML/CSS、SVG、Canvas2D 和 WebGL 四種圖形系統(tǒng)，幫你理解它們的用法、優(yōu)點(diǎn)和局限性，讓你在實(shí)際應(yīng)用中選擇合適的圖形系統(tǒng)，達(dá)到最好的視覺(jué)效果。

 

第二部分：數(shù)學(xué)基礎(chǔ)，深入講解向量和矩陣運(yùn)算、參數(shù)方程、三角剖分和仿射變換等內(nèi)容，并配合綜合運(yùn)用，幫你建立一套適用于所有圖形系統(tǒng)的通用數(shù)學(xué)體系，以此解決可視化圖形呈現(xiàn)中的大部分問(wèn)題。

 

第三部分：視覺(jué)呈現(xiàn)，討論像素化、動(dòng)畫(huà)、3D 和交互等話題，結(jié)合美顏、圖片處理和視覺(jué)特效等實(shí)際案例，應(yīng)用各種數(shù)學(xué)和圖形學(xué)知識(shí)，幫你全面提升視覺(jué)呈現(xiàn)的能力，實(shí)現(xiàn)更高級(jí)的視覺(jué)效果。

 

第四部分：性能優(yōu)化，通過(guò)學(xué)習(xí) WebGL 渲染復(fù)雜 2D、3D 模型的方法，帶你了解可視化高性能渲染的技術(shù)思路，結(jié)合他總結(jié)的方法論，解決大規(guī)模數(shù)據(jù)批量渲染的性能瓶頸問(wèn)題。

 

第五部分：數(shù)據(jù)驅(qū)動(dòng)，結(jié)合 3D 柱狀圖、3D 層級(jí)結(jié)構(gòu)圖、3D 音樂(lè)可視化等案例，講解數(shù)據(jù)處理的技巧，真正將數(shù)據(jù)和視覺(jué)呈現(xiàn)結(jié)合起來(lái)，實(shí)現(xiàn)具有科技感的 3D 可視化大屏效果，最終形成完整的可視化解決方案。

 

跟月影學(xué)完這門(mén)課，你會(huì)系統(tǒng)掌握可視化開(kāi)發(fā)的原理和方法，理解數(shù)據(jù)處理和視覺(jué)呈現(xiàn)的方式，最終創(chuàng)建出適合自己的可視化工具集，用它解決可視化開(kāi)發(fā)中的實(shí)際問(wèn)題。

說(shuō)了這么多，有多干貨，大家自己看看目錄了。 

       

      

大學(xué)玩游戲，工作來(lái)補(bǔ)課。所以還是那句話：種一棵樹(shù)最好的時(shí)間是十年前，其次是現(xiàn)在，抓住機(jī)會(huì)。

原價(jià) ￥199，秒殺 ￥129

結(jié)算用口令「yueying88」立省 ￥85

口令僅限「前 100 人」有效。

 

??掃碼免費(fèi)試讀

  

??點(diǎn)擊「閱讀原文」，再提醒下，記得用口令「yueying88」，一頓飯錢(qián)跟著月影大佬，拿下可視化，值了。