add_plots_to_cells.js

//Width and height
var timeStretch = 1.6;
var h = 70;
var w = 920;
var barPadding = 1;
var timePeriod = 10;
var timeParser = d3.timeParse("%H:%M");

function dict2array(dict) {
   var result = [];
   for(var t in dict) {
      result.push([parseTime(t),t,dict[t]]);
   }
   return result;
}

function parseTime(tm) {
	return timeParser(tm).getMinutes()+timeParser(tm).getHours() * 60;
}

function onTime(t) {
	if (t >= 120) {
	    return "green";
	} else if (60 <= t && t < 120) {
	    return "orange";
	} else {
		return "red";
	}
}

function plotGraph(c, e) {
	//Create SVG element
	var svg = d3.select(c)
				.append("svg")
				.attr("width", w)
	   			.attr("height", h + 50);

	//Create bar elements
	var bar = svg.selectAll("g")
				 .data(e)
				 .enter()
	             .append("g");
	
	//Add rectangles
	bar.append("rect")
	   .attr("height", function(d) { return d[2]; })
	   .attr("width", timePeriod * timeStretch - barPadding )
	   .attr("x", function(d) { return d[0] * timeStretch; })
	   .attr("y", function(d) { return h - d[2]; })
	   .attr("fill", function(d) { return onTime(d[0]); });

	//Add text
	bar.append("text")
	   .attr("y", function(d) { return d[0] * timeStretch; })
       .attr("x", -h)
       .attr("transform", "rotate(270)")
       .attr("dx", "-2.5em")
       .attr("dy", "1em")
       .text(function(d) { return d[1]; });
	bar.append("text")
	   .attr("y", function(d) { return - d[2] + h; })
       .attr("x", function(d) { return d[0] * timeStretch; })
       .attr("dx", ".05em")
       .attr("dy", "-.3em")
       .text(function(d) { return d[2]; });
};

var table = document.getElementsByTagName("table")[0];

table.rows[0].cells[8].innerHTML = "Minutes until flight histogram"

for (var i = 1, row; row = table.rows[i]; i++) {
   cell = row.cells[8];
   data = JSON.parse(cell.innerHTML.replace(/'/g, '\"'));
   cell.innerHTML = ""
   plotGraph(cell, dict2array(data));
}