D3js入門 - Code for Kobe 可視化勉強会資料
1 like1,170 views
D3jsの入口を、バーチャートのスクリプトを読み解きながら解説したものです。とりあえず、select, data, scaleを理解すればグラフは作れる！ Code for Kobe 可視化勉強会（2014/12/28）の資料です。
![実例を見てみる！ : script部分
Ref. http://bl.ocks.org/mbostock/3885304
【スクリプト部分】
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
!
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
!
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
!
var y = d3.scale.linear()
.range([height, 0]);
!
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
!
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "%");
!
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top +
")");
!
d3.tsv("data.tsv", type, function(error, data) {
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
!
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
!
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
!
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); });
!
});
!
function type(d) {
d.frequency = +d.frequency;
return d;
}
</script>](https://image.slidesharecdn.com/xj0259d3js-141229194352-conversion-gate01/85/D3js-Code-for-Kobe-5-320.jpg)
![select と append
!
!
!
!
!
!
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," +
margin.top + ")");
!
d3.tsv("data.tsv", type, function(error, data) {
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return
d.frequency; })]);
!
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
!
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
!
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height -
y(d.frequency); });
!
});セレクション（svg下にあ
るすべての.barクラス）
に、dataを対応づける
select:（最初の）DOM要素を選択
selectAll: すべてのDOM要素を選択
append: DOM要素を追加
※引数にはCSSと同等の表記が使える](https://image.slidesharecdn.com/xj0259d3js-141229194352-conversion-gate01/85/D3js-Code-for-Kobe-8-320.jpg)
![d3.select()、d3.selectAll()について
d3.select() d3.selectAll()は、DOM要素を参照するメソッド。戻り値は指定した要素（のセット）。
参照（引数）の種類としては、
・タグ（ div など）
・ID（ #foo など）
・アトリビュート（ [color=red] など）
・関係（ parent child など）
がある。
また、複数の組み合わせ、
・AND（ .this.that = thisクラスの中のthatクラス）
・OR（ .this, .that thisクラスまたはthatクラス）
も可能。
d3.select()は条件にマッチした最初の要素のみが入った配列が返る。HTMLノードを取り出したいとき
は、d3.select(セレクションの記述).node()とする。
条件にマッチしたすべての要素（の配列）を得るには、d3.selectAll()を使う。](https://image.slidesharecdn.com/xj0259d3js-141229194352-conversion-gate01/85/D3js-Code-for-Kobe-9-320.jpg)
![dataのバインド
!
d3.tsv("data.tsv", type, function(error, data) {
!
<途中省略>
!
svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height -
y(d.frequency); });
});
!
function type(d) {
d.frequency = +d.frequency;
return d;
}
セレクション（svg下にあ
るすべての.barクラス）
に、dataを対応づける
（バインド）
d3.csv(url [,accessor], callback関数）
d3.tsv(urll [,accessor], callback関数）
※urlからcsv/tsvファイルを読み終わったら、
callback関数を実行する
callback関数の第２引数が読み込んだデータ
enter()
セレクションのうち、ま
だdataが対応していない
ものすべて](https://image.slidesharecdn.com/xj0259d3js-141229194352-conversion-gate01/85/D3js-Code-for-Kobe-10-320.jpg)
![scaleとaxis
!
!
!
!
!
!
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
!
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
!
var y = d3.scale.linear()
.range([height, 0]);
!
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
!
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, %");
!
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top +
margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," +
margin.top + ")");
!
d3.tsv("data.tsv", type, function(error, data) {
x.domain(data.map(function(d) {
return d.letter;
}));
y.domain([0, d3.max(data,
function(d) {
return d.frequency;
})]);
!
Xスケール定義
ordinal 順序尺度
domainの設定
Yスケール定義
linear 線形
X軸
先に定義したXスケールを設定
Y軸
先に定義したYスケールを設定
.orient() 目盛りの方向と位置
.ticks()：目盛りの数と単位
scale: 元データから画面表示への「変換関数」
.domain() データ範囲
.range() 描画範囲（ピクセル座標）
axis: 軸の「描画関数」 scaleが入力
scaleの種類
ordinal 順序尺度（非数）
linear 線形
sqrt 平方根
pow 指数
log 対数
map(function(d)….
!
データのletter列の各
データを要素とする配列
を返す](https://image.slidesharecdn.com/xj0259d3js-141229194352-conversion-gate01/85/D3js-Code-for-Kobe-12-320.jpg)
![rangePointsとrangeBands/rangeRoundBandsの違い
var test = d3.scale.ordinal()
.domain(["一郎", "次郎", "三郎", "四朗", "五郎", "六郎"])
.rangePoints([min, max], outerPadding);
!
test("三郎") // 200を返す
!
!
!
!
var test = d3.scale.ordinal()
.domain(["一郎", "次郎", "三郎", "四朗", "五郎", "六郎"])
.rangeBands([min, max], padding, outerPadding);
!
さらに、rangeRoundBandsは、
レンジ幅、バンド幅、オフセット値が整数になるよう調整する
!
!
!
rangeBandsとrangeRoundBandsの違い：
https://gist.github.com/aubergene/5214125
.rangePointsは、両端からouterPaddingを除いて、n-1個の領域に分
割。
両端に pointが来る。
.rangeBandsは、outerPaddingを除いて、n個の領域に分割。
さらに個々の領域からpaddingを除いたものが、rangeBand](https://image.slidesharecdn.com/xj0259d3js-141229194352-conversion-gate01/85/D3js-Code-for-Kobe-14-320.jpg)
D3js入門 - Code for Kobe 可視化勉強会資料
- 3. 実例を見てみる！ : script Ref. http://bl.ocks.org/mbostock/3885304
- 4. 実例を見てみる！ : html/css部分 Ref. http://bl.ocks.org/mbostock/3885304 【html/css部分】 ! <!DOCTYPE html> <meta charset="utf-8"> <style> ! .bar { fill: steelblue; } ! .bar:hover { fill: brown; } ! .axis { font: 10px sans-serif; } ! .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } ! .x.axis path { display: none; } ! </style> ! …次頁へ続く
- 5. 実例を見てみる！ : script部分 Ref. http://bl.ocks.org/mbostock/3885304 【スクリプト部分】 <script src="http://d3js.org/d3.v3.min.js"></script> <script> ! var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; ! var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); ! var y = d3.scale.linear() .range([height, 0]); ! var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); ! var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(10, "%"); ! var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); ! d3.tsv("data.tsv", type, function(error, data) { x.domain(data.map(function(d) { return d.letter; })); y.domain([0, d3.max(data, function(d) { return d.frequency; })]); ! svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); ! svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Frequency"); ! svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.letter); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.frequency); }) .attr("height", function(d) { return height - y(d.frequency); }); ! }); ! function type(d) { d.frequency = +d.frequency; return d; } </script>
- 8. select と append ! ! ! ! ! ! var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); ! d3.tsv("data.tsv", type, function(error, data) { x.domain(data.map(function(d) { return d.letter; })); y.domain([0, d3.max(data, function(d) { return d.frequency; })]); ! svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); ! svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Frequency"); ! svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.letter); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.frequency); }) .attr("height", function(d) { return height - y(d.frequency); }); ! });セレクション（svg下にあ るすべての.barクラス） に、dataを対応づける select:（最初の）DOM要素を選択 selectAll: すべてのDOM要素を選択 append: DOM要素を追加 ※引数にはCSSと同等の表記が使える
- 9. d3.select()、d3.selectAll()について d3.select() d3.selectAll()は、DOM要素を参照するメソッド。戻り値は指定した要素（のセット）。 参照（引数）の種類としては、 ・タグ（ div など） ・ID（ #foo など） ・アトリビュート（ [color=red] など） ・関係（ parent child など） がある。 また、複数の組み合わせ、 ・AND（ .this.that = thisクラスの中のthatクラス） ・OR（ .this, .that thisクラスまたはthatクラス） も可能。 d3.select()は条件にマッチした最初の要素のみが入った配列が返る。HTMLノードを取り出したいとき は、d3.select(セレクションの記述).node()とする。 条件にマッチしたすべての要素（の配列）を得るには、d3.selectAll()を使う。
- 10. dataのバインド ! d3.tsv("data.tsv", type, function(error, data) { ! <途中省略> ! svg.selectAll(".bar") .data(data) .enter() .append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.letter); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.frequency); }) .attr("height", function(d) { return height - y(d.frequency); }); }); ! function type(d) { d.frequency = +d.frequency; return d; } セレクション（svg下にあ るすべての.barクラス） に、dataを対応づける （バインド） d3.csv(url [,accessor], callback関数） d3.tsv(urll [,accessor], callback関数） ※urlからcsv/tsvファイルを読み終わったら、 callback関数を実行する callback関数の第２引数が読み込んだデータ enter() セレクションのうち、ま だdataが対応していない ものすべて
- 11. enter と exit DOM Data 対応 exit データが対応づけられていないDOM要素のサブセット enter DOM要素が対応づけられていないデータのサブセット
- 12. scaleとaxis ! ! ! ! ! ! var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; ! var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); ! var y = d3.scale.linear() .range([height, 0]); ! var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); ! var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(10, %"); ! var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); ! d3.tsv("data.tsv", type, function(error, data) { x.domain(data.map(function(d) { return d.letter; })); y.domain([0, d3.max(data, function(d) { return d.frequency; })]); ! Xスケール定義 ordinal 順序尺度 domainの設定 Yスケール定義 linear 線形 X軸 先に定義したXスケールを設定 Y軸 先に定義したYスケールを設定 .orient() 目盛りの方向と位置 .ticks()：目盛りの数と単位 scale: 元データから画面表示への「変換関数」 .domain() データ範囲 .range() 描画範囲（ピクセル座標） axis: 軸の「描画関数」 scaleが入力 scaleの種類 ordinal 順序尺度（非数） linear 線形 sqrt 平方根 pow 指数 log 対数 map(function(d)…. ! データのletter列の各 データを要素とする配列 を返す
- 13. scaleとaxis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); ! svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Frequency"); ! svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.letter); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.frequency); }) .attr("height", function(d) { return height - y(d.frequency); }); ! ! X軸を描画 rectの幅を rangeBand()：バ ンド幅、に設定 x(d.letter)で、d.letterに対応す るX座標を得る X軸 先に定義したXスケールを設定 rectの高さを height-y(d.frequency) に設定 Y軸を描画 y(d.frequency)で、d.frequencyに対す るY座標を得る
- 14. rangePointsとrangeBands/rangeRoundBandsの違い var test = d3.scale.ordinal() .domain(["一郎", "次郎", "三郎", "四朗", "五郎", "六郎"]) .rangePoints([min, max], outerPadding); ! test("三郎") // 200を返す ! ! ! ! var test = d3.scale.ordinal() .domain(["一郎", "次郎", "三郎", "四朗", "五郎", "六郎"]) .rangeBands([min, max], padding, outerPadding); ! さらに、rangeRoundBandsは、 レンジ幅、バンド幅、オフセット値が整数になるよう調整する ! ! ! rangeBandsとrangeRoundBandsの違い： https://gist.github.com/aubergene/5214125 .rangePointsは、両端からouterPaddingを除いて、n-1個の領域に分 割。 両端に pointが来る。 .rangeBandsは、outerPaddingを除いて、n個の領域に分割。 さらに個々の領域からpaddingを除いたものが、rangeBand
- 15. D3.jsの参考用リソース D3.js ３つの小円 http://ja.d3js.node.ws/document/tutorial/ circle.html ! D3.js Example https://github.com/mbostock/d3/wiki/Gallery ! D3.js入門 スコット・マレイ http://ja.d3js.info/alignedleft/tutorials/d3/ ! Over 2000 D3.js example http://techslides.com/over-2000-d3-js- examples-and-demos ! Over 1000 D3.js example http://techslides.com/over-1000-d3-js- examples-and-demos
- 19. c3.js http://c3js.org/ チャート・ライブラリ。Line, Timeseries, Spline, Bar, Scatter, Pie, Area, Donutなど基本的なものはひと通り ある。D3.jsをラップすることで、より簡単にグラフを作成できる。