don-smith/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Links being severed over time inside of a convex hull

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node, .link {
  stroke: #bbb;
  stroke-width: 1.5px;
  stroke-opacity: 0.6;
}

.hull {
  opacity: 0.6;
  fill: steelblue;
  stroke: steelblue;
  stroke-width: 32px;
  stroke-linejoin: round;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var randNodeX = d3.random.normal(width / 2, 60),
    randNodeY = d3.random.normal(height / 2, 60),
    randLink = function() { return Math.floor(Math.random() * 30) },
    nodes = d3.range(30).map(
      function(val, idx) {
        return { name: idx, color: idx % 20, x: randNodeX(), y: randNodeY() };
      }),
    links = d3.range(30).map(
      function(val, idx) {
        var source = randLink();
        var target = randLink();
        return {
          source: nodes[source].name,
          target: nodes[target].name,
          value: 1 };
      });

var severs = [
  [0, 500],
  [10, 1000],
  [20, 2000],
  [30, 3000],
  [40, 4000],
  [50, 5000],
  [60, 6000],
  [70, 7000],
  [80, 8000],
  [90, 9000]
];

var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-40)
    .gravity(0.1)
    .linkDistance(40)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var hull = svg.append("path")
    .attr("class", "hull");

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

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

var node = svg.selectAll(".node")
    .data(nodes)
  .enter().append("circle")
    .attr("class", "node")
    .attr("r", 5)
    .style("fill", function(d) { return color(d.color); })
    .call(force.drag);

node.append("title")
    .text(function(d) { return d.name; });

force.on("tick", function() {
  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; });

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

  hull.datum(
    d3.geom.hull(
      force.nodes().map(function(d) { return [d.x, d.y]; })
    )
  ).attr("d", function(d) { return "M" + d.join("L") + "Z"; });
});

function update() {
  force
    .nodes(nodes)
    .links(links);
  node.data(nodes)
   .exit().remove();
  link.data(links)
    .exit().remove();
};

severs.forEach(function(sever) {
  var name = sever[0];
  var time = sever[1];

  setTimeout(function() {
    links = links.filter(function(d) {
      return d.target.name !== name
          && d.source.name !== name;
    });

    update();
    force.start();
  }, time);
});

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.node, .link {
	stroke: #bbb;
	stroke-width: 1.5px;
	stroke-opacity: 0.6;
	}

	.hull {
	opacity: 0.6;
	fill: steelblue;
	stroke: steelblue;
	stroke-width: 32px;
	stroke-linejoin: round;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var randNodeX = d3.random.normal(width / 2, 60),
	randNodeY = d3.random.normal(height / 2, 60),
	randLink = function() { return Math.floor(Math.random() * 30) },
	nodes = d3.range(30).map(
	function(val, idx) {
	return { name: idx, color: idx % 20, x: randNodeX(), y: randNodeY() };
	}),
	links = d3.range(30).map(
	function(val, idx) {
	var source = randLink();
	var target = randLink();
	return {
	source: nodes[source].name,
	target: nodes[target].name,
	value: 1 };
	});

	var severs = [
	[0, 500],
	[10, 1000],
	[20, 2000],
	[30, 3000],
	[40, 4000],
	[50, 5000],
	[60, 6000],
	[70, 7000],
	[80, 8000],
	[90, 9000]
	];

	var width = 960,
	height = 500;

	var color = d3.scale.category20();

	var force = d3.layout.force()
	.charge(-40)
	.gravity(0.1)
	.linkDistance(40)
	.size([width, height]);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var hull = svg.append("path")
	.attr("class", "hull");

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

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

	var node = svg.selectAll(".node")
	.data(nodes)
	.enter().append("circle")
	.attr("class", "node")
	.attr("r", 5)
	.style("fill", function(d) { return color(d.color); })
	.call(force.drag);

	node.append("title")
	.text(function(d) { return d.name; });

	force.on("tick", function() {
	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; });

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

	hull.datum(
	d3.geom.hull(
	force.nodes().map(function(d) { return [d.x, d.y]; })
	)
	).attr("d", function(d) { return "M" + d.join("L") + "Z"; });
	});

	function update() {
	force
	.nodes(nodes)
	.links(links);
	node.data(nodes)
	.exit().remove();
	link.data(links)
	.exit().remove();
	};

	severs.forEach(function(sever) {
	var name = sever[0];
	var time = sever[1];

	setTimeout(function() {
	links = links.filter(function(d) {
	return d.target.name !== name
	&& d.source.name !== name;
	});

	update();
	force.start();
	}, time);
	});

	</script>