vlandham/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>


D2R = Math.PI / 180;

var width = 960,
    height = 500;

var node = [];
var link = [];

// here is the function that will
// determine the radial location for
// each node in the force layout.
//
// arbitrarily, it uses the nodes index in the
// the data array to pick out where it should
// land. In a real program, you might want to
// specify this by some grouping attribute
//
function radial(data, index, alpha) {
    // check out the post
    // http://macwright.org/2013/03/05/math-for-pictures.html
    // for more info on how this works
    var startAngle = 30;
    var radius = 350;
    var currentAngle = startAngle + (30 * index);
    var currentAngleRadians = currentAngle * D2R;
    // the 500 & 250 are to center the circle we are creating
    var radialPoint = {
      x: 500 + radius * Math.cos(currentAngleRadians),
      y: 250 + radius * Math.sin(currentAngleRadians)
    };


    // here we attenuate the effect of the centering
    // by the alpha of the force layout.
    // this gives other forces - like gravity -
    // to have an effect on the nodes
    var affectSize = alpha * 0.1;

    // here we adjust the x / y coordinates stored in our
    // data to move them closer to where we want them
    // this doesn't move the visual circles yet -
    // we will do that in moveToRadial
    data.x += (radialPoint.x - data.x) * affectSize;
    data.y += (radialPoint.y - data.y) * affectSize;


}

// this function gets called every 'tick' of the
// force layout
// first we call the above radial function on each
// node
// then we move each node based on its data's x/y
function moveToRadial(e) {
  node.each(function(d,i) { radial(d,i,e.alpha); });

  node
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });

  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 svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

// create some fake data
// each data element is an
// object with x & y attributes
var data = [];
for(var i = 0; i < 30; i++) {
  var d = {x:0, y:0, i:i};
  data.push(d);
}

var link_data = [];
for(var i = 0; i < 30; i++) {
  var d = {source:data[i], target:data[(i * 5 % 30)], i:i};
  link_data.push(d);
}

// create circle elements to
// represent our data
node = svg.selectAll("circle")
  .data(data);
node.enter().append("circle")
  .attr("r", 10)
  .attr("fill", "steelblue");

link = svg.selectAll("line.link")
  .data(link_data);

link.enter().append("line")
  .attr("class", "link")
  .attr("stroke", "#ddd")
  .attr("stroke-opacity", 0.8)
  .attr("stroke-width", 0.8);


// create and startup force
var force = d3.layout.force()
  .size([width, height])
  .nodes(data)
  .charge(-20)
  .on("tick", moveToRadial)
  .start();


</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>


	D2R = Math.PI / 180;

	var width = 960,
	height = 500;

	var node = [];
	var link = [];

	// here is the function that will
	// determine the radial location for
	// each node in the force layout.
	//
	// arbitrarily, it uses the nodes index in the
	// the data array to pick out where it should
	// land. In a real program, you might want to
	// specify this by some grouping attribute
	//
	function radial(data, index, alpha) {
	// check out the post
	// http://macwright.org/2013/03/05/math-for-pictures.html
	// for more info on how this works
	var startAngle = 30;
	var radius = 350;
	var currentAngle = startAngle + (30 * index);
	var currentAngleRadians = currentAngle * D2R;
	// the 500 & 250 are to center the circle we are creating
	var radialPoint = {
	x: 500 + radius * Math.cos(currentAngleRadians),
	y: 250 + radius * Math.sin(currentAngleRadians)
	};


	// here we attenuate the effect of the centering
	// by the alpha of the force layout.
	// this gives other forces - like gravity -
	// to have an effect on the nodes
	var affectSize = alpha * 0.1;

	// here we adjust the x / y coordinates stored in our
	// data to move them closer to where we want them
	// this doesn't move the visual circles yet -
	// we will do that in moveToRadial
	data.x += (radialPoint.x - data.x) * affectSize;
	data.y += (radialPoint.y - data.y) * affectSize;


	}

	// this function gets called every 'tick' of the
	// force layout
	// first we call the above radial function on each
	// node
	// then we move each node based on its data's x/y
	function moveToRadial(e) {
	node.each(function(d,i) { radial(d,i,e.alpha); });

	node
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; });

	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 svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	// create some fake data
	// each data element is an
	// object with x & y attributes
	var data = [];
	for(var i = 0; i < 30; i++) {
	var d = {x:0, y:0, i:i};
	data.push(d);
	}

	var link_data = [];
	for(var i = 0; i < 30; i++) {
	var d = {source:data[i], target:data[(i * 5 % 30)], i:i};
	link_data.push(d);
	}

	// create circle elements to
	// represent our data
	node = svg.selectAll("circle")
	.data(data);
	node.enter().append("circle")
	.attr("r", 10)
	.attr("fill", "steelblue");

	link = svg.selectAll("line.link")
	.data(link_data);

	link.enter().append("line")
	.attr("class", "link")
	.attr("stroke", "#ddd")
	.attr("stroke-opacity", 0.8)
	.attr("stroke-width", 0.8);


	// create and startup force
	var force = d3.layout.force()
	.size([width, height])
	.nodes(data)
	.charge(-20)
	.on("tick", moveToRadial)
	.start();







	</script>