simpeg/SimPEG/Resources/Parallel/SystemGraph.html

<div id="%(uniqueID)s"></div>
<style>
.node {stroke: #fff; stroke-width: 1.5px;}
.link {stroke: #999; stroke-opacity: .6;}
</style>

<script>
var True = true;
var False = false;
var graph = %(JSONData)s;

require.config({paths: {d3: "http://d3js.org/d3.v3.min"}});
require(["d3"], function(d3) {

    var width = 800, height = 300;

    var color = d3.scale.category10();
    var domain = [0, 1, 2, 3];
    color.domain(domain);

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

    var svg = d3.select("#%(uniqueID)s").select("svg");
    if (svg.empty()) {
        svg = d3.select("#%(uniqueID)s").append("svg")
                    .attr("width", width)
                    .attr("height", height);
    };

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

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

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

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

    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>