tobiasburri/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body style="background-color:#1C1C1C">
<div class="svg-container" style="position:absolute; top:10px; left:250px"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var
    container,
    svg,
    width,
    height,
    rectHeight,
    rectWidth,
    steps,
    transitionTimeinMs;

width = 500;
height = 500;
ringSize = 3;
steps = 400;
transitionTimeinMs = 20;

body = d3.select('.svg-container');
svg = body.append('svg')
               .attr('width',width)
               .attr('height', height);

svg.append('rect')
    .attr('width',width)
    .attr('height', height)
    .style('fill','#1C1C1C');


var createCircleCoordinates = function(radius, steps, centerX, centerY){
    var circleCoordinates = {};
    var xValues = [centerX];
    var yValues = [centerY];
    for (var i = 0; i < steps; i++) {
        xValues[i] = (centerX + radius * Math.cos(2 * Math.PI * i / steps));
        yValues[i] = (centerY + radius * Math.sin(2 * Math.PI * i / steps));
    }

    circleCoordinates.x = xValues;
    circleCoordinates.y = yValues;

    return circleCoordinates;
};

var createCircleObjects = function(count) {

    var container = [];
    for (i=0; i<= count; i++) {
        object = {};
        object.position = Math.floor(steps/count) * i;
        container.push(object);
    }

    return container;
};


var drawCircleObjects = function(objects, circleCoordinates) {
    var circleObjects = svg.selectAll('circle')
       .data(objects)
       .enter().append('circle')
       .attr('r',ringSize)
       .attr("cx", function(d) { return circleCoordinates.x[d.position] * 100})
       .attr("cy", function(d) { return circleCoordinates.y[d.position] * 100})
       .style('fill', function(d) { return colorScale(d.position)})
       .attr('transform','translate(45,45)');

    return circleObjects;
};


var changePosition = function(objects) {
    for (var i = 0; i < objects.length; i++) {
        objects[i].position = (objects[i].position + 1 ) % steps;
    }
};


var moveObjects = function(circleObjects) {
    circleObjects.transition().duration(transitionTimeinMs)
        .attr("cx", function(d) { return circleCoordinates.x[d.position] * 100 })
        .attr("cy", function(d) { return circleCoordinates.y[d.position] * 100 })
        .attr('transform','translate(45,45)');
};

var createColorScale = function(domain) {
    var colorScale = d3.scale.linear()
        .domain([
            0,
            1/6*domain,
            2/6*domain,
            3/6*domain,
            4/6*domain,
            5/6*domain,
            domain])
        .range(["red", "orange", "yellow", "green", "blue", "purple", "red"]);
    return colorScale;
};


var circleCoordinates = createCircleCoordinates(2, steps, 2, 2);
var objects = createCircleObjects(steps);
var colorScale = createColorScale(steps);
var circleObjects = drawCircleObjects(objects, circleCoordinates);


window.setInterval(function(){
    changePosition(objects);
    moveObjects(circleObjects);
}, transitionTimeinMs);

</script>


## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body style="background-color:#1C1C1C">
	<div class="svg-container" style="position:absolute; top:10px; left:250px"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var
	container,
	svg,
	width,
	height,
	rectHeight,
	rectWidth,
	steps,
	transitionTimeinMs;

	width = 500;
	height = 500;
	ringSize = 3;
	steps = 400;
	transitionTimeinMs = 20;

	body = d3.select('.svg-container');
	svg = body.append('svg')
	.attr('width',width)
	.attr('height', height);

	svg.append('rect')
	.attr('width',width)
	.attr('height', height)
	.style('fill','#1C1C1C');



	var createCircleCoordinates = function(radius, steps, centerX, centerY){
	var circleCoordinates = {};
	var xValues = [centerX];
	var yValues = [centerY];
	for (var i = 0; i < steps; i++) {
	xValues[i] = (centerX + radius * Math.cos(2 * Math.PI * i / steps));
	yValues[i] = (centerY + radius * Math.sin(2 * Math.PI * i / steps));
	}

	circleCoordinates.x = xValues;
	circleCoordinates.y = yValues;

	return circleCoordinates;
	};

	var createCircleObjects = function(count) {

	var container = [];
	for (i=0; i<= count; i++) {
	object = {};
	object.position = Math.floor(steps/count) * i;
	container.push(object);
	}

	return container;
	};


	var drawCircleObjects = function(objects, circleCoordinates) {
	var circleObjects = svg.selectAll('circle')
	.data(objects)
	.enter().append('circle')
	.attr('r',ringSize)
	.attr("cx", function(d) { return circleCoordinates.x[d.position] * 100})
	.attr("cy", function(d) { return circleCoordinates.y[d.position] * 100})
	.style('fill', function(d) { return colorScale(d.position)})
	.attr('transform','translate(45,45)');

	return circleObjects;
	};


	var changePosition = function(objects) {
	for (var i = 0; i < objects.length; i++) {
	objects[i].position = (objects[i].position + 1 ) % steps;
	}
	};


	var moveObjects = function(circleObjects) {
	circleObjects.transition().duration(transitionTimeinMs)
	.attr("cx", function(d) { return circleCoordinates.x[d.position] * 100 })
	.attr("cy", function(d) { return circleCoordinates.y[d.position] * 100 })
	.attr('transform','translate(45,45)');
	};

	var createColorScale = function(domain) {
	var colorScale = d3.scale.linear()
	.domain([
	0,
	1/6*domain,
	2/6*domain,
	3/6*domain,
	4/6*domain,
	5/6*domain,
	domain])
	.range(["red", "orange", "yellow", "green", "blue", "purple", "red"]);
	return colorScale;
	};



	var circleCoordinates = createCircleCoordinates(2, steps, 2, 2);
	var objects = createCircleObjects(steps);
	var colorScale = createColorScale(steps);
	var circleObjects = drawCircleObjects(objects, circleCoordinates);


	window.setInterval(function(){
	changePosition(objects);
	moveObjects(circleObjects);
	}, transitionTimeinMs);

	</script>