rsk2327/index.html

## index.html
<html>
<head>
<title>Bar Chart</title>
<script type="text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style  type = "text/css">
.active {
  stroke: #000;
  stroke-width: 2px;
}

.links line {
  stroke: #aaa;
}

.nodes circle {
  pointer-events: all;
  stroke: none;
  stroke-width: 40px;
}

</style>

</head>
<body>
<script>


	var width = 600,
	height  = 600,
  speed=2,
  circleSpacing=500,
  strokeWidth=5,
  strokeOpacity=0.6;

	var svg = d3.select("body").append("svg").attr("width",width).attr("height",height).style("background","white");

  var circleCount=10;

  var posData = [[],[],[],[]],
  startPos=[[0,0],[width,0],[0,height],[width,height]];


  var circles = [svg.append("g"),svg.append("g"),svg.append("g"),svg.append("g")];
  var currentTime = new Date().getTime();
  for(var i =0;i<4;i++)
  {
    var circ = d3.map().set("r",0).set("opacity",0.2).set("startTime",currentTime);
    posData[i].push(circ);

    circles[i].selectAll().data(posData[i]).enter().append("circle")
    .attr("cx",startPos[i][0]).attr("cy",startPos[i][1]).attr("r",0)
    .attr("stroke","black").attr("fill-opacity",0.0).attr("stroke-width",strokeWidth+"px").attr("stroke-opacity",strokeOpacity);
  }


  d3.timer(tickFn);
  var timer=0,circleProduction=1;

  function tickFn(_elapsed)
  {

    timer = _elapsed;

    if(posData[0].length<5)
    {
      var lastCircle = posData[0][posData[0].length-1];
      currentTime = new Date().getTime();

      if(currentTime - lastCircle.get("startTime") > circleSpacing)
      {

        for(var i =0;i<4;i++)
        {
          circ = d3.map().set("r",0).set("opacity",1.0).set("startTime",currentTime);

          posData[i].push(circ);

          circles[i].selectAll("circle").data(posData[i])
          .enter().append("circle").attr("cx",startPos[i][0]).attr("cy",startPos[i][1]).attr("r",0)
    .attr("stroke","black").attr("fill-opacity",0.0).attr("stroke-width",strokeWidth+"px").attr("stroke-opacity",strokeOpacity);
        }

      }


    }

    for(var i=0;i<4;i++)
    {
      for(var j =0;j<posData[i].length;j++)
      {
        circ = posData[i][j];
        var r = circ.get("r"),
        opacity = circ.get("opacity");

        r += speed;
        opacity -= 0.01;

        if( r > (Math.sqrt( Math.pow(width,2) + Math.pow(height,2)) ) )
        {
          circleProduction=0;
          r=1;
          opacity=1.0;
        }
        posData[i][j].set("r",r).set("opacity",opacity);
      }
    }

    for(i=0;i<4;i++)
    {
      circles[i].selectAll("circle").attr("r",function(d){ return d.get("r");});
      //.attr("opacity",function(d){ return d.get("opacity");})
    }


  }


</script>


</body>
</html>
	<html>
	<head>
	<title>Bar Chart</title>
	<script type="text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
	<style type = "text/css">
	.active {
	stroke: #000;
	stroke-width: 2px;
	}

	.links line {
	stroke: #aaa;
	}

	.nodes circle {
	pointer-events: all;
	stroke: none;
	stroke-width: 40px;
	}

	</style>

	</head>
	<body>
	<script>


	var width = 600,
	height = 600,
	speed=2,
	circleSpacing=500,
	strokeWidth=5,
	strokeOpacity=0.6;

	var svg = d3.select("body").append("svg").attr("width",width).attr("height",height).style("background","white");

	var circleCount=10;

	var posData = [[],[],[],[]],
	startPos=[[0,0],[width,0],[0,height],[width,height]];


	var circles = [svg.append("g"),svg.append("g"),svg.append("g"),svg.append("g")];
	var currentTime = new Date().getTime();
	for(var i =0;i<4;i++)
	{
	var circ = d3.map().set("r",0).set("opacity",0.2).set("startTime",currentTime);
	posData[i].push(circ);

	circles[i].selectAll().data(posData[i]).enter().append("circle")
	.attr("cx",startPos[i][0]).attr("cy",startPos[i][1]).attr("r",0)
	.attr("stroke","black").attr("fill-opacity",0.0).attr("stroke-width",strokeWidth+"px").attr("stroke-opacity",strokeOpacity);
	}


	d3.timer(tickFn);
	var timer=0,circleProduction=1;

	function tickFn(_elapsed)
	{

	timer = _elapsed;

	if(posData[0].length<5)
	{
	var lastCircle = posData[0][posData[0].length-1];
	currentTime = new Date().getTime();

	if(currentTime - lastCircle.get("startTime") > circleSpacing)
	{

	for(var i =0;i<4;i++)
	{
	circ = d3.map().set("r",0).set("opacity",1.0).set("startTime",currentTime);

	posData[i].push(circ);

	circles[i].selectAll("circle").data(posData[i])
	.enter().append("circle").attr("cx",startPos[i][0]).attr("cy",startPos[i][1]).attr("r",0)
	.attr("stroke","black").attr("fill-opacity",0.0).attr("stroke-width",strokeWidth+"px").attr("stroke-opacity",strokeOpacity);
	}

	}



	}

	for(var i=0;i<4;i++)
	{
	for(var j =0;j<posData[i].length;j++)
	{
	circ = posData[i][j];
	var r = circ.get("r"),
	opacity = circ.get("opacity");

	r += speed;
	opacity -= 0.01;

	if( r > (Math.sqrt( Math.pow(width,2) + Math.pow(height,2)) ) )
	{
	circleProduction=0;
	r=1;
	opacity=1.0;
	}
	posData[i][j].set("r",r).set("opacity",opacity);
	}
	}

	for(i=0;i<4;i++)
	{
	circles[i].selectAll("circle").attr("r",function(d){ return d.get("r");});
	//.attr("opacity",function(d){ return d.get("opacity");})
	}



	}


	</script>


	</body>
	</html>