DanielJWood/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>

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