Punchcard visualization using D3.js

<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="./d3.min.js"></script>
</head>
<body>
<script type="text/javascript">
function truncate(str, maxLength, suffix) {
	if(str.length > maxLength) {
		str = str.substring(0, maxLength + 1); 
		str = str.substring(0, Math.min(str.length, str.lastIndexOf(" ")));
		str = str + suffix;
	}
	return str;
}

var margin = {top: 20, right: 250, bottom: 0, left: 10},
	width = 1000,
	height = 650;

var start_year = 1945,
	end_year = 2014;

//var c = d3.scale.category20c();
//var c = d3.scale.category20b().range();
var c = d3.scale.category20c().range();

console.log(c)

//var c2 = c
//var c2 = c.slice(12,16).concat(c.slice(4,8)).concat(c.slice(0,4)).concat(c.slice(16)).concat(c.slice(8,12))
var c2 = c.slice(0,4).concat(c.slice(8,12)).concat(c.slice(12,16)).concat(c.slice(16)).concat(c.slice(4,8))

var x = d3.scale.linear()
	.range([0, width]);

var xAxis = d3.svg.axis()
	.scale(x)
	.orient("top");

var formatYears = d3.format("0000");
xAxis.tickFormat(formatYears);

var formatPercents = d3.format(".2r");

var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.style("margin-left", margin.left + "px")
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("pmvis.json", function(data) {
	console.log("loading data")
	x.domain([start_year, end_year]);
	var xScale = d3.scale.linear()
		.domain([start_year, end_year])
		.range([0, width]);

svg.append("g")
		.attr("class", "x axis")
		.attr("transform", "translate(0," + 0 + ")")
		.call(xAxis);

for (var j = 0; j < data.length; j++) {
		var g = svg.append("g").attr("class","journal");

var circles = g.selectAll("circle")
			.data(data[j]['articles'])
			.enter()
			.append("circle");

var text = g.selectAll("text")
			.data(data[j]['articles'])
			.enter()
			.append("text");

var rScale = d3.scale.linear()
			.domain([0, d3.max(data[j]['articles'], function(d) { return d[1]; })])
			.range([2, 9]);

circles
			.attr("cx", function(d, i) { return xScale(d[0]); })
			.attr("cy", j*20+20)
			.attr("r", function(d) { return rScale(d[1]); })
			.style("fill", function(d) { return c2[j]; })
			.style("fill-opacity", 0.8);

text
			.attr("y", j*20+25)
			.attr("x",function(d, i) { return xScale(d[0])-5; })
			.attr("class","value")
			.attr("dx", ".15em")
			//.text(function(d){ return d[1]; })
			.text(function(d){ return formatPercents(d[1]); })
			.style("fill", function(d) { return c2[j]; })
			.style("display","none")
			.style("font-size",8);

g.append("text")
			.attr("y", j*20+25)
			.attr("x",width+20)
			.attr("class","label")
			//.text(truncate(data[j]['name'],30,"..."))
			.text(data[j]['name'])
			.style("fill", function(d) { return c2[j]; })
			.on("mouseover", mouseover)
			.on("mouseout", mouseout);
	};

function mouseover(p) {
		var g = d3.select(this).node().parentNode;
		d3.select(g).selectAll("circle").style("display","none");
		d3.select(g).selectAll("text.value").style("display","block");
	}

function mouseout(p) {
		var g = d3.select(this).node().parentNode;
		d3.select(g).selectAll("circle").style("display","block");
		d3.select(g).selectAll("text.value").style("display","none");
	}
});

</script>
</body>
</html>