var canvasWidth = $(this.canvas).parent().width();

		this.canvas.setAttribute('width',canvasWidth);

		this.canvas.setAttribute('height',content.clientHeight);

		// HiDPI version needs to be scaled by 2x then halved via css

		// Note: Firefox on OS X fails scaling if the canvas height is more than 32k

		if (window.devicePixelRatio && content.clientHeight * window.devicePixelRatio < 32768) {

			this.canvas.setAttribute('width', canvasWidth * window.devicePixelRatio);

			this.canvas.setAttribute('height', content.clientHeight * window.devicePixelRatio);

			this.canvas.style.width = canvasWidth + "px";

			this.canvas.style.height = content.clientHeight + "px";

			this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

		}

		var lineCount = 1;

		for (var i=0;i<data.length;i++) {

			var in_l = data[i][1];

			for (var j in in_l) {

				var m = in_l[j][0];

				if (m > lineCount)

					lineCount = m;

			}

		}

		var edge_pad = this.dot_radius + 2;

		var box_size = Math.min(18, (canvasWidth - edge_pad * 2) / lineCount);

		var base_x = canvasWidth - edge_pad;

		for (var i=0; i < data.length; ++i) {

			var row = document.getElementById(row_id_prefix+idx);

			if (row == null) {

				console.log("error: row "+row_id_prefix+idx+" not found");

				continue;

			}

			var next = document.getElementById(row_id_prefix+(idx+1));

			var extra = 0;

			cur = data[i];

			node = cur[0];

			in_l = cur[1];

			closing = cur[2];

			obsolete_node = cur[3];

			bumped_node = cur[4];

			divergent_node = cur[5];

			extinct_node = cur[6];

			unstable_node = cur[7];

			for (var j in in_l) {

				line = in_l[j];

				start = line[0];

				end = line[1];

				color = line[2];

				obsolete_line = line[3];

				x = Math.floor(base_x - box_size * start);

				// figure out if this is a dead-end;

				// we want to fade away this line

				var dead_end = true;

				if (next != null) {

					nextdata = data[i+1];

					next_l = nextdata[1];

					for (var k=0; k < next_l.length; ++k) {

						if (next_l[k][0] == end) {

							dead_end = false;

							break;

						}

					}

					if (nextdata[0][0] == end) // this is a root - not a dead end

						dead_end = false;

				}

				if (dead_end) {

					var gradient = this.ctx.createLinearGradient(x,rowY,x,nextY);

					gradient.addColorStop(0,this.calcColor(color, 0.0, 0.65));

					gradient.addColorStop(1,this.calcColor(color, 1.0, 0.0));

					this.ctx.strokeStyle = gradient;

					this.ctx.fillStyle = gradient;

				}

				// if this is a merge of differently

				// colored line, make it a gradient towards

				// the merged color

				else if (color != node[1] && start == node[0])

				{

					var gradient = this.ctx.createLinearGradient(x,rowY,x,nextY);

					gradient.addColorStop(0,this.calcColor(node[1], 0.0, 0.65));

					gradient.addColorStop(1,this.calcColor(color, 0.0, 0.65));

					this.ctx.strokeStyle = gradient;

					this.ctx.fillStyle = gradient;

				}

				else

				{

					this.setColor(color, 0.0, 0.65);

				}