Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
color cycle progress
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);
}
<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