d3.table.sparkline.js

var draw_table = function(data, caption){
	var table = d3.select(".data-table").append("table");
	var tbody = table.append("tbody");

	var trows = tbody
		.selectAll("tr")
		.data(data)
		.enter()
		.append("tr");

	table
		.append("caption")
		.attr("class", "font-s font-bold")
		.text(caption);

	trows
		.append("th")
		.attr("class", "font-xxs")
		.text(function(d, i) {return i+1;});
		//.text(function(d, i) {return d.num; });

	trows
		.append("td")
		.attr("class", "font-s font-bold")
		.html(function(d, i) {
			var meta = '<span class="font-xs font-regular t-color_gray">'+d.total_closed+' ud af '+d.initial+' skoler nedlagt</span>'
			return d.name + meta;
			
		});

	var div = trows
		.append("td")
		.attr("class", "graph")
		.append("div");
		
	div.each(function(d, i) {return lines.apply(this, [i, d.series]); });
		// .each(lines);

	function lines(i, data) {
		var width = 60, height = 30; 
		
		var x = d3.time.scale().range([0, width]);
		var y = d3.scale.linear().range([height, 0]);

		x.domain([new Date(2007,0,1), new Date(2016,0,1)]);
		y.domain([0, 70]);

		var xAxis = d3.svg.axis().scale(x)
			.orient("bottom").ticks(2);

		var fx = x(x.domain()[1]);
		var fy = y(data.slice(-1)[0].decrement);

		d3.select(this)
		.append('small')
			.attr('class', 'font-bold font-xxs')
			.style('top',  fy + 'px')
			.style('left', fx +'px')
			.html(function (d) {
				var m = i? '' : '<br/>lukket';
				return Math.round(d.pct_closed) + '%' + m;
			})

		y.domain([
			d3.min(data, function(d) { return d.decrement; }),
			d3.max(data, function(d) { return d.decrement; })
		]);

		var line = d3.svg.line()
			.x(function(d) {return x(d.date)})
			.y(function(d) {return y(d.decrement)});
		
		var g = d3.select(this).append('svg')
			.attr('width', width)
			.attr('height', height);

		g.append('path')
			.attr('class','line')
			.datum(data)
			.attr('d', line);

		g.append("circle")
			.attr('r', 2.5)
			.attr("cx", fx)
			.attr("cy", fy - 0);

		// g.append("circle")
		// 	.attr('r', 2.5)
		// 	.attr("cx", x(x.domain()[0]) + 2)
		// 	.attr("cy", y(data[0].pct_decrement) - 2);
	}

};