安利一個易於上手的數據可視化工具

因為各種原因專欄斷更了兩個來月。現在稍微閑一點了,望著草稿箱里的東西又暫時不太想動。就先來篇濕貨,安利一個最近在玩的玩具吧 。

* * * * * *

最近這段時間對數據可視化產生了興趣。單純用 AI 來手畫信息圖,自然是很不高效的事情(儘管 AI 提供了幾個簡單的圖表工具);用 Excel / Numbers,又不夠強大。於是,我就打開終端 <del>念了兩句詩</del> 輸了行命令:

npm install d3n

D3 應該算是最流行的數據可視化工具之一了,那麼選它當然吼啊。

Na?ve.

事實證明一開始就用 D3 是個挺糟糕的選擇。最終,幾天下來的結果,跟著文檔寫了幾個 demo 之後,還是暫時擱置了。除了溫習了一下 js 的基礎, 了解了一下 SVG 的結構,以及將編輯器換成了 Atom 之後,就沒有太大收穫了。

D3 雖然是個很強大的框架,但畢竟還是太底層了一些。與其說它是一個用於繪圖的框架,不如說是用來對輸入的數據進行處理的工具。想要直接用 D3 做出一個簡單的柱狀圖,也得費不少功夫。如果是沒有多少編程經驗的使用者(如我),更加難以使用。

於是,我最後還是把 D3 暫且擱置了。

* * * * * *

題圖是對 2015 年香港天氣的可視化。數據來自 香港天文台,並且參考了 Sonja Kuijpers 的一個作品:Weather Eindhoven 2014

這張圖是用 NodeBox 3 畫的。當然,這裡呈現出來的是在 AI 里稍加潤色、繪製圖例,並且在 PS 中調了下色的結果。不過即便是 NodeBox 3「直出」的圖,也已經可以做出一些效果來了。

我並不是最近才開始接觸 NodeBox 這個工具的。在 2014 年年初,我就開始用這個軟體做些小東西玩了。但在當時,我也並未意識到 NodeBox 是有能力繪製一些頗為複雜的圖形的。

上圖是 NodeBox 的界面,以及題圖在 NodeBox 中生成出來的「原始效果」。Grasshopper 的使用者應該會對 NodeBox 的界面感到很熟悉——和 Grasshopper 以及其他一些圖形化編程工具(譬如 Facebook 的原型工具 Origami,以及 Origami 所依賴的 Quartz Composer)一樣,NodeBox 使用了節點式界面。

這樣的節點式界面可以使沒有太多編程基礎的使用者免於考慮句法的完整性,同時整個「程序」的邏輯關係也相對直觀。當然,與上手的簡易相對應,節點式界面使用起來的效率自然不如直接寫代碼高。在 NodeBox 中,假使想用一個相對複雜的表達式來對一個數據進行運算,就拖上好幾個節點——雖然用 Python 構建自定義節點,實現較為複雜的數據處理,但過程也算不上十分簡便。相對之下,Grasshopper 要在節點中插代碼就便利得多。

雖然 Grasshopper 提供的節點(「電池塊」)要強大得多,但是從編程到呈現最終的效果,中間一般還得隔著一個 AI。而 NodeBox 直接生成 PostScript 圖形,如果不是要實現比較複雜的效果(譬如多重描邊、箭頭、漸變之類),直接導 PDF / SVG / PNG 就可以用了——而且調整參數能直接看到效果的變化。

對於做平面上的數據可視化而言,NodeBox 依然是一個值得嘗試的工具。倘使開發方 EMRG 在正在內測中的下一代的 NodeBox (NodeBox Live) 中,讓 Python 可以直接調用底層的繪圖 API, 相信可以實現的東西也會更多。

在 NodeBox 官網的 Gallery 中有一些很有趣的例子:Gallery | NodeBox. 可以看到,NodeBox 能做到的東西還是很多的。

在此,請容我先行擱筆 _(:3 」∠)_

推薦閱讀:

zzz 周刊 - 第 1022 期 - 尼爾
人均消費與城鎮人口比例
老樹微博,三千詩與畫
Quantmod Tutorial:圖形分析(三)
一場用R語言打造的商務圖表視覺盛宴~

TAG:平面设计 | 数据可视化 | 设计 |