frc-miner-graph.html

<script src="http://d3js.org/d3.v3.js"></script>
<div class="well" id="graphzor">
	<form>
		<div class="btn-group" data-toggle="buttons-checkbox" style="margin-left: 50px;">
			<button type="button" id="auton" class="btn btn-primary active">Autonomous</button>
			<button type="button" id="teleop" class="btn btn-danger active">Teleoperated</button>
			<button type="button" id="climb" class="btn btn-warning active">Climb (End Game)</button>
		</div>
	</form>
	<script>
	var visibleCategories = {'auton': true, 'teleop': true, 'climb': true},
		datazor = {{ datazor|safe }};
		sort();

		var n = 3, // number of layers
		m = datazor.length, // number of samples per layer
		stack = d3.layout.stack(),
		layers = getLayers(),
		yStackMax = getYStack(),

		h = (40 * m) + 20,
		w = $('#graphzor').width(),

		chart = d3.select("#graphzor").append("svg")
			.attr("class", "chart")
			.attr("width", w)
			.attr("height", h)
			.append("g")
			.attr("transform", "translate(80,15)"),
		
		x = d3.scale.linear()
			.domain([0, yStackMax])
			.range([0, w-82]),

		y = d3.scale.ordinal()
			.domain(d3.range(m))
			.rangeRoundBands([0, h], .08),

		z = d3.scale.ordinal().range([d3.rgb(9,107,200), d3.rgb(200,58,52), d3.rgb(253,136,0), d3.rgb(27,136,0)]),

		layer = chart.selectAll(".layer")
			.data(layers)
			.enter().append("g")
			.attr("class", "layer")
			.style("fill", function(d, i) { return z(i); }),

		teamText = chart.selectAll("text")
			.data(datazor)
			.enter().append("text")
			.attr("x", 0)
			.attr("y", function(d, i) { 
				return y(i) + y.rangeBand() / 2; 
			})
			.attr("dx", -5)
			.attr("dy", ".35em")
			.attr("text-anchor", "end")
			.text( function(d) { return  d.team + " - "; }),
		
		markers = chart.selectAll("line")
			.data(x.ticks(10))
			.enter().append("line")
			.attr("x1", x)
			.attr("x2", x)
			.attr("y1", 0)
			.attr("y2", h)
			.style("stroke", "#aaa"),

		xAxis = chart.selectAll(".rule")
			.data(x.ticks(10))
			.enter().append("text")
			.attr("x", x)
			.attr("y", 0)
			.attr("dy", -3)
			.attr("text-anchor", "middle")
			.text(String),
	
		autonText = chart.selectAll("autonText")
			.data(datazor)
			.enter().append("text")
			.attr("class", "autonText")
			.attr("y", function(d, i) { return y(i) + y.rangeBand() / 2; })
			.attr("dx", -5)
			.attr("dy", ".35em")
			.style("color", "#fff")
			.attr("text-anchor", "end"),
		teleopText = chart.selectAll("teleopText")
			.data(datazor)
			.enter().append("text")
			.attr("class", "teleopText")
			.attr("y", function(d, i) { return y(i) + y.rangeBand() / 2; })
			.attr("dx", -5)
			.attr("dy", ".35em")
			.style("color", "#fff")
			.attr("text-anchor", "end"),
		climbText = chart.selectAll("climbText")
			.data(datazor)
			.enter().append("text")
			.attr("class", "climbText")
			.attr("y", function(d, i) { return y(i) + y.rangeBand() / 2; })
			.attr("dx", -5)
			.attr("dy", ".35em")
			.style("color", "#fff")
			.attr("text-anchor", "end");

		var rect = layer.selectAll("rect")
			.data(function(d) { return d; })
			.enter().append("rect")
			.attr("y", function(d) { return y(d.x); })
			.attr("x", 0)
			.attr("height", y.rangeBand())
			.attr("width", 0);
		redrawBars();
		drawRowNumbers();

		chart.append("line")
			.attr("y1", 0)
			.attr("y2", h)
			.style("stroke", "#000");

		function autoLayer(n, z) {
			var a = [];
			for (i = 0; i < n; ++i) a[i] = 0;
			return a.map(function(d, i) {
				return { x: i, y: datazor[i].auton }; 
			});
		}
		function teleopLayer(n, z) {
			var a = [];
			for (i = 0; i < n; ++i) a[i] = 0;
			return a.map(function(d, i) {
				return { x: i, y: datazor[i].teleop }; 
			});
		}
		function climbLayer(n, z) {
			var a = [];
			for (i = 0; i < n; ++i) a[i] = 0;
			return a.map(function(d, i) {
				return { x: i, y: datazor[i].climb }; 
			});
		}

		function sortByKey(array, key) {
			return array.sort(function(a, b) {
				var x = a[key]; var y = b[key];
				return ((x < y) ? -1 : ((x > y) ? 1 : 0));
			}).reverse();
		}

		function sort() {
			for(var team in datazor) {
				var sum = 0;
				if(visibleCategories.auton)
					sum += datazor[team].auton;
				if(visibleCategories.teleop)
					sum += datazor[team].teleop;
				if(visibleCategories.climb)
					sum += datazor[team].climb;
				datazor[team].sum = sum;
			}
			sortByKey(datazor, 'sum');
		}
		
		function getLayers() {
			return stack(d3.range(n).map(function(z) {
				if(z == 0)
					var thing = autoLayer(m, z);
				else if (z == 1)
					var thing = teleopLayer(m, z);
				else if (z == 2)
					var thing = climbLayer(m, z);
				return thing;
			}));
		}

		function getYStack() {
			var arrayzor = [];
			for(j = 0; j < datazor.length; j++) {
				var jzor = 0;
				for(var a in visibleCategories) {
					if(visibleCategories[a]) {
						jzor += datazor[j][a];
					}
				}
				arrayzor.push(jzor);
			}
			return d3.max(arrayzor);
		}

		function getX(d, i, z) {
			var jzor = 0;
			if(z == 0)
				return 0;
			if(z == 1) {
				if(visibleCategories.auton)
					return x(datazor[i].auton);
				return 0;
			}
			if(z == 2) {
				if(visibleCategories.auton && visibleCategories.teleop)
					return x(datazor[i].auton) + x(datazor[i].teleop);
				else if(visibleCategories.auton)
					return x(datazor[i].auton);
				else if(visibleCategories.teleop)
					return x(datazor[i].teleop);
				return 0;
			}
			return jzor;
		}

		function getWidth(d, i, z) {
			if(z == 0) {
				if(visibleCategories.auton)
					return x(d.y);
				return 0;
			}
			if(z == 1) {
				if(visibleCategories.teleop)
					return x(d.y);
				return 0;
			}
			if(z == 2) {
				if(visibleCategories.climb)
					return x(d.y);
				return 0;
			}
		}

		function drawRowNumbers() {
			autonText.data(datazor);
			teleopText.data(datazor);
			climbText.data(datazor);

			for(var v in visibleCategories)
				window[v + "Text"].transition()
					.attr("x", function(d) {
						if(v == "auton") {
							if(visibleCategories['auton'])
								return x(d.auton);
							return 0;
						}
						else if(v == "teleop") {
							if(visibleCategories['auton'] && visibleCategories['teleop'])
								return x(d.auton) + x(d.teleop);
							else if(visibleCategories['teleop'])
								return x(d.teleop)
							return 0;
						}
						else if(v == "climb") {
							if(visibleCategories['auton'] && visibleCategories['teleop'] && visibleCategories[v])
								return x(d.auton) + x(d.teleop) + x(d.climb);
							else if(visibleCategories['auton'])
								return x(d.auton) + x(d.climb);
							else if(visibleCategories['teleop'])
								return x(d.teleop) + x(d.climb);
							else if(visibleCategories['climb'])
								return x(d.climb);
							return 0;

						}
					})
					.text(function(d) {
						if(visibleCategories[v] && x(d[v]) >= 13 && d[v] > 0)
							return d[v]
						return "";
					});
		}

		function redrawBars() {
			rect.transition()
				.duration(500)
				.delay(function(d, i) { return i * 10;  })
				.attr("x", function(d, i, z) { return getX(d, i, z); })
				.attr("width", function(d, i, z) {  return getWidth(d, i, z); })
				.transition();
		}

		function redraw() {
			sort();
			layers = getLayers();
			layer.data(layers);
			rect.data(function(d) { return d; });
			yStackMax = getYStack();

			x = d3.scale.linear()
				.domain([0, yStackMax])
				.range([0, w-82]);

			redrawBars();

			teamText.data(datazor);
			teamText.text(function(d) { return  d.team + " - "; });

			xAxis.transition()
				.attr("x", x)
				.text(String);

			markers.transition()
				.attr("x1", x)
				.attr("x2", x)

			drawRowNumbers();
		}

		d3.select("#auton").on("click", toggleAuto);
		d3.select("#teleop").on("click", toggleTeleop);
		d3.select("#climb").on("click", toggleClimb);
	
		function toggleAuto() {
			if(!visibleCategories.auton) {
				$('#auton').removeClass('active');
				visibleCategories.auton = true;
			}
			else {
				$('#auton').addClass('active');
				visibleCategories.auton = false;
			}
			redraw();
		}
		function toggleTeleop() {
			if(!visibleCategories.teleop) {
				$('#teleop').removeClass('active');
				visibleCategories.teleop = true;
			}
			else {
				$('#teleop').addClass('active');
				visibleCategories.teleop = false;
			}
			redraw();
		}
		function toggleClimb() {
			if(!visibleCategories.climb) {
				$('#climb').removeClass('active');
				visibleCategories.climb = true;
			}
			else {
				$('#climb').addClass('active');
				visibleCategories.climb = false;
			}
			redraw();
		}
	</script>
</div>