index.html

## 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>