katsumitakano/README.md

## README.md

      
    Raw
  

              README.md
            
          
    ランダムバブルチャート

更新する度に表示が変わるバブルチャート

  
## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>