pnavarrc/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Force layout with vertical gravity.

  
## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="//d3js.org/d3.v3.min.js"></script>
  </head>

  <style>
  svg {
    overflow: visible;
    border: solid 1px #666;
  }

  .node {
    fill-opacity: 0.8;
    stroke: #fff;
    stroke-width: 2;
  }
  </style>

  <body>

  <svg class="gravity"></svg>

  <script type="text/javascript" src="main.js"></script>
  </body>
</html>

## main.js

var numNodes =  50,
    nodes = [];

var width  = 800,
    height = 400,
    r = 20;

for (var k = 0; k < numNodes; k += 1) {
  nodes.push({
    num: k
  });
}

var force = d3.layout.force()
  .nodes(nodes)
  .gravity(0)
  .charge(-150)
  .size([width, height])
  .start();

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

var colorScale = d3.scale.linear()
  .domain([0, height])
  .range(['#F8CA00', '#BD1550']);

var circles = svg.selectAll('.node').data(nodes);

circles.enter().append('circle').classed('node', true);
circles.attr('r', r);
circles.exit().remove();

force.on('tick', function(e) {

  nodes.forEach(function(o) {
    var dy = (height - r) - o.y;
    o.y = (dy < 0) ? (height - r) : o.y + (dy / height);
  });

  circles
    .attr('cx', function(d) { return d.x; })
    .attr('cy', function(d) { return d.y; })
    .attr('fill', function(d) { return colorScale(d.y); });
});

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<script src="//d3js.org/d3.v3.min.js"></script>
	</head>

	<style>
	svg {
	overflow: visible;
	border: solid 1px #666;
	}

	.node {
	fill-opacity: 0.8;
	stroke: #fff;
	stroke-width: 2;
	}
	</style>

	<body>

	<svg class="gravity"></svg>

	<script type="text/javascript" src="main.js"></script>
	</body>
	</html>

	var numNodes = 50,
	nodes = [];

	var width = 800,
	height = 400,
	r = 20;

	for (var k = 0; k < numNodes; k += 1) {
	nodes.push({
	num: k
	});
	}

	var force = d3.layout.force()
	.nodes(nodes)
	.gravity(0)
	.charge(-150)
	.size([width, height])
	.start();

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

	var colorScale = d3.scale.linear()
	.domain([0, height])
	.range(['#F8CA00', '#BD1550']);

	var circles = svg.selectAll('.node').data(nodes);

	circles.enter().append('circle').classed('node', true);
	circles.attr('r', r);
	circles.exit().remove();

	force.on('tick', function(e) {

	nodes.forEach(function(o) {
	var dy = (height - r) - o.y;
	o.y = (dy < 0) ? (height - r) : o.y + (dy / height);
	});

	circles
	.attr('cx', function(d) { return d.x; })
	.attr('cy', function(d) { return d.y; })
	.attr('fill', function(d) { return colorScale(d.y); });
	});