更新する度に表示が変わるバブルチャート
forked from hunzy's block: ランダムバブルチャート
license: mit |
更新する度に表示が変わるバブルチャート
forked from hunzy's block: ランダムバブルチャート
<!doctype html> | |
<html lang="ja"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>バブルチャート</title> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
</head> | |
<body> | |
<script> | |
// バブルチャート用のデータをランダムに生成 | |
var dataset = []; | |
for(i=0; i<20; i++){ | |
var _x = Math.random() * 100; | |
var _y = Math.random() * 100; | |
var _r = Math.random() * 100; | |
dataset.push({x:_x, y:_y, r:_r}); | |
} | |
// 色の配列(20個) | |
var color = d3.scale.category20(); | |
// svg領域の幅と高さとパディング | |
var w = 960; | |
var h = 500; | |
var p = 50; | |
// svg領域を生成 | |
var svg = d3.select("body").append("svg") | |
.attr({ | |
width: w, | |
height: h | |
}); | |
// x軸のスケール設定 | |
var xScale = d3.scale.linear() | |
.domain([0, d3.max(dataset.map(function(d){ return d.x; }))]) | |
.range([p, w-p]) | |
// y軸のスケール設定 | |
var yScale = d3.scale.linear() | |
.domain([0, d3.max(dataset.map(function(d){ return d.y; }))]) | |
.range([p, h-p]) | |
// 円のスケール設定 | |
var rScale = d3.scale.linear() | |
.domain([0, d3.max(dataset.map(function(d){ return d.r; }))]) | |
.range([0, 100]) // 適当に | |
// 円の描画 | |
svg.selectAll("circle") | |
.data(dataset) | |
.enter() | |
.append("circle") | |
.attr({ | |
cx: function(d){ return xScale(d.x); }, | |
cy: function(d){ return yScale(d.y); }, | |
fill: function(d,i){return color(i);}, | |
r: 0 | |
}) | |
.transition() | |
.duration(1000) | |
.ease("bounce") | |
.attr({ | |
r: function(d){ return rScale(d.r); }, | |
}) | |
</script> | |
</body> | |
</html> |