D3 Generator

D3.js ( http://d3js.org ) 是一個強大的網頁端視覺化函式庫,除了他獨特的資料驅動式物件模型之外,完整的視覺化輔助套件也是其強大的原因之一。不過彈性必然帶來複雜度,強大的背後隱含陡峭的學習曲線與費時的程式設計。

其實線上已經存在許多包裝 D3.js 成為另一套更容易使用的函式庫,例如 C3.jsEpoch 等等,不過函式庫包裝的同時往往也就失去了彈性。今天要介紹的這個 d3-generator ( http://d3-generator.com/ ) 跳脫函式庫的思維從程式碼產生器出發,透過簡單的設定產生對應的 D3js 視覺化程式碼,接著你就可以修改程式碼來做自己的客製化。

d3-generator 使用只有三個步驟:

  1. 匯入資料 - CSV 限定
  2. 圖表設定 - 選定圖表對應欄位。目前只能產生長條圖
  3. 產生圖表、微調程式碼

開啟網頁時他已經先帶入了一筆測試用的資料供你玩耍了:

D3 Generator: Step1

欄位對應的設定,包括長度、欄位名稱、排序等等的設定:

D3 Generator: Step2

產生出來的圖表與程式碼:

D3 Generator: Step4 D3 Generator: Step3

從頭一路做到這裡的速度很快,不過接下來才是圖表製作的重頭戲,怎麼從一個樣板產生的圖表客製出自己想要的效果,這仍然需要對 Javascript 以及 D3JS 熟悉才能很容易的改出有意思的圖表。先從改個顏色下手吧,改顏色相對簡單,增修兩行程式碼即可:

  var color = d3.scale.ordinal().range(["#57C768","#9D7834","#D7CC88" ... ]);
  barContainer. ... .attr('fill', function(d) {return color(d['Name']);});

這兩行程式碼將每個長條根據其國名著上不同的顏色:

D3 Generator: Customize Color

光是這樣當然還不夠看,讓我們試著把 Bar Chart 變成 Curved Bar Chart。自動產生的程式碼使用 RECT 這個 SVG 元素來繪製長條色塊,我們改用 PATH 元素並利用 D3JS 的 d3.svg.arc 函式來繪製圓弧線:

  ... .attr("d",function(d,i) {
    j = Math.abs(19 - i), w = yScale.rangeBand();
    arc = d3.svg.arc().innerRadius(j*w).outerRadius(j*w + w - 2);
    arc.startAngle(0).endAngle(3.14 * barValue(d)/1339);
    return arc();
  })

然後拿掉格線跟長條後方的數字,圖表即變成這個樣子:

D3 Generator: Curved Bar Chart

 

比例上稍微有點跑掉,因為程式碼使用半圓弧度來計算,有些色塊一路畫到畫面外去了,將程式碼中的 3.14 改為 1.57 應可修正,不過做為示意效果還不錯。

優缺點總結

這算是一個簡單的小工具,由於侷限在長條圖產生,真正能玩的變化並不多,而且一旦改動幅度大,整個程式碼也等於重寫了。再者,必須要會使用 Javascript 程式設計以及熟悉 D3JS 函式庫,否則很難真的做出很大的改動,頂多就是改改顏色或是字型等等的設定。

即便如此,當做開發視覺化網頁的起點或是做為程式教學的用途也不錯,若未來能提供不同類型的圖表樣版產生那就更好了。這個工具提供產生後的完整 HTML + Javascript 程式碼,必要的函式庫都使用 CDN 連結,拷貝貼上到網站上之後就可以使用囉!


Written by infographics.tw

2 Comments

fairolk

您好
照著您的換了顏色,但是卻沒有照著name三個顏色輪流出現
想請問是否加錯行了呢,謝謝

//color
var color = d3.scale.ordinal().range([“#57C768″,”#9D7834″,”#D7CC88”]);
// bars
var barsContainer = chart.append(‘g’)
.attr(‘transform’, ‘translate(‘ + barLabelWidth + ‘,’ + (gridLabelHeight + gridChartOffset) + ‘)’);
barsContainer.selectAll(“rect”).data(sortedData).enter().append(“rect”)
.attr(‘y’, y)
.attr(‘height’, yScale.rangeBand())
.attr(‘width’, function(d) { return x(barValue(d)); })
.attr(‘stroke’, ‘white’)
.attr(‘fill’, function(d) {return color(d[‘Name’]);});

Reply

發表迴響

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