nafu/index.html

## index.html
<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
  <meta charset="UTF-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>
	<title>D3Circle</title>
</head>
<body>
  <div id="D3line"></div>
  <script type="text/javascript">
    var graph = d3.select("#D3line")
    .append("svg:svg")
    .attr("width", 500)
    .attr("height", 200);

    var dataset = [],
      i = 0;

    for(i=0; i<5; i++){
      dataset.push(Math.round(Math.random()*100));
    }

    var myCircle = graph.append("svg:circle")
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", 40)
    .style("fill", "white")
    .style("stroke", "red")
    .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
    .on("mouseout", function(){d3.select(this).style("fill", "white");})
    .on("mousedown", animate);

    graph.selectAll("circle")
    .data(dataset)
    .enter().append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
    .on("mouseout", function(){d3.select(this).style("fill", "white");})
    .on("mousedown", animate)
    .attr("r", 40)
    .attr("cx", function(d, i){return i*80+50})
    .attr("cy", 50);

    graph.append("svg:circle")
    .style("fill", "white")
    .style("stroke", "blue")
    .attr("cx", 50)
    .attr("cy", 130)
    .attr("r", 0)
    .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
    .on("mouseout", function(){d3.select(this).style("fill", "white");})
    .on("mousedown", animate)
    .transition()
      .duration(1000)
      .attr("r", 40);

    function animate() {
      d3.select(this)
        .transition()
          .delay(0)
          .duration(1000)
          .attr("r", 10)
          .each("end", animateSecondStep);
    };

    function animateSecondStep(){
      d3.select(this)
        .transition()
          .duration(1000)
          .attr("r", 40)
    }

  </script>
</body>
</html>
	<!DOCTYPE HTML>
	<html lang="ja-JP">
	<head>
	<meta charset="UTF-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<title>D3Circle</title>
	</head>
	<body>
	<div id="D3line"></div>
	<script type="text/javascript">
	var graph = d3.select("#D3line")
	.append("svg:svg")
	.attr("width", 500)
	.attr("height", 200);

	var dataset = [],
	i = 0;

	for(i=0; i<5; i++){
	dataset.push(Math.round(Math.random()*100));
	}

	var myCircle = graph.append("svg:circle")
	.attr("cx", 50)
	.attr("cy", 50)
	.attr("r", 40)
	.style("fill", "white")
	.style("stroke", "red")
	.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
	.on("mouseout", function(){d3.select(this).style("fill", "white");})
	.on("mousedown", animate);

	graph.selectAll("circle")
	.data(dataset)
	.enter().append("circle")
	.style("stroke", "gray")
	.style("fill", "white")
	.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
	.on("mouseout", function(){d3.select(this).style("fill", "white");})
	.on("mousedown", animate)
	.attr("r", 40)
	.attr("cx", function(d, i){return i*80+50})
	.attr("cy", 50);

	graph.append("svg:circle")
	.style("fill", "white")
	.style("stroke", "blue")
	.attr("cx", 50)
	.attr("cy", 130)
	.attr("r", 0)
	.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
	.on("mouseout", function(){d3.select(this).style("fill", "white");})
	.on("mousedown", animate)
	.transition()
	.duration(1000)
	.attr("r", 40);

	function animate() {
	d3.select(this)
	.transition()
	.delay(0)
	.duration(1000)
	.attr("r", 10)
	.each("end", animateSecondStep);
	};

	function animateSecondStep(){
	d3.select(this)
	.transition()
	.duration(1000)
	.attr("r", 40)
	}

	</script>
	</body>
	</html>