Bubble Chart | Multi

Bubble Chart - side-by-side

<!DOCTYPE html>
<meta charset="utf-8">
<style>

text {
  font: 10px sans-serif;
}

</style>

color_2 = d3.scale.ordinal()
    	.domain(["Exact Sciences", 
    			 "Health and Life Sciences","Natural & Environmental Sciences",
    			 "Engineering Sciences",
    			 "Humanities",
    			 "Social Sciences",
    			 "External Reviewer"])
    	.range(["#0570b0",
    			"#006d2c","#74c476",
    			"#9e9ac8",
    			"#fec44f",
    			"#a50f15",
    			"#737373"]);

var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);

function addChart(file, colScale, total, year) {
		
	var svg = d3.select("body").append("svg")
    	.attr("width", diameter)
    	.attr("height", diameter+140)
    	.attr("class", "bubble")
    	.append("g")
    	.attr("transform", "translate(0,40)");

d3.json(file, function(error, root) {
  		var node = svg.selectAll(".node")
      		.data(bubble.nodes(classes(root))
      		.filter(function(d) { return !d.children; }))
      		.enter().append("g")
      		.attr("class", "node")
     		.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

node.append("title")
      		.text(function(d) { return d.className + ": " + format(d.value) + " reviewers"; });

svg.append("text")
    	.attr("x", 280)
    	.attr("y", 10)
    	.style("font-size","40px")
    	.text(year);

svg.append("text")
    	.attr("x", 280)
    	.attr("y", 30)
    	.style("font-size","20px")
    	.text("model");

svg.append("text")
    	.attr("x", 50)
    	.attr("y", 435)
    	.style("font-size","40px")
    	.text(total);

svg.append("text")
    	.attr("x", 60)
    	.attr("y", 460)
    	.style("font-size","20px")
    	.text("reviewers involved in total.");

}

addChart("d2007.json", color_1, "223", "2007");
addChart("d2014.json", color_2, "74 + 585", "2014");

// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
  var classes = [];

recurse(null, root);
  return {children: classes};
}

d3.select(self.frameElement).style("height", diameter + "px");

</script>

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js