Developers' relationship, take 2

A simple example to show developers' relationship by analyzing commits in AOSP frameworks/base repository. Only commits submitted within past 2 months were used for generating this relationship. You might want to click 'open in a new window' link (right) to see this on larger window.

This graph was built by the following.

making edges by developer to his or her modified file (bipartite graph)
making projection by developer nodes

You might want to know what the graph represents

Each circle shows each developer.
Each color of inner circle represents each company which hires the developer.
Each diameter of outer circle represents how many code lines added by the developer.
You can see developer's name and how many code lines added by him or her when you do mouse over the circle.

You can generate the json file by flatiron.

This example is based on Couchand's block 6495846.

.node {
  opacity: 0.6;
}

.node:hover {
  opacity: 1;
}

.link {
  stroke: #999;
  stroke-opacity: 0.2;
}

.link:hover {
  stroke: #999;
  stroke-opacity: 0.8;
}

</style>
    <script src="https://d3js.org/d3.v3.min.js"></script>
  </head>
  <body>
    <div id="viz"></div>
    <script>

function title(d) { return d.id+" "+d.insertions; }
function group(d) { return d.company; }

var color = d3.scale.category10();
function colorByGroup(d) { return color(group(d)); }

var width = 960,
    height = 500;

var svg = d3.select('#viz')
    .append('svg')
    .attr('width', width)
    .attr('height', height);

var node, link;

var voronoi = d3.geom.voronoi()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .clipExtent([[-10, -10], [width+10, height+10]]);

var force = d3.layout.force()
    .charge(-700)
    .friction(0.3)
    .linkDistance(55)
    .size([width, height]);

force.on('tick', function() {
    node.attr('transform', function(d) { return 'translate('+d.x+','+d.y+')'; })
        .attr('clip-path', function(d) { return 'url(#clip-'+d.index+')'; });

link.attr('x1', function(d) { return d.source.x; })
        .attr('y1', function(d) { return d.source.y; })
        .attr('x2', function(d) { return d.target.x; })
        .attr('y2', function(d) { return d.target.y; });

var clip = svg.selectAll('.clip')
        .data( recenterVoronoi(node.data()), function(d) { return d.point.index; } );

clip.enter().append('clipPath')
        .attr('id', function(d) { return 'clip-'+d.point.index; })
        .attr('class', 'clip');
    clip.exit().remove()

clip.selectAll('path').remove();
    clip.append('path')
        .attr('d', function(d) { return 'M'+d.join(',')+'Z'; });
});

d3.json('developers.json', function(err, data) {

data.nodes.forEach(function(d, i) {
        d.nid = i;
    });

link = svg.selectAll('.link')
        .data( data.links )
      .enter().append('line')
        .attr('class', 'link')
        .style("stroke-width", function(d) { return Math.sqrt(d.value); });

node = svg.selectAll('.node')
        .data( data.nodes )
      .enter().append('g')
        .attr('title', title)
        .attr('class', 'node')
        .call( force.drag );

node.append('circle')
    .attr('r', function(d) {return Math.sqrt(d.insertions)+5})
        .attr('fill', 'gray')
        .attr('fill-opacity', 0.3);

node.append('circle')
    .attr('r', 5)
        .attr('fill', colorByGroup);

force
        .nodes( data.nodes )
        .links( data.links )
        .start();
});

</script>
  </body>
</html>

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

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