October 1, 2016 16:22
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="ja">
 <head>
 	<meta charset="UTF-8">
 	<title>バブルチャート</title>
  <style>
    body {
      background: white;
    }
  </style>
  <script src="https://d3js.org/d3.v4.min.js"></script>
 </head>
 <body>
 	<script>
 		// バブルチャート用のデータをランダムに生成
 		var dataset = [];
    var random100 = d3.randomUniform(0, 100);
 		for(i=0; i<20; i++){
 			var _x = random100();
 			var _y = random100();
 			var _r = random100();
 			dataset.push({x:_x, y:_y, r:_r});
 		}
 		// 色の配列（20個）
 		var color = d3.scaleOrdinal(d3.schemeCategory20);
 		// svg領域の幅と高さとパディング
 		var w = 960;
 		var h = 500;
 		var p = 50;
 		// svg領域を生成
 // 		var svg = d3.select("body")
 //     			.append("svg")
 // 					.attr({
 // 						width: w,
 // 						height: h
 // 					});
    var svg = d3.select("body")
    	.append("svg")
      .attr("width", w)
      .attr("height", h)
 //       .append('g')
 //       .attr('transform', 'translate(100,76)');
 		// x軸のスケール設定
 		var xScale = d3.scaleLinear()
 						.domain([0, d3.max(dataset.map(function(d){ return d.x; }))])
 						.range([p, w-p])
 		// y軸のスケール設定
 		var yScale = d3.scaleLinear()
 						.domain([0, d3.max(dataset.map(function(d){ return d.y; }))])
 						.range([p, h-p])
 		// 円のスケール設定
 		var rScale = d3.scaleLinear()
 						.domain([0, d3.max(dataset.map(function(d){ return d.r; }))])
 						.range([0, 100]) // 適当に
 		// 円の描画
    var ball = svg.append("circle")
    	.attr('cx', d => xScale(d.x))
      .attr('r', 25);

    bounce();

    function bounce() {
      ball
        .transition()
        .duration(575)
        .ease(d3.easeQuadIn)
        .attr('cy', 260)
        .transition()
        .duration(575)
        .ease(d3.easeQuadOut)
        .attr('cy', 0)
        .on('end', bounce);
    }
 // 		d3.select("svg")
 // 			.data(dataset)
 // 			.enter()
 // 			.append("circle")
 // 			.attr({
 // 				cx: function(d){ console.log(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>
	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>バブルチャート</title>
	<style>
	body {
	background: white;
	}
	</style>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	</head>
	<body>
	<script>
	// バブルチャート用のデータをランダムに生成
	var dataset = [];
	var random100 = d3.randomUniform(0, 100);
	for(i=0; i<20; i++){
	var _x = random100();
	var _y = random100();
	var _r = random100();
	dataset.push({x:_x, y:_y, r:_r});
	}
	// 色の配列（20個）
	var color = d3.scaleOrdinal(d3.schemeCategory20);
	// svg領域の幅と高さとパディング
	var w = 960;
	var h = 500;
	var p = 50;
	// svg領域を生成
	// var svg = d3.select("body")
	// .append("svg")
	// .attr({
	// width: w,
	// height: h
	// });
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h)
	// .append('g')
	// .attr('transform', 'translate(100,76)');
	// x軸のスケール設定
	var xScale = d3.scaleLinear()
	.domain([0, d3.max(dataset.map(function(d){ return d.x; }))])
	.range([p, w-p])
	// y軸のスケール設定
	var yScale = d3.scaleLinear()
	.domain([0, d3.max(dataset.map(function(d){ return d.y; }))])
	.range([p, h-p])
	// 円のスケール設定
	var rScale = d3.scaleLinear()
	.domain([0, d3.max(dataset.map(function(d){ return d.r; }))])
	.range([0, 100]) // 適当に
	// 円の描画
	var ball = svg.append("circle")
	.attr('cx', d => xScale(d.x))
	.attr('r', 25);

	bounce();

	function bounce() {
	ball
	.transition()
	.duration(575)
	.ease(d3.easeQuadIn)
	.attr('cy', 260)
	.transition()
	.duration(575)
	.ease(d3.easeQuadOut)
	.attr('cy', 0)
	.on('end', bounce);
	}
	// d3.select("svg")
	// .data(dataset)
	// .enter()
	// .append("circle")
	// .attr({
	// cx: function(d){ console.log(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>