bor2com/index.html

## index.html
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
  .edge line {
    stroke-width : 0.27;
  }
  .vertex circle {
    stroke : black;
    stroke-width : 0.1;
    fill : white;
  }
</style>
</head>
<body>
<script>

  function getp(pname) {
    return function(d, i) {
      return d[pname];
    };
  }

  var gradStops = [
    { "offset" : "0%", "stop-color" : "gray" },
    { "offset" : "100%", "stop-color" : "black" } ];

  d3.json("ng.json", function(error, data) {
    if (error) {
      console.log(error);
    } else {
      var svg = d3.select("body").append("svg").attr("height", 600).attr("width", 600).attr("viewBox", "0 0 10 10");
      var view = svg;//.append("g").attr("transform", "scale(50)");

      // Graph transform
      var kick = new Array(data.length), next = [], dest = [];
      function addEdge(a, b) {
        next.push(kick[a]);
        kick[a] = dest.length;
        dest.push(b);
      }
      for (i = 0; i < kick.length; kick[i++] = -1) { }
      data.forEach(function(datum, from) {
        datum.a.forEach(function(to) {
          if (from < to) {
            addEdge(from, to);
            addEdge(to, from);
          }
        });
      });
      var edull = d3.range(~~(dest.length / 2));

      // Edges
      view.append("g").classed("edge", true).selectAll("line").data(edull).enter().append("line")
        .attr("x1", function(d, i) { return data[dest[i * 2]].x; })
        .attr("y1", function(d, i) { return data[dest[i * 2]].y; })
        .attr("x2", function(d, i) { return data[dest[i * 2 + 1]].x; })
        .attr("y2", function(d, i) { return data[dest[i * 2 + 1]].y; })
        .attr("stroke", function(d, i) { return "url(#grad" + i + ")"; })
        .attr("class", function(d, i) { return "edge" + i; });

      // Gradients
      var defs = svg.append("defs");
      defs.selectAll("linearGradient").data(edull).enter().append("svg:linearGradient")
        .attr("gradientUnits", "userSpaceOnUse")
        .attr("id", function(d, i) { return "grad" + i; })
        .attr("class", function(d, i) { return "edge" + i; })
        .attr("x1", function(d, i) { return data[dest[i * 2]].x; })
        .attr("y1", function(d, i) { return data[dest[i * 2]].y; })
        .attr("x2", function(d, i) { return data[dest[i * 2 + 1]].x; })
        .attr("y2", function(d, i) { return data[dest[i * 2 + 1]].y; })
        .selectAll("stop").data(gradStops).enter().append("stop")
          .attr("offset", getp("offset"))
          .style("stop-color", getp("stop-color"));


      // Vertices

      var drag = d3.behavior.drag().on("drag", function(d, i){
        d.x += d3.event.dx;
        d.y += d3.event.dy;
        for (j = kick[i]; j >= 0; j = next[j]) {
          var edge = d3.selectAll(".edge" + ~~(j / 2));
          if (i > dest[j]) {
            edge.attr("x1", d.x).attr("y1", d.y);
          } else {
            edge.attr("x2", d.x).attr("y2", d.y);
          }
        }
        d3.select("#vertex" + i).attr("cx", d.x).attr("cy", d.y);
      });

      view.append("g").classed("vertex", true).selectAll("circle").data(data).enter().append("circle")
        .attr("cx", getp("x"))
        .attr("cy", getp("y"))
        .attr("r", 0.45)
        .attr("id", function(d, i) { return "vertex" + i; })
        .call(drag);
    }
  });
</script></body></html>

