?[[188220]]?

前段時(shí)間做了一個(gè)關(guān)于諾貝爾人才流動(dòng)的題，包含了可視化視頻和信息圖，所以用這個(gè)選題，來(lái)分享一些制作過(guò)程以及工具使用，希望能夠幫助到題主和其他和對(duì)這方面感興趣的知友。

主題：諾貝爾獲獎(jiǎng)?wù)叩牧鲃?dòng)

我們想表現(xiàn)的就是諾貝爾獲獎(jiǎng)?wù)叱錾嘏c獲獎(jiǎng)時(shí)的居住地的變化，所以想到流線地圖的方式，用地圖直觀的看到某些時(shí)間段內(nèi)人才流動(dòng)的變化。

數(shù)據(jù)：如何收集這個(gè)數(shù)據(jù)?

對(duì)于這個(gè)案例，毫無(wú)疑問(wèn)的數(shù)據(jù)來(lái)源是諾貝爾獎(jiǎng)的官網(wǎng)，上面有最詳細(xì)的獲獎(jiǎng)?wù)咝畔ⅰ?/p>

對(duì)于其他的選題，***與主題相關(guān)的權(quán)威官網(wǎng)。

我們用Import.io工具抓了871條關(guān)于諾貝爾獎(jiǎng)歷年來(lái)的獲獎(jiǎng)?wù)咝畔ⅰ?/p>

因?yàn)樽罱K效果要在地圖上呈現(xiàn)，在源數(shù)據(jù)的基礎(chǔ)上，表格里還加入了國(guó)家的地理坐標(biāo)，方便下一步的軟件操作。

工具：這是用什么做的?

最終視頻=Processing+Ocam+Adobe Premiere+Adobe effect

一個(gè)正經(jīng)的小視頻居然還用到這么多工具?!

那我們用這些工具分別干了什么?

① Processing

本次視頻的流線地圖效果的重要支持軟件!!

我們的編輯寫(xiě)了298行代碼，去表現(xiàn)諾獎(jiǎng)人才流動(dòng)的變化。

??

其實(shí)Processing也可以直接導(dǎo)出每一幀圖片，但為了更好地和AE對(duì)接，所以選擇了錄屏軟件，靈活性更大。

下面是編輯有話要說(shuō)：

1.Processing是具有設(shè)計(jì)背景的團(tuán)隊(duì)，為腦回路完全不一樣的設(shè)計(jì)師們或者代碼苦手等麻瓜(喂)人群打造的交互編程語(yǔ)言，上手容易，邏輯就跟使用AI一樣，特別順暢(….至少剛開(kāi)始是這樣啊喂!)。

2. 對(duì)從沒(méi)接觸過(guò)編程的人來(lái)說(shuō)，Processing會(huì)是個(gè)好開(kāi)始，不光是學(xué)習(xí)Processing，你可以通過(guò)學(xué)習(xí)Processing接觸何為編程，理解編程的邏輯，進(jìn)而接觸其他編程語(yǔ)言，這也是Processing創(chuàng)始人的初衷之一。

3.氣質(zhì)不一樣。恩這點(diǎn)有些玄乎…我把這歸結(jié)為因?yàn)镻rocessing沒(méi)有封裝一些常用的數(shù)據(jù)可視化形式，導(dǎo)致能發(fā)揮的自由度更高，形式更奇葩多樣，可以丑到?jīng)]下限，也可以很美。設(shè)計(jì)師背景也會(huì)讓氣質(zhì)不一樣，類(lèi)似同樣由設(shè)計(jì)師背景團(tuán)隊(duì)打造的raw，是DesityDesign實(shí)驗(yàn)室的產(chǎn)品，你只要打開(kāi)DensityDesign的主頁(yè)可能就明白為什么我說(shuō)氣質(zhì)不一樣..大概。

當(dāng)然無(wú)論是Processing還是d3.js,chart.js…或是AI，都只是工具而已，能用到什么程度，還是看使用它的人。數(shù)據(jù)可視化并不是Processing的核心，Processing可以被叫做創(chuàng)意編程語(yǔ)言，那種感覺(jué)就好像它已經(jīng)從設(shè)計(jì)師跳脫到藝術(shù)家了……很多藝術(shù)家都使用processing創(chuàng)造自己的作品。甩個(gè)接地氣的例子，日本女子組合Perfume有個(gè)國(guó)際推廣的項(xiàng)目perfume global website，她們幾場(chǎng)看起來(lái)各種酷炫的黑科技演唱會(huì)都有Processing的一份功勞哦。

??

廢話一不小心就這么多，重要的是，你還不和我一起跳入processing的大坑啊呸知識(shí)的海洋么!

②Ocam

一款錄屏軟件，用它來(lái)錄制我們的小視頻。

③Adobe Effect和Adobe Premiere

用于錄制視頻的剪輯合成和其他效果的添加。

除了視頻，我們還做了兩張氣質(zhì)不一樣的信息圖，就是我們的編輯推薦的RAW。

??

??

RAW是基于D3.js的開(kāi)源工具，不用代碼，只需要導(dǎo)入數(shù)據(jù)，設(shè)置一些條件就可快速生成，而且可以導(dǎo)出矢量的圖表!

***步：導(dǎo)入數(shù)據(jù)

復(fù)制excel表里的數(shù)據(jù)到Raw里，

??

第二步：選擇圖表模式

以環(huán)形信息圖做案例，我們選擇Circular Dondrogram。

??

第三步：選擇條件生成效果圖

拖拽左邊的條件到右邊呈現(xiàn)的項(xiàng)目，右邊的排序會(huì)影響***生成的結(jié)構(gòu)，生成的效果也會(huì)根據(jù)你的詞條實(shí)時(shí)更新。

??

??

嗯，感覺(jué)有了，但作為一名美數(shù)課代表。這效果怎么可以直接發(fā)送給我可愛(ài)的班主任?

所以先丟給AI，丟給神奇的AI。(噢，這里AI泛指Adobe Illustrator，不是Artificial Intelligence)

第四步：導(dǎo)出svg，AI中修改，發(fā)給班主任，交稿，下班。

??

??

有什么技巧?

??

數(shù)據(jù)可視化的方式和工具有很多：

??

有人說(shuō)，“可視化的很多工具都是一個(gè)大坑。”

本課代表否認(rèn)，“這哪是坑，明明是黑洞!!!洞!!”

Anyway，掌握你所需，然后不斷的練習(xí)，用合適的方式清楚地表達(dá)準(zhǔn)確的信息。