cover

不會寫程式,也想要做出 D3.js 的各種動態圖表嗎?動態圖表往往比靜態圖表強力許多,但礙於技術與工具的限制,要做出動態的視覺化並不簡單。現在,只要你會用 Microsoft Excel ,E2D3 就幫你快速的做出基於 D3.js 的動態圖表!

寫程式並不是一件很難的事,但寫好程式也不是一件簡單的事;繪製圖表最簡單也有效的方式便是手繪,但手繪缺少了再利用性也無法參數化,互動與動畫的效果通常是沒辦法透過繪圖軟體做到的。這時,寫程式製作互動視覺化似乎變成了必經的一條坎坷路,是不是有什麼方法能讓我們不需要寫程式也能做出 D3.js 作品般的效果呢?

E2D3 如同字面上的「Excel to D3」,他是一個 Excel 的增益集,讓我們可以透過 Excel 來建立 D3.js 圖表。簡單的說,再也不用自己寫程式了!

安裝

E2D3 適用於 Excel 2013 SP1 或 Excel Online 版本,若你本機安裝的 Excel 不夠新,也可以試著使用 Excel Online 看看,我們以下便以 Excel Online 做範例。首先,連至 E2D3 的市集頁面,點擊「新增」:

E2D3

若沒有 Microsoft 帳號或是尚未登入,接下來便會被導至登入畫面。這時我們便可以註冊、或用已有的 Microsoft 帳號登入:

login

接著,進入 Microsoft Excel Online 網站,建立新的活頁簿,然後點選「插入 → Office 增益集」,這時應該就會看到 E2D3,點選 E2D3 後按插入:

insert

插入 E2D3 之後我們會看到如下圖的畫面,一個大大的對話框中有許多的圖表可選擇。E2D3 提供了數十種的圖表讓我們使用,包含常見的折線圖、散佈圖、也有比較複雜的統計地圖、 Sun Burst 等等的圖表類型,按他的分類來區別一共有八種類型:

  • Recommended
  • Statistics
  • Examples
  • Hackathon
  • Map
  • Marathon
  • To Be Developed
  • Uncategorized

說真的,並不是很有幫助的分類,可能還是得自己先大致瀏覽過一遍,先了解有些什麼樣的圖表。

inserted

大致上了解他的圖表類型之後,我們挑選想使用的圖表,點擊彈出視窗的「Visualize」按鈕 ( 如上圖「Sequences Sunburst 右方的按鈕」 ),一個動態的 D3.js 便立刻建立了,例如下圖為我們建立的動態散布圖,泡泡會由畫面上方掉入繪圖區域:

scatter

這裡產生的圖表是使用 E2D3 本身所附帶的範例資料來製作的,一旦我們點擊「Visualize」鍵的同時,範例資料也會複製一份到 Excel 表格之中;為了看看資料,我們將這個視覺化對話框移開,便能在底下的資料格看到 E2D3 填入的資料,大約有 200 行:

Sample Data

( Excel Online 的設計有點隱誨,我們要將滑鼠移到對話框的邊緣,等滑鼠遊標變成十字型箭頭時就能拖動對話框 )

既然有範例資料,我們要製作自己的視覺化就容易多了:只要按照範例資料的格式把我們的資料填入即可!在下圖中,我們清除了所有的資料,然後自己鍵入了四筆資料,可以看到右方圖表中的泡泡同時也改變了:

edit data

若我們想要再別的資料欄中重新建立資料,也是可以的;首先照範例資料的格式把我們的數據填好並全選,接著點擊圖表上方的「Link Data」,便能將資料與圖表重新做連結。是不是很方便呢?

最後,對於完成的圖表, E2D3 讓我們可以直接透過網址分享,也能夠直接下載 SVG 或 PNG 格式的圖表,不過我們在使用時似乎網址與 PNG 下載有點問題, SVG 仍是正常的。要分享或下載,點擊圖表上方的對應按鈕即可,下圖為點擊分享後彈出的對話框,裡面提供了分享用的連結以及嵌入用的 HTML 程式碼:

share button

結語

E2D3 提供了一個相當方便的方式讓我們能夠快速產生各種 D3.js 圖表,我們其實也可以把他視為原生的 Excel 圖表工具的延伸;提供下載與分享的連結更是讓這個工具的價值更高了一些,更重要的是他是開源的!我們可以在 E2D3 的官方網站找到其 github 的網址,裡面甚至有教我們如何加入自己的視覺化,這代表他讓我們可以在 Excel 中追加自己想要的圖表類型,就算不會寫程式,也可以找人協助開發,完成後馬上就可以在 Excel 中使用了!

開源、擴展性是他的優點,不過缺點也不是沒有的:

  • 實測下來我們注意到產生的圖表有些小錯誤,這代表我們得另外再下載處理才能正確使用。
  • 圖表的分類混亂,不容易找到想要的圖表
  • 總共 60 多個圖表中,不少是重覆、特定用途、地區限定的。除去這些,比較一般性的圖表可能不到 20 種。
  • 編輯資料時會需要等待重新產生圖表,使得編輯效率不佳。
  • 無法客製樣式。
  • 有些說明是日文,不易理解。

這些問題,尤其是圖表種類這點,讓這個工具的實用性打了些折扣;不過若我們恰好需要 E2D3 裡所提供的動態圖表,那 E2D3 也是個不錯的選擇!所以,不妨玩玩看是否合乎你的需求,未來若要製作類似的動態視覺化時,就可以不求人自己來囉!

 


Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *