Created SystemGraph subclass of the networkx.DiGraph class that knows how to render itself in the IPython Notebook using d3.js.

SimPEG/Resources/Parallel/SystemGraph.html

@@ -0,0 +1,66 @@
+<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>