Skip to content

Instantly share code, notes, and snippets.

@yaph

yaph/README.md

Created May 11, 2012 21:06
Show Gist options
  • Save yaph/2662413 to your computer and use it in GitHub Desktop.
Save yaph/2662413 to your computer and use it in GitHub Desktop.
Download ZIP
GitHub Language Correlations Circle Pack Visualization
Raw
README.md

README

View this Gist at bl.ocks.org

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.

Raw
index.html
<!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="http://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>
Raw
language_correlation_circle_pack.json
{"name": "LanguageCorrelation", "children": [{"name": "C", "children": [{"name": "Shell", "size": 64.0}, {"name": "C++", "size": 55.0}, {"name": "Python", "size": 49.0}, {"name": "JavaScript", "size": 46.0}, {"name": "Ruby", "size": 32.0}, {"name": "Perl", "size": 30.0}, {"name": "Java", "size": 29.0}, {"name": "Objective-C", "size": 28.0}, {"name": "PHP", "size": 22.0}, {"name": "VimL", "size": 15.0}, {"name": "Assembly", "size": 13.0}, {"name": "C#", "size": 11.0}]}, {"name": "Shell", "children": [{"name": "JavaScript", "size": 61.0}, {"name": "Python", "size": 50.0}, {"name": "C", "size": 46.0}, {"name": "Ruby", "size": 37.0}, {"name": "C++", "size": 31.0}, {"name": "Java", "size": 31.0}, {"name": "PHP", "size": 30.0}, {"name": "Perl", "size": 28.0}, {"name": "VimL", "size": 18.0}, {"name": "Objective-C", "size": 16.0}, {"name": "C#", "size": 11.0}]}, {"name": "Java", "children": [{"name": "JavaScript", "size": 45.0}, {"name": "Shell", "size": 43.0}, {"name": "Python", "size": 31.0}, {"name": "C", "size": 30.0}, {"name": "Ruby", "size": 26.0}, {"name": "C++", "size": 22.0}, {"name": "PHP", "size": 19.0}, {"name": "Perl", "size": 17.0}, {"name": "Objective-C", "size": 12.0}]}, {"name": "Python", "children": [{"name": "Shell", "size": 61.0}, {"name": "JavaScript", "size": 55.0}, {"name": "C", "size": 43.0}, {"name": "Ruby", "size": 31.0}, {"name": "C++", "size": 31.0}, {"name": "Java", "size": 27.0}, {"name": "Perl", "size": 26.0}, {"name": "PHP", "size": 25.0}, {"name": "VimL", "size": 16.0}, {"name": "Objective-C", "size": 16.0}]}, {"name": "JavaScript", "children": [{"name": "Ruby", "size": 51.0}, {"name": "Shell", "size": 38.0}, {"name": "PHP", "size": 31.0}, {"name": "Python", "size": 28.0}, {"name": "C", "size": 21.0}, {"name": "Java", "size": 20.0}, {"name": "C++", "size": 13.0}, {"name": "Perl", "size": 13.0}, {"name": "CoffeeScript", "size": 12.0}]}, {"name": "C++", "children": [{"name": "C", "size": 83.0}, {"name": "Shell", "size": 65.0}, {"name": "Python", "size": 52.0}, {"name": "JavaScript", "size": 44.0}, {"name": "Java", "size": 33.0}, {"name": "Perl", "size": 33.0}, {"name": "Ruby", "size": 28.0}, {"name": "Objective-C", "size": 25.0}, {"name": "PHP", "size": 22.0}, {"name": "Assembly", "size": 16.0}, {"name": "VimL", "size": 15.0}, {"name": "C#", "size": 15.0}, {"name": "Rust", "size": 11.0}, {"name": "Prolog", "size": 11.0}, {"name": "Emacs Lisp", "size": 11.0}]}, {"name": "Perl", "children": [{"name": "Shell", "size": 80.0}, {"name": "C", "size": 62.0}, {"name": "Python", "size": 62.0}, {"name": "JavaScript", "size": 61.0}, {"name": "C++", "size": 45.0}, {"name": "Ruby", "size": 41.0}, {"name": "PHP", "size": 36.0}, {"name": "Java", "size": 34.0}, {"name": "Objective-C", "size": 25.0}, {"name": "VimL", "size": 23.0}, {"name": "Assembly", "size": 19.0}, {"name": "Emacs Lisp", "size": 17.0}, {"name": "C#", "size": 15.0}, {"name": "D", "size": 11.0}, {"name": "Rust", "size": 10.0}, {"name": "ASP", "size": 10.0}]}, {"name": "Objective-C", "children": [{"name": "C", "size": 76.0}, {"name": "Shell", "size": 59.0}, {"name": "JavaScript", "size": 49.0}, {"name": "Python", "size": 48.0}, {"name": "C++", "size": 46.0}, {"name": "Ruby", "size": 37.0}, {"name": "Perl", "size": 33.0}, {"name": "Java", "size": 31.0}, {"name": "PHP", "size": 24.0}, {"name": "VimL", "size": 18.0}, {"name": "Assembly", "size": 17.0}, {"name": "C#", "size": 13.0}, {"name": "Emacs Lisp", "size": 12.0}]}, {"name": "PHP", "children": [{"name": "JavaScript", "size": 73.0}, {"name": "Shell", "size": 45.0}, {"name": "Python", "size": 30.0}, {"name": "Ruby", "size": 28.0}, {"name": "C", "size": 24.0}, {"name": "Java", "size": 20.0}, {"name": "Perl", "size": 19.0}, {"name": "C++", "size": 16.0}]}, {"name": "Ruby", "children": [{"name": "JavaScript", "size": 81.0}, {"name": "Shell", "size": 37.0}, {"name": "Python", "size": 25.0}, {"name": "C", "size": 23.0}, {"name": "PHP", "size": 19.0}, {"name": "Java", "size": 18.0}, {"name": "CoffeeScript", "size": 18.0}, {"name": "Perl", "size": 14.0}, {"name": "C++", "size": 13.0}, {"name": "VimL", "size": 12.0}]}]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment