WordPress で D3.js を使う（その1：WP-D3プラグインを使う方法）

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

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

<a href="http://d3js.org/">D3.js - Data-Driven Documents</a>

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

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

（参考）

WordPressの記事内でJavaScriptを動かす

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

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

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

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

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

WP-D3 (Wordpress-d3.js)

バージョン 2.1.2
WordPress 3.9.1, 4.0.1 で動作確認
WP-D3 自体のライセンスは、GPL2

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>