jrgleason/data.json

## data.json
{
   "nodes":[
      {
         "name":"My Name",
         "title":"My Name",
         "id":"http://cdelflds01:7474/db/data/node/0"
      },
      {
         "nickname":"J.R.",
         "lastName":"Gleason",
         "firstName":"Jackie",
         "name":"Jackie Gleason",
         "title":"Jackie Gleason",
         "id":"http://cdelflds01:7474/db/data/node/1"
      }
   ],
   "links":[
      {
         "quality":10,
         "source":1,
         "target":0,
         "id":"http://cdelflds01:7474/db/data/relationship/0"
      }
   ]
}

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

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

var width = 800, height = 800;
// force layout setup
var force = d3.layout.force()
        .charge(-200).linkDistance(30).size([width, height]);

// setup svg div
var svg = d3.select("#graph").append("svg")
        .attr("width", "100%").attr("height", "100%")
        .attr("pointer-events", "all");

// load graph (nodes,links) json from /graph endpoint
d3.json("data.json", function(error, graph) {
    if (error) return;

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

    // render relationships as lines
    var link = svg.selectAll(".link")
            .data(graph.links).enter()
            .append("line")
            .attr("class", "link")
            .attr("stroke", "black");

    // render nodes as circles, css-class from label
    var node = svg.selectAll(".node")
            .data(graph.nodes).enter()
            .append("circle")
            .attr("r", 20)
            .attr("stroke", "black")
            .attr("fill", "white")
            .call(force.drag);
    // html title attribute for title node-attribute
    node.append("title")
            .text(function (d) { return d.title; })
            .attr("font-family", "sans-serif")
            .attr("font-size", "20px")
    // force feed algo ticks for coordinate computation
    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>
	{
	"nodes":[
	{
	"name":"My Name",
	"title":"My Name",
	"id":"http://cdelflds01:7474/db/data/node/0"
	},
	{
	"nickname":"J.R.",
	"lastName":"Gleason",
	"firstName":"Jackie",
	"name":"Jackie Gleason",
	"title":"Jackie Gleason",
	"id":"http://cdelflds01:7474/db/data/node/1"
	}
	],
	"links":[
	{
	"quality":10,
	"source":1,
	"target":0,
	"id":"http://cdelflds01:7474/db/data/relationship/0"
	}
	]
	}
	<!DOCTYPE html>
	<meta charset="utf-8">

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

	var width = 800, height = 800;
	// force layout setup
	var force = d3.layout.force()
	.charge(-200).linkDistance(30).size([width, height]);

	// setup svg div
	var svg = d3.select("#graph").append("svg")
	.attr("width", "100%").attr("height", "100%")
	.attr("pointer-events", "all");

	// load graph (nodes,links) json from /graph endpoint
	d3.json("data.json", function(error, graph) {
	if (error) return;

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

	// render relationships as lines
	var link = svg.selectAll(".link")
	.data(graph.links).enter()
	.append("line")
	.attr("class", "link")
	.attr("stroke", "black");

	// render nodes as circles, css-class from label
	var node = svg.selectAll(".node")
	.data(graph.nodes).enter()
	.append("circle")
	.attr("r", 20)
	.attr("stroke", "black")
	.attr("fill", "white")
	.call(force.drag);
	// html title attribute for title node-attribute
	node.append("title")
	.text(function (d) { return d.title; })
	.attr("font-family", "sans-serif")
	.attr("font-size", "20px")
	// force feed algo ticks for coordinate computation
	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>