Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
bubble progress
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);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
body {
background-color: #4f4f4f;
}
svg {
background-color: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment