risdenk/.block

## .block
license: gpl-3.0

## graphml.xml
<graphml xmlns="http://graphml.graphdrawing.org/xmlns"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns http://graphml.graphdrawing.org/xmlns/1.0/graphml.xsd">
<graph id="G" edgedefault="directed">
     <node id="kayne.coulter@enron.com">
           <data key="field">node</data>
           <data key="level">0</data>
           <data key="count(*)">0.0</data>
     </node>
     <node id="don.baughman@enron.com">
           <data key="field">to</data>
           <data key="level">1</data>
           <data key="count(*)">1.0</data>
     </node>
     <edge id="1"  source="kayne.coulter@enron.com"  target="don.baughman@enron.com"/>
     <node id="john.kinser@enron.com">
           <data key="field">to</data>
           <data key="level">1</data>
           <data key="count(*)">1.0</data>
    </node>
    <edge id="2"  source="kayne.coulter@enron.com"  target="john.kinser@enron.com"/>
    <node id="jay.wills@enron.com">
          <data key="field">to</data>
          <data key="level">1</data>
          <data key="count(*)">1.0</data>
    </node>
    <edge id="3"  source="kayne.coulter@enron.com"  target="jay.wills@enron.com"/>
</graph>
</graphml>

## index.html
<!DOCTYPE html>
<meta charset="utf-8"/>
<head>
<style>

.link {
  stroke: #ccc;
}

.node {
  fill: #000;
  stroke: #fff;
  stroke-width: 1.5px;
}

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

var width = 960,
    height = 500;

var radius = d3.scale.sqrt()
    .domain([0, 20000])
    .range([0, 20]);

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

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

d3.xml("graphml.xml", "application/xml", function(error, xml) {
  if (error) throw error;

  data = d3.select(xml);

  var nodes = data.selectAll("node")[0],
      links = data.selectAll("edge")[0].map(function(d) {return {source: nodes.find(function(elm) {return elm.id == d.attributes.source.nodeValue}), target: nodes.find(function(elm) {return elm.id == d.attributes.target.nodeValue})}}),
      root = nodes[0];

  console.log(nodes);
  console.log(links);
  console.log(root);

  root.x = width / 2;
  root.y = height / 2;
  root.fixed = true;

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

  var link = svg.selectAll(".link")
      .data(links)
    .enter().append("line")
      .attr("class", "link");

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

  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; });
  });
});

</script>
</body>
</html>
	<graphml xmlns="http://graphml.graphdrawing.org/xmlns"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns http://graphml.graphdrawing.org/xmlns/1.0/graphml.xsd">
	<graph id="G" edgedefault="directed">
	<node id="kayne.coulter@enron.com">
	<data key="field">node</data>
	<data key="level">0</data>
	<data key="count(*)">0.0</data>
	</node>
	<node id="don.baughman@enron.com">
	<data key="field">to</data>
	<data key="level">1</data>
	<data key="count(*)">1.0</data>
	</node>
	<edge id="1" source="kayne.coulter@enron.com" target="don.baughman@enron.com"/>
	<node id="john.kinser@enron.com">
	<data key="field">to</data>
	<data key="level">1</data>
	<data key="count(*)">1.0</data>
	</node>
	<edge id="2" source="kayne.coulter@enron.com" target="john.kinser@enron.com"/>
	<node id="jay.wills@enron.com">
	<data key="field">to</data>
	<data key="level">1</data>
	<data key="count(*)">1.0</data>
	</node>
	<edge id="3" source="kayne.coulter@enron.com" target="jay.wills@enron.com"/>
	</graph>
	</graphml>
	<!DOCTYPE html>
	<meta charset="utf-8"/>
	<head>
	<style>

	.link {
	stroke: #ccc;
	}

	.node {
	fill: #000;
	stroke: #fff;
	stroke-width: 1.5px;
	}

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

	var width = 960,
	height = 500;

	var radius = d3.scale.sqrt()
	.domain([0, 20000])
	.range([0, 20]);

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

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

	d3.xml("graphml.xml", "application/xml", function(error, xml) {
	if (error) throw error;

	data = d3.select(xml);

	var nodes = data.selectAll("node")[0],
	links = data.selectAll("edge")[0].map(function(d) {return {source: nodes.find(function(elm) {return elm.id == d.attributes.source.nodeValue}), target: nodes.find(function(elm) {return elm.id == d.attributes.target.nodeValue})}}),
	root = nodes[0];

	console.log(nodes);
	console.log(links);
	console.log(root);

	root.x = width / 2;
	root.y = height / 2;
	root.fixed = true;

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

	var link = svg.selectAll(".link")
	.data(links)
	.enter().append("line")
	.attr("class", "link");

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

	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; });
	});
	});

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