mayblue9

This is part of a series of examples that describe the basic operation of the D3.js force layout. Eventually they may end up in a blog post that wraps everything together. If you missed the beginning of the series, here's a link to first example.

Before digging into the properties and options of the force layout, it's helpful to understand how the layout works more generally. And although there's some serious mathematics going on under the hood, the principle is pretty simple: The layout moves the graph nodes around a little bit

This is a general overview (from memory) of the steps I used to install graphite (http://graphite.wikidot.com) on OS X Lion. I think the steps are in order but YMMV. Please fork and fix if you find an error.

Install Python 2.7.2

brew install python

Check your env

$ python --version

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.

	/*!
	* Bootstrap v2.3.2
	*
	* Copyright 2012 Twitter, Inc
	* Licensed under the Apache License v2.0
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Designed and built with all the love in the world @twitter by @mdo and @fat.
	/.clearfix{zoom:1}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;display:inline;zoom:1}audio:not([controls]){display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}a:hover,a:active{outline:0}sub,sup{position:relative;font-size:75%;line-height:0;ver

	// Start `node d3-server.js`
	// Then visit http://localhost:1337/
	//
	var d3 = require('d3'),
	http = require('http')

	http.createServer(function (req, res) {
	// Chrome automatically sends a requests for favicons
	// Looks like https://code.google.com/p/chromium/issues/detail?id=39402 isn't
	// fixed or this is a regression.

	<!DOCTYPE html>
	<!-- Port Arc Diagram visualization from http://homes.cs.washington.edu/~jheer/files/zoo/ex/networks/arc.html to D3.js -->
	<meta charset="utf-8">
	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 960px;
	height: 500px;
	position: relative;
	}

	# -- coding: utf-8 --
	# Girvan Newman algorithmを使って空手クラブネットワークのコミュニティが分割していく様子を出力
	# Zachary's karate club(空手クラブのネットワーク)のデータ取得元URL
	# http://www-personal.umich.edu/~mejn/netdata/


	import networkx as NX
	import networkx.readwrite.gml as NRG
	import networkx.algorithms.centrality as NC
	import pylab as P

	license: cc-by-4.0
	border: no
	height: 600

	license: cc-by-4.0
	border: no
	height: 600