DanielJWood · November 27, 2013 19:56
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
 <script src="http://d3js.org/d3.v3.min.js"></script>
        <style type="text/css">
 div.bar {
    display: inline-block;
    width: 100px;
    height: 75px;   /* We'll override this later */
    margin-right: 4px;
    background-color: teal

 }

        </style>
    </head>
    <body>
        <script type="text/javascript">
 var predata = [];						//Initialize empty array
 var threshold = 190;
 var j = 0;                      

 for (var i = 0; i < threshold; i++) {           //Loop 'threshold' number of times

 	// newNumber = Math.random()*30

    if (i < (threshold/2+1)) {
    	var newNumber = i
    } else {
    	var newNumber = (threshold-i)
    }
    predata.push(newNumber);             //Add new number to array
 }


 //Start the function onload.	
 window.onload= start();




 	//create the mechanism to run several times, then stop
 	var timesRun = 0;
 	
 	//tells you where you are in the sequence, how many spaces the bars are ofput by.
 	var j = 0; 

 	function start() {
 		var loop = setInterval(function () {
                loopfunction();
                timesRun += 1;
                j += 1;
 	                if(timesRun === threshold+1){
 	                    clearInterval(loop);
 	                    timesRun = 0;	                    
 	                    j = 0; 						//reset initial beginning sequence number to 0 when it reaches threshold
 	                    start();
 	                }
            }, 10);
 	};

 	

 	//what to do each time.
    function loopfunction() {


 		var dataset = [];  						//Initialize empty array

 		for (var k = 0; k < predata.length; k++) {
 			
 			if (k+j < threshold) {
 				var indexnumber = k+j;
 			} else {
 				var indexnumber = (k+j-threshold);
 			};
 			

 			var newNumber2 = predata[indexnumber]
 			// console.log(indexnumber)
 			// console.log(newNumber2)
 			    // var newNumber2 = Math.round(Math.random() * 30);

 			dataset.push(newNumber2)
 		};

 		d3.select("body").selectAll("div").data([]).exit().remove();

 		d3.select("body").selectAll("div")
 		    .data(dataset)
 		    .enter()
 		    .append("div")
 		    .attr("class", "bar")
 		    .style("height", function(d) {
 			    var barHeight = d;  //Scale up by factor of 5
 			    return barHeight + "px";
 			})
 			.style('background-color', function(d){
 				// s = Math.random()
 				// if (s < 0.2) {   //Threshold of 15
 				// 	return "#C8E0AB";
 				// } else if (s < .4) {
 				// 	return "#DFFFB8";
 				// } else if (s < 0.6) {
 				// 	return "#F0FFDE"
 				// } else if (s < 0.8) {
 				// 	return "#A1B58A"
 				// } else {
 				// 	return "#7D8C6B"
 				// }
 			});
 }

        </script>
    </body>
 </html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3 Test</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">
	div.bar {
	display: inline-block;
	width: 100px;
	height: 75px; /* We'll override this later */
	margin-right: 4px;
	background-color: teal

	}

	</style>
	</head>
	<body>
	<script type="text/javascript">
	var predata = []; //Initialize empty array
	var threshold = 190;
	var j = 0;

	for (var i = 0; i < threshold; i++) { //Loop 'threshold' number of times

	// newNumber = Math.random()*30

	if (i < (threshold/2+1)) {
	var newNumber = i
	} else {
	var newNumber = (threshold-i)
	}
	predata.push(newNumber); //Add new number to array
	}


	//Start the function onload.
	window.onload= start();




	//create the mechanism to run several times, then stop
	var timesRun = 0;

	//tells you where you are in the sequence, how many spaces the bars are ofput by.
	var j = 0;

	function start() {
	var loop = setInterval(function () {
	loopfunction();
	timesRun += 1;
	j += 1;
	if(timesRun === threshold+1){
	clearInterval(loop);
	timesRun = 0;
	j = 0; //reset initial beginning sequence number to 0 when it reaches threshold
	start();
	}
	}, 10);
	};



	//what to do each time.
	function loopfunction() {


	var dataset = []; //Initialize empty array

	for (var k = 0; k < predata.length; k++) {

	if (k+j < threshold) {
	var indexnumber = k+j;
	} else {
	var indexnumber = (k+j-threshold);
	};


	var newNumber2 = predata[indexnumber]
	// console.log(indexnumber)
	// console.log(newNumber2)
	// var newNumber2 = Math.round(Math.random() * 30);

	dataset.push(newNumber2)
	};

	d3.select("body").selectAll("div").data([]).exit().remove();

	d3.select("body").selectAll("div")
	.data(dataset)
	.enter()
	.append("div")
	.attr("class", "bar")
	.style("height", function(d) {
	var barHeight = d; //Scale up by factor of 5
	return barHeight + "px";
	})
	.style('background-color', function(d){
	// s = Math.random()
	// if (s < 0.2) { //Threshold of 15
	// return "#C8E0AB";
	// } else if (s < .4) {
	// return "#DFFFB8";
	// } else if (s < 0.6) {
	// return "#F0FFDE"
	// } else if (s < 0.8) {
	// return "#A1B58A"
	// } else {
	// return "#7D8C6B"
	// }
	});
	}

	</script>
	</body>
	</html>