Module 3 - Bar chart

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Adding Tooltips</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			
			body {
				background-color: #ddddff;
			}

svg {
				background-color: white;
			}
			rect {
				fill: #8080ff;
				opacity: 0.1;
			}
			rect.red {
				fill: #ff0000;
				opacity: 1;
			}
			rect.orange {
				fill: orange;
			}

</style>
	</head>
	<body>

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

// I'm half expecting this line gets obscured by the bar chart rendered later.  Which would be true but then I've set an opacity on the bars...
			// And this should be in a scale loop						
			d3.select("svg")
				.append("line")
				.attr("x1",100*uberscaler)
				.attr("y1",0)
				.attr("x2",100*uberscaler)
				.attr("y2",900)
				.attr("stroke-width","1px")
				.attr("stroke","green");
				
			d3.select("svg")
				.append("line")
				.attr("x1",50*uberscaler)
				.attr("y1",0)
				.attr("x2",50*uberscaler)
				.attr("y2",900)
				.attr("stroke-width","1px")
				.attr("stroke","green");

d3.csv("Corey.RTU-3-short.csv", function(data) {

data.sort(function(a, b) {
					return d3.descending(a['64651.Corey Building.RTU-3.Mixed AIr Temp']*1, b['64651.Corey Building.RTU-3.Mixed AIr Temp']*1);

});

var rects = svg.selectAll("rect")
								.data(data)
								.enter()
								.append("rect");

rects.attr("x", 0)
					.attr("y", function(d, i) {
						return Math.floor(i * 0.1);
					})
					.attr("width", function(d) {
						return Math.floor(d['64651.Corey Building.RTU-3.Mixed AIr Temp'] * uberscaler)	;
					})
					.attr("height", 1)
					.attr("class", function(d,i) {
						if (i/100 == Math.floor(i/100)) {
							return "red";
						} else {
							return "";
						}
					})
					.append("title")
					.text(function(d,i) {
						return i + " value is " + d['64651.Corey Building.RTU-3.Mixed AIr Temp'];
					});
				
				// Confidence bands
				// PROBLEM: I want the width of the band to be semi-dependent on the width of the previous value, not purely random,
				// so I need a local var inside of the rects2 loop somehow.
				
				var rects2 = svg.selectAll("rect2")
								.data(data)
								.enter()
								.append("rect");

rects2
					.attr("x",function(d,i) {
						var randwid = Math.random()*100;
						return Math.floor(d['64651.Corey Building.RTU-3.Mixed AIr Temp'] * uberscaler) - randwid;
					})
					.attr("y",function(d,i) {
						return Math.floor(i * 0.1);
					})
					.attr("width",Math.random()*100*2)
					.attr("height",1)
					.attr("class","orange");

});

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js