mtaptich/README.md

## README.md

      
    Raw
  

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

  
## index.html
<!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 translateAlong(path) {
  var l = path.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      var p = path.getPointAtLength(t * l);
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
}

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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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 translateAlong(path) {
	var l = path.getTotalLength();
	return function(d, i, a) {
	return function(t) {
	var p = path.getPointAtLength(t * l);
	return "translate(" + p.x + "," + p.y + ")";
	};
	};
	}

	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>