circle-packing.coffee

root = exports ? this

root.collections_viz = (json_path) ->
  d3.json json_path, (data) ->
    width = 600
    height = 600
    format = d3.format(",d")

    pack = d3.layout.pack()
      .size([ width - 4, height - 4 ])
      .value((d) -> d.size)

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

    node = vis.data([ data ]).selectAll("#viz-collections g.node")
        .data(pack.nodes)
      .enter().append("g")
        .attr("class", (d) -> if d.children then "node" else "leaf node")
        .attr("transform", (d) -> "translate(" + d.x + "," + d.y + ")")

    node.append("title")
      .text (d) -> d.name + (if d.children then "" else ": " + format(d.size))

    node.append("circle")
      .attr("r", (d) -> d.r)
      .on "click", (d) -> if d.children then (window.location = d.url) else undefined

    node.filter((d) -> d.children)
      .append("text")
        .attr("text-anchor", "middle")
        .attr("dy", ".3em")
        .text (d) -> if d.name.length <= d.r/3 then d.name else ""
        

circle-packing.css

circle {
  fill-opacity: .25;
  stroke-width: 1px;
  fill: #1f77b4;
  stroke: steelblue;
}

.leaf circle {
  fill-opacity: 0;
  pointer-events: none;
}

text {
  font: 12px sans-serif;
}

.leaf text {
  opacity: 0;
}

text.parent {
  fill: #1f77b4;
}

circle.parent:hover {
  stroke: #ff7f0e;
  stroke-width: .5px;
}

circle-packing.js

