If...Else

The second of a series of data visualizations on basic coding concepts. The if...else statement seeks to bin by colors!

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  width: 1024px;
  margin-top: 0;
  margin: auto;
  font-family: "Lato", "PT Serif", serif;
  color: #222222;
  padding: 0;
  font-weight: 300;
  line-height: 33px;
  -webkit-font-smoothing: antialiased;
}

.guide {
	fill: none;
	stroke: #7f8c8d;
	stroke-dasharray: 2px 1px;
}

.c0{
	fill: red;
}

.c1{
	fill: blue;
}

.c2{
	fill: green;
}

.c3{
	fill: yellow;
}

.c4{
	fill: pink;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
	height = 500,
	left= 300,
	speed = 500;

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

var rscale = d3.scale.sqrt()
	.range([5, 25])
	.domain([1, 10])

var state_a = svg.append("path")
    .attr("d", "M"+left+",38.7v76")
    .attr('class', 'guide');

var state_b = svg.append('path')
	.attr('d',"M"+left+",119v120.3")
	.attr('class', 'guide');

var state_c = svg.append('path')
	.attr('d',"M"+left+",241.3v200")
	.attr('class', 'guide');

function randomstate(){

var state = Math.floor(Math.random()*5);
	var c = svg.append('circle')
	    .attr('r', (10*Math.random()) + 2)
	    .attr('class', 'c'+state)

return {'c': c, 's': state}
}

function flank(){
	rght = Math.random() * ( width - left - 200)
	d3.select(this)
		.transition()
		.duration(speed*10)
		.attr("transform", function() {
			var t = d3.select(this).attr('transform').split(',');
			return "translate("+ (left + rght + 200)+","+t[1];})
		.attr('r', 1)
		.style('fill-opacity', '0.3')
		.ease('sin')
		.transition()
		.duration(500)
		.remove()
}

function sort(){
	d = randomstate()

if (d.s == 0){
		d.c.transition()
			.duration(speed)
			.ease('bounce')
			.attrTween("transform", translateAlong(state_a.node()))
			.each("end", flank);

} else if (d.s == 1){
		d.c.transition()
			.duration(speed)
			.attrTween("transform", translateAlong(state_a.node()))
			.transition()
			.duration(speed)
			.ease('bounce')
			.attrTween("transform", translateAlong(state_b.node()))
			.each("end", flank);

} else {
		d.c.transition()
			.duration(speed)
			.attrTween("transform", translateAlong(state_a.node()))
			.transition()
			.duration(speed)
			.attrTween("transform", translateAlong(state_b.node()))
			.transition()
			.duration(speed)
			.ease('bounce')
			.attrTween("transform", translateAlong(state_c.node()))
			.each("end", flank);
	}
}

var red = svg.append('text')
	.attr('class', 'status')
	.attr('x',150)
	.attr('y',120)
	.style('text-anchor', 'middle')
	.style('font-size', '24')
	.text("if (color == 'RED')")

var blue = svg.append('text')
	.attr('class', 'status')
	.attr('x',150)
	.attr('y',242)
	.style('text-anchor', 'middle')
	.style('font-size', '24')
	.text("else if (color == 'BLUE')")

var green = svg.append('text')
	.attr('class', 'status')
	.attr('x',150)
	.attr('y',445)
	.style('text-anchor', 'middle')
	.style('font-size', '24')
	.text("else")

setInterval(sort, 200);

</script>

https://d3js.org/d3.v3.min.js