color cycle progress
animated color cycle style progress bar
var plotDimensionWidth = 400; | |
var plotDimensionHeight = 200; | |
var delay = 200; | |
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 }, | |
{x: 100, y: 100 }, | |
{x: 150, y: 100 }, | |
{x: 200, y: 100 }, | |
{x: 250, y: 100 }, | |
{x: 300, y: 100 }, | |
{x: 350, y: 100 } | |
]; | |
function render(data){ | |
var circles = svg.selectAll("circle").data(data); | |
circles.enter().append("circle") | |
.attr("r", smallRadius) | |
.attr("stroke", "#000" ) | |
.attr("fill", "#000" ) | |
.attr("cx", function (d){ return d.x; }) | |
.attr("cy", function (d){ return d.y; }); | |
circles.exit().remove(); | |
} | |
function cycle(data) { | |
d3.select("svg") | |
.selectAll("circle") | |
.transition() | |
.delay(function(d, i) { return delay * i; }) | |
.duration( duration ) | |
.attr("fill", "#f00") | |
.transition() | |
.duration( duration ) | |
.attr("fill", "#000" ); | |
} | |
render(graphData); | |
for(repeat = 0; repeat < 3; repeat++) { | |
setTimeout(function(){cycle(graphData)},repeat * 2600); | |
} |