D3.js
* Data Driven Documentの略 * Protovis の後継ライブラリ。Protovis については、以下のサイトを参照のこと。http://mbostock.github.io/protovis/ex/
http://www.moongift.jp/2009/04/canvas%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E8%A4%87%E9%9B%91%E3%81%AA%E3%82%B0%E3%83%A9%E3%83%95%E3%82%82%E6%8F%8F%E7%94%BB%E3%81%99%E3%82%8B%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%80%8Cproto/
* 表現には、主に SVG(Scalable Vector Graphics)での描画 SVGについては、以下の関連記事を参照のこと。http://blogs.yahoo.co.jp/dk521123/35463762.html
注意
* 決してチャート・ライブラリではない => JavaScriptでのDOM操作に円・四角などの描画が加わった印象 => グラフ描画だけでよければ、C3.js で描画した方が楽(C3.js については、以下の関連記事を参照のこと)http://blogs.yahoo.co.jp/dk521123/35509265.html
* グラフを書く際に、正の値のみなのか、負の値も含まるかによって、実装方法を変えなければならない (以下の関連記事に、その例がある)http://blogs.yahoo.co.jp/dk521123/35450750.html
* Google Chromeだと、見えないケースがある => Same-origin policyにひっかかるため？
公式サイト
http://d3js.org/日本語サイト
http://ja.d3js.node.ws/API リファレンス
https://github.com/mbostock/d3/wiki/API-Reference以下のように大別されている 1) Core ：D3.jsの中心的なモジュール 2) Scales ：尺度に関するモジュール 3) SVG ：線や、軸、図形を描画するためのモジュール 4) Time ：時間をもとにした尺度関連のモジュール 5) Layouts ：複雑なレイアウトをつくるためのモジュール 6) Geography：地図データを表示するためのモジュール 7) Geometry ：幾何学的な図を作成するためのモジュール
デモ
https://github.com/mbostock/d3/wiki/Gallery導入方法
http://d3js.org/より [1] サイトに 「<script src="">http://d3js.org/d3.v3.js">」 を追加する または [2] 上記の公式サイトからダウンロードしインポートする
使い方
基本的な考え方
1) 要素を指定する 2) その要素に対して、設定・取得する
主なメソッド
* data : データを結びつける(バインド) * transition : アニメーション効果を操作 * each : アニメーションの最初と最後に何かをやりなさいというのを別の命令で実現する # アニメーションについては、以下の関連記事を参照のこと。http://blogs.yahoo.co.jp/dk521123/35481724.html
* on : イベントを取得できる
主な属性
* transform属性 translate/rotate : 要素の移動・回転http://dataisfun.org/2014/05/19/?p=276
仮想領域
* update : 対応する要素が存在する場合(text, styleで操作) * enter : 対応する要素が足りない場合(append()で対応) * exit : 対応する要素が余る場合
サンプル
* 面白いが実装大変。。。サンプルと合わせて以下を見てみるといいかも。 * あくまでサンプル。こんだけ書いて、実用はできない見栄えhttp://shimz.me/blog/d3-js/3307
* 棒グラフ(初めに作るなら、円グラフの方がハードルが低い)
http://blogs.yahoo.co.jp/dk521123/35435961.html
<html>
<body>
<head>
<style>
.axis path, .axis line {
fill: none;
stroke: black;
}
.axis text {
font-size: 11px;
}
</style>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script>
var arrayData = [32, 5, 36, 22, 12];
var graphAreaWidth = 500;
var graphAreaHeight = 300;
var padding = 20;
var xScale = d3.scale.linear()
.domain([0, d3.max(arrayData)])
.range([padding, graphAreaWidth - padding])
.nice();
var graphArea = d3.select("body").append("svg").attr({width: graphAreaWidth, height: graphAreaHeight});
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
graphArea.append("g")
.attr({
class: "axis",
transform: "translate(0, 180)"
})
.call(xAxis);
graphArea.selectAll("rect")
.data(arrayData)
.enter()
.append("rect")
.transition()
.attr({
x: padding,
y: function(d, i) {
return i * 25;
},
width: function(d) {
return xScale(d) - padding;
},
height: 20,
fill: "Blue"
});
</script>
</body>
</html>
参考サイト
* 有名サイト（スコット・マレイ）http://ja.d3js.info/alignedleft/tutorials/d3/
* シンプルなサイト。初めにみておくといいかも
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_20.htm
* 有名サイト
http://codezine.jp/article/detail/7459
* まとまってて見やすい
http://www.techscore.com/blog/2014/12/19/d3-js%E3%81%A7%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E9%AD%85%E3%81%9B%E3%82%8B/
* 綺麗なサンプル
http://dev.classmethod.jp/ria/d3js/
http://dataisfun.org/
http://blog.scimpr.com/2013/01/19/%E6%B0%97%E3%81%AB%E3%81%AA%E3%82%8Bd3-js%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB/
* With Google Map
http://shimz.me/blog/d3-js/3743
* 地図関連
http://shimz.me/blog/d3-js/2993
http://geoexamples.com/geoexamples/d3js/d3js_electoral_map/pieChartTooltipCode.html
* 豊富なサンプルがある
http://www.openspc2.org/reibun/D3.js/
http://techslides.com/over-1000-d3-js-examples-and-demos
http://bl.ocks.org/ZJONSSON
* With ASP.NET MVC
http://tech.tanaka733.net/entry/d3-js-and-asp-net-mvc-1
関連記事
構文
D3.js ～ SVG編 ～http://blogs.yahoo.co.jp/dk521123/35463762.html
共通でやることあれこれ
D3.js ～ 凡例を表示する ～http://blogs.yahoo.co.jp/dk521123/35474311.html
D3.js ～ 目盛を表示する ～ ～
http://blogs.yahoo.co.jp/dk521123/35564769.html
D3.js ～ ツールチップを表示する ～
http://blogs.yahoo.co.jp/dk521123/35480801.html
D3.js ～ アニメーション表示する ～
http://blogs.yahoo.co.jp/dk521123/35481724.html
D3.js ～ モーダルダイアログを表示する ～
http://blogs.yahoo.co.jp/dk521123/35501040.html
D3.js ～ グラフをクリアにする ～
http://blogs.yahoo.co.jp/dk521123/35504882.html
D3.js / C3.js で 改行入れのテキストを表示するには...
http://blogs.yahoo.co.jp/dk521123/35523904.html
D3.js ～ 配列操作 ～
http://blogs.yahoo.co.jp/dk521123/35536895.html
D3.js ～ SVG / D3.js のグラフを PNG 画像で 保存することを考える ～
http://blogs.yahoo.co.jp/dk521123/35546102.html
グラフ各種
D3.js ～ 円グラフを作成する ～http://blogs.yahoo.co.jp/dk521123/35435961.html
D3.js ～ 折れ線グラフを作成する ～
http://blogs.yahoo.co.jp/dk521123/35430148.html
D3.js ～ 縦棒グラフを作成する ～
http://blogs.yahoo.co.jp/dk521123/35435053.html
D3.js ～ 積み上げ縦棒グラフを作成する ～
http://blogs.yahoo.co.jp/dk521123/35450750.html
D3.js ～ 複合グラフ / 折れ線・縦棒グラフを作成する ～
http://blogs.yahoo.co.jp/dk521123/35463598.html
地図
D3.js / TopoJSON / DataMaps [1] ～ 世界地図を作成する ～http://blogs.yahoo.co.jp/dk521123/35443473.html
D3.js / TopoJSON / DataMaps [2] ～ DataMaps Plugin編 ～
http://blogs.yahoo.co.jp/dk521123/35446731.html
D3.js / TopoJSON / DataMaps [3] ～ DataMaps Custom Plugin編 [1] ～
http://blogs.yahoo.co.jp/dk521123/35450674.html
D3.js / TopoJSON / DataMaps [3] ～ DataMaps Custom Plugin編 [2] ～
http://blogs.yahoo.co.jp/dk521123/35549099.html
D3.js / TopoJSON / DataMaps [4] ～ DataMaps あれこれ ～
http://blogs.yahoo.co.jp/dk521123/35500909.html
D3.js / TopoJSON / DataMaps [5] ～ DataMaps 内で 改行入れのテキストを表示するには... ～
http://blogs.yahoo.co.jp/dk521123/35524106.html
その他
C3.js ～ 入門編 ～http://blogs.yahoo.co.jp/dk521123/35509265.html
ASP.NET MVC でグラフを描画することを考える
http://blogs.yahoo.co.jp/dk521123/35406503.html