// Generated by CoffeeScript 1.3.1
(function() {
  var root;

  root = typeof exports !== "undefined" && exports !== null ? exports : this;

  root.collections_viz = function(json_path) {
    return d3.json(json_path, function(data) {
      var format, height, node, pack, vis, width;
      width = 600;
      height = 600;
      format = d3.format(",d");
      pack = d3.layout.pack().size([width - 4, height - 4]).value(function(d) {
        return d.size;
      });
      vis = d3.select("#viz-collections").append("svg").attr("width", width).attr("height", height).attr("class", "pack").append("g").attr("transform", "translate(2, 2)");
      node = vis.data([data]).selectAll("#viz-collections g.node").data(pack.nodes).enter().append("g").attr("class", function(d) {
        if (d.children) {
          return "node";
        } else {
          return "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;
      }).on("click", function(d) {
        if (d.children) {
          return window.location = d.url;
        } else {
          return;
        }
      });
      return node.filter(function(d) {
        return d.children;
      }).append("text").attr("text-anchor", "middle").attr("dy", ".3em").text(function(d) {
        if (d.name.length <= d.r / 3) {
          return d.name;
        } else {
          return "";
        }
      });
    });
  };

}).call(this);

collections.json

{
  "name": "",
  "children": [
    {
      "name": "smurp",
      "children": [
        {
          "name": "Arkestra",
          "size": 140
        },
        {
          "name": "barricane-db",
          "size": 96
        },
        {
          "name": "hallway",
          "size": 2716
        },
        {
          "name": "node-psi-server",
          "size": 88
        },
        {
          "name": "tmjs",
          "size": 92
        }
      ]
    },
    {
      "name": "e14n",
      "children": [
        {
          "name": "dialback-client",
          "size": 200
        },
        {
          "name": "jankyqueue",
          "size": 168
        },
        {
          "name": "ofirehose",
          "size": 136
        },
        {
          "name": "openfarmgame",
          "size": 248
        },
        {
          "name": "pump.io",
          "size": 1384
        },
        {
          "name": "schlock",
          "size": 260
        }
      ]
    },
    {
      "name": "evanp",
      "children": [
        {
          "name": "activity-replies",
          "size": 96
        },
        {
          "name": "activity-schema",
          "size": 120
        },
        {
          "name": "activityspam",
          "size": 672
        },
        {
          "name": "buzzbird",
          "size": 100
        },
        {
          "name": "cdnjs",
          "size": 132
        },
        {
          "name": "connect-auth",
          "size": 152
        },
        {
          "name": "connect-databank",
          "size": 464
        },
        {
          "name": "crapi-example",
          "size": 196
        },
        {
          "name": "databank",
          "size": 212
        },
        {
          "name": "databank-leveldb",
          "size": 244
        },
        {
          "name": "databank-memcached",
          "size": 168
        },
        {
          "name": "databank-mongodb",
          "size": 152
        },
        {
          "name": "databank-redis",
          "size": 164
        },
        {
          "name": "dialback",
          "size": 268
        },
        {
          "name": "dialback-example",
          "size": 244
        },
        {
          "name": "emailjs",
          "size": 128
        },
        {
          "name": "headlights-diagram",
          "size": 92
        },
        {
          "name": "kvar",
          "size": 116
        },
        {
          "name": "node-memcached",
          "size": 1472
        },
        {
          "name": "node.ly",
          "size": 100
        },
        {
          "name": "ofirehose",
          "size": 88
        },
        {
          "name": "openfarmgame",
          "size": 120
        },
        {
          "name": "openfollow",
          "size": 224
        },
        {
          "name": "passport",
          "size": 596
        },
        {
          "name": "PubSubHubbub",
          "size": 92
        },
        {
          "name": "pubsubhubbub-json-client",
          "size": 152
        },
        {
          "name": "pump.io",
          "size": 624
        },
        {
          "name": "underscore",
          "size": 860
        },
        {
          "name": "vows",
          "size": 88
        },
        {
          "name": "webapp",
          "size": 9184
        }
      ]
    },
    {
      "name": "simple10",
      "children": [
        {
          "name": "DropKick",
          "size": 88
        },
        {
          "name": "jbar",
          "size": 96
        },
        {
          "name": "jQuery-File-Upload",
          "size": 92
        },
        {
          "name": "jquery-lifestream",
          "size": 108
        },
        {
          "name": "jquery-plugins",
          "size": 92
        },
        {
          "name": "jrac",
          "size": 88
        },
        {
          "name": "linkedin",
          "size": 148
        },
        {
          "name": "OAuth-Token-Generator",
          "size": 112
        },
        {
          "name": "rack-timeout",
          "size": 236
        },
        {
          "name": "rails-3.1-quickstart-mongoid",
          "size": 164
        },
        {
          "name": "rails3-bootstrap-devise-cancan-heroku",
          "size": 184
        },
        {
          "name": "redis_autocomplete",
          "size": 356
        },
        {
          "name": "resque-heroku",
          "size": 152
        },
        {
          "name": "scrollability",
          "size": 92
        },
        {
          "name": "spin.js",
          "size": 96
        }
      ]
    },
    {
      "name": "auggernaut",
      "children": [
        {
          "name": "buddycloud-server",
          "size": 96
        },
        {
          "name": "buddycloud-webclient",
          "size": 96
        },
        {
          "name": "deployd",
          "size": 592
        },
        {
          "name": "Email-Blueprints",
          "size": 88
        },
        {
          "name": "ember.js",
          "size": 88
        },
        {
          "name": "Locker",
          "size": 124
        },
        {
          "name": "nodecellar",
          "size": 168
        },
        {
          "name": "Pipe",
          "size": 120
        },
        {
          "name": "singly-nodejs-example",
          "size": 92
        },
        {
          "name": "stardust",
          "size": 972
        },
        {
          "name": "StardustServer",
          "size": 0
        },
        {
          "name": "ThankYouPhoneGap",
          "size": 828
        }
      ]
    },
    {
      "name": "harlantwood",
      "children": [
        {
          "name": "asciidoctor",
          "size": 404
        },
        {
          "name": "Best-Practices",
          "size": 140
        },
        {
          "name": "d3",
          "size": 116
        },
        {
          "name": "dev_env",
          "size": 140
        },
        {
          "name": "diff-lcs",
          "size": 120
        },
        {
          "name": "dreamy",
          "size": 124
        },
        {
          "name": "easy_shell",
          "size": 160
        },
        {
          "name": "Enlightened_Structure",
          "size": 168
        },
        {
          "name": "fdg",
          "size": 112
        },
        {
          "name": "fork_this",
          "size": 396
        },
        {
          "name": "FreePress",
          "size": 116
        },
        {
          "name": "gatekeeper",
          "size": 132
        },
        {
          "name": "gist-wizard",
          "size": 200
        },
        {
          "name": "git-scribe",
          "size": 172
        },
        {
          "name": "giternal",
          "size": 216
        },
        {
          "name": "gollum",
          "size": 112
        },
        {
          "name": "Harlan_T_Wood",
          "size": 180
        },
        {
          "name": "Heart_of_the_Sun",
          "size": 1504
        },
        {
          "name": "html_massage",
          "size": 464
        },
        {
          "name": "is_taggable",
          "size": 256
        },
        {
          "name": "jekyll",
          "size": 88
        },
        {
          "name": "jit",
          "size": 120
        },
        {
          "name": "liquor-cabinet",
          "size": 260
        },
        {
          "name": "mcbean",
          "size": 88
        },
        {
          "name": "Metamap",
          "size": 88
        },
        {
          "name": "nodemap",
          "size": 472
        },
        {
          "name": "octopress",
          "size": 140
        },
        {
          "name": "polystore",
          "size": 184
        },
        {
          "name": "prose",
          "size": 148
        },
        {
          "name": "protovis",
          "size": 104
        }
      ]
    },
    {
      "name": "mbostock",
      "children": [
        {
          "name": "bl.ocks.org",
          "size": 297
        },
        {
          "name": "bost.ocks.org",
          "size": 232
        },
        {
          "name": "d3",
          "size": 3876
        },
        {
          "name": "dependency-tree",
          "size": 128
        },
        {
          "name": "git-static",
          "size": 160
        },
        {
          "name": "hide-google-plus-notification",
          "size": 160
        },
        {
          "name": "mbostock.github.com",
          "size": 140
        },
        {
          "name": "mongo-mock",
          "size": 112
        },
        {
          "name": "nns",
          "size": 116
        },
        {
          "name": "node-envy",
          "size": 112
        },
        {
          "name": "node-mappy",
          "size": 108
        },
        {
          "name": "node-mongodb-native",
          "size": 120
        },
        {
          "name": "pixymaps",
          "size": 124
        },
        {
          "name": "polly-b-gone",
          "size": 120
        },
        {
          "name": "polymaps",
          "size": 1016
        },
        {
          "name": "protovis",
          "size": 252
        },
        {
          "name": "queue",
          "size": 176
        },
        {
          "name": "shapefile",
          "size": 208
        },
        {
          "name": "stack",
          "size": 132
        },
        {
          "name": "topojson",
          "size": 448
        },
        {
          "name": "us-atlas",
          "size": 184
        },
        {
          "name": "vows",
          "size": 112
        },
        {
          "name": "world-atlas",
          "size": 112
        }
      ]
    }
  ]
}

github-tree.rb

#!/usr/bin/env ruby

require 'rest-client'
require 'json'

USERS = %w[
  smurp
  e14n
  evanp
  simple10
  auggernaut
  harlantwood
  mbostock
]

viz = {'name' => '', 'children' => []}
USERS.each do |user|
  viz_repos = []
  viz['children'] << {'name' => user, 'children' => viz_repos}
  json = RestClient.get "https://api.github.com/users/#{user}/repos"
  repos = JSON.parse(json)
  repos.each do |repo|
    viz_repos << {'name' => repo['name'], 'size' => repo['size']}
  end
end

puts JSON.pretty_generate viz

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>CoffeeScript->Javascript D3 Circle Packing Layout</title>
    <link href="circle-packing.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="viz-collections"></div>                               
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="circle-packing.js"></script>
    <script>
      collections_viz('collections.json');
    </script>
  </body>
</html>