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: 10px;
    height: 75px;   /* We'll override this later */
    margin-right: 4px;
    background-color: teal;
    margin-top: 0px;

}

        </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();
	                }
            }, 50);
	};

var w = 1000;
var h = 500;
var s = 4; //scaler
var barW = 10;
var barPadding = 4;


var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

	//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("rect").data([]).exit().remove();

svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append('rect')
	.attr('width', barW)
	.attr('height', function(d) {
			    var barHeight = d;  //Scale up by factor of 5
			    return barHeight + "px";
			})
	.attr('x', function(d, i) {
	    return i * d/10;
	})
	.attr("y", function(d) {
	    return h - (d*5);  //Height minus data value
	})
	.attr('fill', function (d){
		if (d%2 == 0)
						return "#C8E0AB";
					else
						return "#A1B58A"
				if (d >30)
					return "teal"
				else
					return "pink"
				function isEven(d) {
					if (d%2 == 0)
						return "#C8E0AB";
					else
						return "#A1B58A"
				}
				console.log(even)
				if (even == true) {
					return "#C8E0AB";
				} else {
					return "#A1B58A"
				};

	})


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


}


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