akiyoko blog

akiyoko の IT技術系ブログです

WordPress で D3.js を使う(その1:WP-D3プラグインを使う方法)

この投稿は 「d3.js Advent Calendar 2014 - Qiita」 の 7日目の記事です。


D3.js は、SVG要素・Canvas要素などを使ってデータをビジュアライズするための JavaScriptライブラリです。例えば、WordPressで運用しているサイトの投稿や固定ページできれいなグラフを表示したいというシーンにおいても、D3.js を利用することができます。


なお、D3.js のライセンスは 修正BSDライセンス なので、商用で利用しやすいのも重要なポイントですよね。




しかしながら、そのままの状態の WordPress では、投稿や固定ページで D3.js はおろか、JavaScript すら動かすことができません。

(参考)


そこで、何らかの WordPressプラグインを使うのが手っ取り早い解決策になるのですが、オススメしたいのが次の 2つのプラグインです。



今回は(その1)として、「WP-D3」プラグインを紹介していきます。



 

(その1)WP-D3 (Wordpress-d3.js) プラグインを使う方法

利用するのは、以下のプラグインです。

WP-D3 (Wordpress-d3.js)


 

1) WP-D3プラグインをインストール

「WP-D3」をプラグイン検索し、「いますぐインストール」をクリック。

f:id:akiyoko:20141207153940p:plain


プラグインを有効化」をクリック。

f:id:akiyoko:20141207154006p:plain


インストールはこれで完了です。



2) ショートコード [d3-source] を使って投稿する

あとは、テキストモードで、[d3-source] で囲んだ D3.js のスクリプトを書き込むだけでオッケーです。

f:id:akiyoko:20141207173636p:plain

(サンプル)

WP-D3 を使ったグラフのサンプル

[d3-source canvas="hist-test"]
var svgWidth = 480;
var svgHeight = 250;
var margin = {top: 10, right: 10, bottom: 30, left: 30};
var width = svgWidth - margin.left - margin.right;
var height = svgHeight - margin.top - margin.bottom;
var xMin = 0;
var xMax = 50;
var xTicks = 25;
var dataSet = [
    43,  43,  43,  42,  41,  40,  40,  39,  39,  39,  38,  38,  38,  38,  38,
    38,  37,  37,  37,  37,  37,  37,  37,  36,  36,  36,  36,  36,  36,  35,
    35,  35,  35,  35,  34,  34,  34,  34,  33,  33,  33,  33,  32,  32,  32,
    32,  32,  31,  31,  31,  31,  30,  30,  29,  29,  29,  29,  29,  29,  29,
    29,  28,  28,  28,  28,  28,  28,  28,  28,  28,  28,  27,  27,  27,  27,
    27,  26,  26,  26,  26,  26,  25,  25,  25,  25,  25,  25,  25,  24,  24,
    24,  24,  24,  24,  24,  24,  24,  23,  23,  23,  23,  22,  22,  22,  22,
    22,  22,  22,  22,  22,  21,  21,  21,  21,  21,  21,  21,  20,  20,  20,
    20,  19,  19,  19,  18,  18,  18,  17,  17,  16,  16,  15,  15,  15,  15,
    15,  14,  14,  14,  14,  13,  12,  10,  10
];

var xScale = d3.scale.linear()
    .domain([xMin, xMax])
    .range([0, width]);

var data = d3.layout.histogram()
    .bins(xScale.ticks(xTicks))
    (dataSet);

var yScale = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.y; })])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

var svg = d3.select(".hist-test")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(0,0)")
    .call(yAxis);

var bar = svg.selectAll(".bar")
    .data(data)
    .enter()
    .append("g")
    .attr("class", "bar")
    .attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"; });

bar.append("rect")
    .attr("x", 1)
    .attr("width", xScale(data[0].dx) - 1)
    .attr("height", function(d) { return height - yScale(d.y); });

bar.append("text")
    .attr("class", "tip")
    .attr("dy", ".75em")
    .attr("y", 5)
    .attr("x", xScale(data[0].dx) / 2)
    .attr("text-anchor", "middle")
    .text(function(d) { return d.y; });
[/d3-source]

<style>
svg {
  background-color: #fff;
}
.bar rect {
  fill: steelblue;
  shape-rendering: crispEdges;
}
.bar text {
  fill: #fff;
}
.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.axis {
  font: 10px sans-serif;
}
.tip {
  font: 8px sans-serif;
}
</style>


こんな感じで表示されます。

f:id:akiyoko:20141207173359p:plain

とてもいいですね。




 

メリット・デメリット

最後に、「(その1)WP-D3 (Wordpress-d3.js) プラグインを使う方法」のメリット・デメリットをまとめます。


メリット

 

デメリット

  • D3.js のバージョンが WP-D3プラグインに依存してしまう(3.3 固定?) *1
  • WordPress 3.3 では若干の不具合あり? *2




明日は、 「d3.js Advent Calendar 2014 - Qiita」 の 8日目の記事、「WordPress で D3.js を使う(その2:PageViewプラグインを使う方法)」です。




*1:プラグインに内包されている d3.js を入れ替えれば対応可能?

*2:WordPress のバージョン以外の原因も考えられます(個人的に管理している環境で確認)