(function() {
var circlesInSVG, circleSelectionWithData,
newCircleSelectionWithData, circlesInNewCircleSelectionWithData,
colors, data, div, height, r, svg, width;
width = 600;
height = 600;
r = 30;
colors = ["green", "red", "orange", "blue", "yellow", "cyan",
"grey", "magenta", "purple", "brown", "black"];
// 可視化の元となるデータの生成
data = d3.range(0, 10).map(function(d) {
return {
cx: 0 | Math.random() * width,
cy: 0 | Math.random() * height,
r: 0 | (Math.random() * r + r)
};
});
// DIV#visualization Elementを取得...(1)
div = d3.select('div#visualization');
// SVG Elementの追加...(2)
svg = div.append('svg');
// SVG Elementの属性のセット...(3)
svg.attr('width', width).attr('height', height);
// svg要素の中のすべてのcircle Elementの取得(空の配列)...(4)
circlesInSVG = svg.selectAll('circle');
// データと関連付けられたcircle selection...(5)
circleSelectionWithData = circlesInSVG.data(data);
// データ...(6)
newCircleSelectionWithData = circleSelectionWithData.enter();
// selectionにcircle Elementを追加...(7)
circlesInNewCircleSelectionWithData =
newCircleSelectionWithData.append('circle');
// circle Elementの属性を指定... (8)
circlesInNewCircleSelectionWithData
.attr('r', 20) // 固定の値を属性値にセット... (8a)
.attr('cx', function(d) { // 対応付けられたデータの値を元に属性値をセット... (8b)
return d.cx;
})
.attr('cy', function(d) {
return d.cy;
})
.attr('fill', function(d, idx) { // インデックスを元にして属性値をセット... (8c)
return colors[idx % colors.length];
})
.style('opacity', 0.6); // スタイルをセット... (8d)
}).call(this);