GitHub Language Correlations Circle Pack Visualization

README

A circle packing visualization of the programming language correlations dataset, that is available via Google's BigQuery service as part of the GitHub Archive project.

Included are the 10 most popular programming languages on GitHub at the time of creation (JavaScript, Ruby, Python, Shell, Java, PHP, C, Perl, C++, Objective-C) and their correlated languages with a minimum correlation score of 10. Read more about how correlation scores are calculated.

On the demo page move the mouse pointer over the big containing circles to see the name of the source languages and over the smaller contained circles to see the rounded correlation values.

The visualization was created by Ramiro Gómez using the excellent Data-Driven Documents JavaScript library based on the circle packing example.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GitHub Language Correlations Circle Pack Visualization</title>
<style type="text/css">
circle {
fill: #3AA1C3;
fill-opacity: .15;
stroke: #03374a;
stroke-width: 1px;
}
.leaf circle {
fill: #84D181;
fill-opacity: 1;
}
text {
font: 10px sans-serif;
}
</style>
<script src="https://d3js.org/d3.v2.min.js"></script>
</head>
<body>
<div id="vis"></div>
<script>
var width = 960,
  height = 500,
  format = d3.format(",d");

var pack = d3.layout.pack()
  .size([width - 4, height - 4])
  .value(function(d) { return d.size; });

var vis = d3.select("#vis").append("svg")
  .attr("width", width)
  .attr("height", height)
  .attr("class", "pack")
  .append("g")
  .attr("transform", "translate(2, 2)");

d3.json("language_correlation_circle_pack.json", function(json) {
console.log(json);
  var node = vis.data([json]).selectAll("g.node")
    .data(pack.nodes)
    .enter().append("g")
    .attr("class", function(d) { return d.children ? "node" : "leaf node";})
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

node.append("title")
    .text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size));});

node.append("circle")
    .attr("r", function(d) { return d.r; });

node.filter(function(d) { return !d.children; }).append("text")
    .attr("text-anchor", "middle")
    .attr("dy", ".3em")
    .text(function(d) { return d.name.substring(0, d.r / 3); });
});
</script>
</body>
</html>

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

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