More Related Content
Similar to D3js入門 - Code for Kobe 可視化勉強会資料 (20)
D3js入門 - Code for Kobe 可視化勉強会資料
- 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と同等の表記が使える
- 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関数の第2引数が読み込んだデータ
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