## ng.json
[
  {
    "x" : 2,
    "y" : 1,
    "a" : [ 1, 2 ]
  },
  {
    "x" : 1,
    "y" : 3,
    "a" : [ 0 ]
  },
  {
    "x" : 4,
    "y" : 3,
    "a" : [ 0, 3, 4 ]
  },
  {
    "x" : 7,
    "y" : 2,
    "a" : [ 2, 4 ]
  },
  {
    "x" : 7,
    "y" : 5,
    "a" : [ 2, 3 ]
  }
]
	<!DOCTYPE html>
	<html><head>
	<meta charset="UTF-8">
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>
	.edge line {
	stroke-width : 0.27;
	}
	.vertex circle {
	stroke : black;
	stroke-width : 0.1;
	fill : white;
	}
	</style>
	</head>
	<body>
	<script>

	function getp(pname) {
	return function(d, i) {
	return d[pname];
	};
	}

	var gradStops = [
	{ "offset" : "0%", "stop-color" : "gray" },
	{ "offset" : "100%", "stop-color" : "black" } ];

	d3.json("ng.json", function(error, data) {
	if (error) {
	console.log(error);
	} else {
	var svg = d3.select("body").append("svg").attr("height", 600).attr("width", 600).attr("viewBox", "0 0 10 10");
	var view = svg;//.append("g").attr("transform", "scale(50)");

	// Graph transform
	var kick = new Array(data.length), next = [], dest = [];
	function addEdge(a, b) {
	next.push(kick[a]);
	kick[a] = dest.length;
	dest.push(b);
	}
	for (i = 0; i < kick.length; kick[i++] = -1) { }
	data.forEach(function(datum, from) {
	datum.a.forEach(function(to) {
	if (from < to) {
	addEdge(from, to);
	addEdge(to, from);
	}
	});
	});
	var edull = d3.range(~~(dest.length / 2));

	// Edges
	view.append("g").classed("edge", true).selectAll("line").data(edull).enter().append("line")
	.attr("x1", function(d, i) { return data[dest[i * 2]].x; })
	.attr("y1", function(d, i) { return data[dest[i * 2]].y; })
	.attr("x2", function(d, i) { return data[dest[i * 2 + 1]].x; })
	.attr("y2", function(d, i) { return data[dest[i * 2 + 1]].y; })
	.attr("stroke", function(d, i) { return "url(#grad" + i + ")"; })
	.attr("class", function(d, i) { return "edge" + i; });

	// Gradients
	var defs = svg.append("defs");
	defs.selectAll("linearGradient").data(edull).enter().append("svg:linearGradient")
	.attr("gradientUnits", "userSpaceOnUse")
	.attr("id", function(d, i) { return "grad" + i; })
	.attr("class", function(d, i) { return "edge" + i; })
	.attr("x1", function(d, i) { return data[dest[i * 2]].x; })
	.attr("y1", function(d, i) { return data[dest[i * 2]].y; })
	.attr("x2", function(d, i) { return data[dest[i * 2 + 1]].x; })
	.attr("y2", function(d, i) { return data[dest[i * 2 + 1]].y; })
	.selectAll("stop").data(gradStops).enter().append("stop")
	.attr("offset", getp("offset"))
	.style("stop-color", getp("stop-color"));


	// Vertices

	var drag = d3.behavior.drag().on("drag", function(d, i){
	d.x += d3.event.dx;
	d.y += d3.event.dy;
	for (j = kick[i]; j >= 0; j = next[j]) {
	var edge = d3.selectAll(".edge" + ~~(j / 2));
	if (i > dest[j]) {
	edge.attr("x1", d.x).attr("y1", d.y);
	} else {
	edge.attr("x2", d.x).attr("y2", d.y);
	}
	}
	d3.select("#vertex" + i).attr("cx", d.x).attr("cy", d.y);
	});

	view.append("g").classed("vertex", true).selectAll("circle").data(data).enter().append("circle")
	.attr("cx", getp("x"))
	.attr("cy", getp("y"))
	.attr("r", 0.45)
	.attr("id", function(d, i) { return "vertex" + i; })
	.call(drag);
	}
	});
	</script></body></html>
	[
	{
	"x" : 2,
	"y" : 1,
	"a" : [ 1, 2 ]
	},
	{
	"x" : 1,
	"y" : 3,
	"a" : [ 0 ]
	},
	{
	"x" : 4,
	"y" : 3,
	"a" : [ 0, 3, 4 ]
	},
	{
	"x" : 7,
	"y" : 2,
	"a" : [ 2, 4 ]
	},
	{
	"x" : 7,
	"y" : 5,
	"a" : [ 2, 3 ]
	}
	]