D3 Examples - Bubble Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
text {
  font: 10px sans-serif;
}
​
</style>
​
<title></title>
​
<body>
</body>
​
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
    
var diameter = 400,
    format = d3.format(",d"),
    color_1 = d3.scale.ordinal()
        .domain(["Mathematics", "Physics", "Chemistry",
                 "Biology","Marine Sciences","Agricultural Sciences", "Health Sciences",
                 "Civil Engineering","Mechanical Engineering","Materials Science and Engineering","Chemical Science and Engineering","Electrical and Computer and Engineering",
                 "Economics and Management","Sociology, Anthropology, Demography, Geography","Education Science and Politics",
                 "Psychology","Linguistics","Communication Studies","Literature Studies","Philosophy","History","African Studies"])
        .range(["#0570b0","#74a9cf","#bdc9e1",
                "#006d2c","#31a354","#74c476","#c7e9c0",
                "#54278f","#6a51a3","#807dba","#9e9ac8","#bcbddc",
                "#fec44f","#fe9929","#fee391",
                "#a50f15","#cb181d","#ef3b2c","#fb6a4a","#fc9272","#fcbba1"]);
​
​
   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"; });
​
        
            var bub = node.append("circle")
                .attr("r", function(d) { return d.r; })
                .style("fill", function(d) { return colScale(d.className); });
            
            bub.on("mouseenter", function() {
                d3.select(this).style("fill", "red");})
                
                .on("mouseout", function() {
                d3.select(this).style("fill",function(d) { return colScale(d.className); });}); 
  
 
        node.append("text")
            .attr("dy", ".3em")
            .style("text-anchor", "middle")
            .text(function(d) { return d.shortName; });
    });
​
​
    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 = [];
​
  function recurse(name, node) {
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
    else classes.push({packageName: name, className: node.name, shortName: node.short, value: node.size});
  }
​
  recurse(null, root);
  return {children: classes};
}
​
d3.select(self.frameElement).style("height", diameter + "px");
​
</script>
​
</html>
    