bubble progress

bubble-progress.markdown

bubble progress

An animation that reminds me of a progress bar display.

A Pen by Bryan on CodePen.

License.

progress.markdown

progress

An animation that reminds me of a progress bar display.

A Pen by Bryan on CodePen.

License.

script.js

var plotDimensionWidth = 400;
var plotDimensionHeight = 200;
var delay = 175;
var duration = 600;
var smallRadius = 10;

var svg = d3.select("body").append("svg")
    .attr("width",  plotDimensionWidth)
    .attr("height", plotDimensionHeight);

 var graphData = [
          {x:   50, y: 100, color: '#00f'},
          {x:  100, y: 100, color: '#000'},
          {x:  150, y: 100, color: '#f00'},
          {x:  200, y: 100, color: '#000'},
          {x:  250, y: 100, color: '#ff0'},
          {x:  300, y: 100, color: '#000'},
          {x:  350, y: 100, color: '#0f0'}
        ];

function render(data){
    var circles = svg.selectAll("circle").data(data);
    circles.enter().append("circle")
        .attr("r", smallRadius)
        .attr("stroke", function (d){ return d.color; })
        .attr("fill", function (d){ return d.color; })
        .attr("cx", function (d){ return d.x; })
        .attr("cy", function (d){ return d.y; });

    circles.exit().remove();
}

function bubble(data) {
 
  d3.select("svg")
            .selectAll("circle")
   
            .transition()
            .delay(function(d, i) { return delay * i; })
            .duration( duration )
            .attr("r", function(d,i) { return smallRadius + (i+1) * 2;} )        
            .transition()
            .duration( duration )
            .attr("r", smallRadius );
}

render(graphData);

for(repeat = 0; repeat < 3; repeat++) {
  setTimeout(function(){bubble(graphData)},repeat * 2600);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

style.css

body {
				background-color: #4f4f4f;
			}
svg {
  background-color: white;
}