D3 in a Box - Cover

強大的 D3.js 有個極大的缺點 — 任何圖表都要自己重頭寫!彈性往往帶來繁瑣的副作用,然而 Cloudstitch 這間公司顯然找到了解決方法 — 他們所推出的 「D3 in a Box 」服務提供了十來種的 D3 圖表源碼任你使用、修改,還提供圖表 Hosting 服務!那麼,就讓我們來看看如何用 D3 in a Box 快速做出 D3.js 圖表吧!

如果有使用過 D3.js ,你可能就有像這樣的經驗:只是要做個長條圖,除了長條要自己畫、軸線要自己刻、圖例要自己寫、連數值跟格線也都要自己來產生。 D3.js 就像是特力屋賣場,所有的東西我們買回家都要自己組裝。

於是,開始有人利用 D3.js 兜出各式各樣的圖表函式庫,像是 c3.js 、 nvd3 、 dimple 等等的函式庫,可以說相當方便 — 唯一的問題就是他們失去了原本 D3.js 所帶來的好處,也就是彈性與變化性。

如同過去我們曾介紹過的「D3 Generator」一般,如果有個服務能提供各種 D3.js 圖表的基本程式碼讓我們快速改作,是不是會很方便呢?沒錯, D3 in a Box 就是這樣的服務。

D3 in a Box 將十來種的圖表以 D3.js 實現並做成範例專案,我們所要做的就是點擊「Clone」,將專案複製一份到自己的帳號下:

D3 in a Box - Clone Project

舉個例子,假設我們想要製作超炫泡泡圖,我們可以點擊上圖「Bubble Chart」下方的「Clone」按鈕,將 Bubble Chart 專案複製一份到我們的帳號下。下圖為複製完成後的泡泡圖原始程式碼,可以看到除了「 Javascript」 之外,上方還有「HTML」、「CSS」兩個檔案我們可以做修改:

D3 in a Box - script

你可能會問,只有 JS、HTML 與 CSS 檔,那資料怎麼辦呢?其實, Cloudstitch 是專門在做 Google Spreadsheet 整合的公司,所以資料當然是從 Google Spreadsheet 來囉!D3 in a Box 的源碼都由一個進入點函式包覆,並會在這個進入點執行時帶入我們所指定的資料,所以在程式碼中我們不需要去考慮資料來源的問題,除了提升了圖表的再利用性,也省去了處理資料取得的額外程式碼。進入點函式的基本定義如下:

  module.exports = function(root, rawdata) { ... }

可以看到函式的參數有兩個, root 為圖表的根元素, rawdata 則即是欲繪製的資料囉。

D3 in a Box 將圖表包裝成一個個的專案,除了 HTML 、 CSS 、 JS 等基本的檔案以外,專案本身也有一些設定可以調整,比方說資料來源即是其中一項。下圖為整個專案的基本介面:

D3 in a Box - Interface

資料自然也就是直接在 Google Spreadsheet 編輯了,點擊 EDIT 會連到 Google Spreadsheet 檔案,剛 Clone 完的專案會帶入範例資料,如下圖即為泡泡圖用的範例資料:

D3 in a Box - Spreadsheet

快速改作

本篇的標題也提到了:「改作、學習兩相宜」,如果對於 D3.js 不熟悉的朋友可以透過 D3 in a Box 學習如何使用 D3.js ,而需要快速開發客製圖表的朋友也能利用 D3 in a Box 很快的做出需要的客製化。舉個例子來說,若我想要把泡泡圖的圓圈改成矩形,我只要找到程式碼中附加圓圈的程式碼片段略作修改即可。下面的程式碼是建立泡泡的片段:

  node.append("circle")
  .attr("r", function(d) { return d.r; })
  .style("fill", function(d) { return fill(d.packageName); });

改作後變成下列程式碼 ( 紅色為改作部份 ):

  node.append("rect")
    .attr({
      x: function(d) { return -d.r * 0.8;},
      y: function(d) { return -d.r * 0.8;},
      width: function(d) { return d.r * 1.6;},
      height: function(d) { return d.r * 1.6;},
    })
    .style("fill", function(d) { return fill(d.packageName); });

那麼方塊泡泡圖便完成了:

D3 in a Box - Rect Bubble

是不是真的方便了許多呢?

存檔問題

我們實際上在試玩 D3 in a Box 時發現檔案檢視中雖然可以直接編輯,但並沒有辦法存檔,一定要進到檔案瀏覽畫面並明確的開啟該檔後,才有存檔按鈕可以按。如果想玩的朋友可以參考下圖來找到存檔功能:

D3 in a Box - editor
  1. 點擊「Interface」旁的齒輪按鈕
  2. 點擊想要編輯的檔案
  3. 編輯檔案完成後,點擊「Save」按鈕

發布圖表

完成了我們的  D3.js 圖表後, D3 in a Box 還提供了 Hosting 的服務,我們可以點擊左方選單的「Publish」來直接使用  D3 in a Box 提供的連結將圖表以嵌入的方式顯示。下面即為嵌入的範例:

結語

由於 Cloudstitch 本身專注於製作銜接 Google Spreadsheet 的服務,除了提供 D3 in a Box 以外,他還有提供像是「Stack in a Box」、「Magic Form」、「Sheet API」等方便做各種配合的服務,不過我們在此僅專注於觀察他在 D3.js 視覺化上提供的服務。

D3 in a Box 真的是個很不錯的東西,雖然現階段圖表十來個還不算多,使用上也有些小地方還可以改進或需要修正的,但很令人期待他後續的進展。你還有需要編修的 D3.js 視覺化圖表嗎?下一次試試看 D3 in a Box 吧!

 


Written by infographics.tw

發表迴響

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