gistfile1.js

var render = function(forums) {
	var data = _.map(App.forums, function(x){
		x['forumThreads'] = App.forumThreads[x.id]
		return(x)
	});

	// LABELS

	var labels = App.svg.selectAll("g")
	.data(data, function(d) { return d.id });

	labels.enter()
	.append("g")
	.append('text')
	.attr({
		"font-size": App.fontSize,
		x: function (d, i) { return d.level * 10 },
		y: function (d, i) {return i * App.fontSize + 20 }
	})
	.style("font-weight", function(d) { return +d.level < 4 ? "bold" : null })
	.style("fill", function(d) { return +d.open_day > App.day ? "#CCCCCC" : null })
	.text(function(d) { return d.name; });

	labels.style("fill", function(d) { return +d.open_day > App.day ? "#CCCCCC" : null });

	labels.transition().delay(250).duration(1000)
	.style("fill", function(d) { return +d.open_day > App.day ? "#CCCCCC" : "#000000" })
	.attr({
		"font-size": App.fontSize,
		x: function (d, i) { return d.level * 10 },
		y: function (d, i) {return i * App.fontSize + 20 }
	});

	labels.exit().transition()
	.remove()

	// CIRCLES

	var circles = labels.selectAll("circle")
	.data( function(d) { return d.forumThreads }, function(d) { return d[0] });

	circles.enter()
	.append("circle")
	.attr({
		"cx": function(d, i) { return (i * 6 + 200) },
		"cy": function(d, i, j) { return (j * App.fontSize + 20)},
		"r": function(d, i) { return (Math.sqrt( Math.log(d[1]) / Math.log(App.courseMeta["maxThreadlength"])) * 3) + 0.4 },
		"fill": function(d, i) { return "#000000" }
	});

	circles.transition().delay(250).duration(1000)
	.attr({
		"cx": function(d, i) { return (i * 6 + 200) },
		"cy": function(d, i, j) { return (j * App.fontSize + 20)},
		"r": function(d, i) { return (Math.sqrt( Math.log(d[1]) / Math.log(App.courseMeta["maxThreadlength"])) * 3) + 0.4 },
		"fill": function(d, i) { return "#000000" }
	});

	circles.exit().transition()
	.remove()

}