topo sort example

chen0040 · chen0040 · commit f9e143c5819c · 2017-06-09T22:51:08.000+08:00
diff --git a/README.md b/README.md
@@ -208,7 +208,7 @@ for (var v = 0; v < g.V; ++v) {
 
 ### Topological Sort
 
-The sample code below show how to obtain the reverse post order of a topological sort in a directed acyclic graph:
+The sample code below show how to obtain the reverse post order of a topological sort in a directed acyclic graph (Link: [HTML DEMO](https://rawgit.com/chen0040/js-graph-algorithms/master/examples/example-topo-sort.html)):
 
 ```javascript
 var jsgraphs = require('js-graph-algorithms');
diff --git a/examples/example-connected-components.html b/examples/example-connected-components.html
@@ -1,15 +1,15 @@
 <html>
     <head>
         <title>
-            Graph
+            Connected Components on Graph
         </title>
         <script src="../third-party-libs/vis/vis.js" type="text/javascript"></script>
         <script src="../src/jsgraphs.js" type="text/javascript"></script>
         <link href="../third-party-libs/vis/vis.css" type="text/css" />
     </head>
     
     <body>
-        <h2>Graph</h2>
+        <h2>Connected Components on Graph</h2>
         <div id="mynetwork"></div>
         
         <script type="text/javascript">
diff --git a/examples/example-dfs.html b/examples/example-dfs.html
@@ -1,15 +1,15 @@
 <html>
     <head>
         <title>
-            Graph
+            Depth First Search on Graph
         </title>
         <script src="../third-party-libs/vis/vis.js" type="text/javascript"></script>
         <script src="../src/jsgraphs.js" type="text/javascript"></script>
         <link href="../third-party-libs/vis/vis.css" type="text/css" />
     </head>
     
     <body>
-        <h2>Graph</h2>
+        <h2>Depth First Search on Graph</h2>
         <div id="mynetwork"></div>
         
         <script type="text/javascript">
diff --git a/examples/example-topo-sort.html b/examples/example-topo-sort.html
@@ -0,0 +1,86 @@
+<html>
+    <head>
+        <title>
+            Topological Sort on Directed Acyclic Graph
+        </title>
+        <script src="../third-party-libs/vis/vis.js" type="text/javascript"></script>
+        <script src="../src/jsgraphs.js" type="text/javascript"></script>
+        <link href="../third-party-libs/vis/vis.css" type="text/css" />
+    </head>
+    
+    <body>
+        <h2>Topological Sort on Directed Acyclic Graph</h2>
+        <div id="mynetwork"></div>
+        
+        <script type="text/javascript">
+            (function(){
+                var g = new jsgraphs.DiGraph(7); // must be directed acyclic graph
+
+                g.addEdge(0, 5);
+                g.addEdge(0, 2);
+                g.addEdge(0, 1);
+                g.addEdge(3, 6);
+                g.addEdge(3, 5);
+                g.addEdge(3, 4);
+                g.addEdge(5, 4);
+                g.addEdge(6, 4);
+                g.addEdge(6, 0);
+                g.addEdge(3, 2);
+                g.addEdge(1, 4);
+
+                var ts = new jsgraphs.TopologicalSort(g);
+
+                var order = ts.order();
+                console.log(order); // display array which is the topological sort order
+                
+                var g_nodes = [];
+                var g_edges = [];
+                for(var v=0; v < g.V; ++v){
+                    g.node(v).label = 'Node ' + v; // assigned 'Node {v}' as label for node v
+                    g_nodes.push({
+                       id: v,
+                       label: g.node(v).label
+                    });
+                    
+                    var adj_v = g.adj(v);
+                    for(var i = 0; i < adj_v.length; ++i) {
+                        var w = adj_v[i];
+                        g_edges.push({
+                            from: v,
+                            to: w,
+                            arrows:'to'
+                        });
+                    };
+                }
+                
+                for(var i = 1; i < order.length; ++i) {
+                    var x1 = order[i-1];
+                    var x2 = order[i];
+                    g_edges.push({
+                        from: x1,
+                        to: x2,
+                        color: '#ff0000',
+                        arrows: 'to'
+                    })
+                }
+
+                console.log(g.V); // display 6, which is the number of vertices in g
+                console.log(g.adj(0)); // display [5, 1, 2], which is the adjacent list to vertex 0
+                
+                var nodes = new vis.DataSet(g_nodes);
+
+                // create an array with edges
+                var edges = new vis.DataSet(g_edges);
+
+                // create a network
+                var container = document.getElementById('mynetwork');
+                var data = {
+                    nodes: nodes,
+                    edges: edges
+                };
+                var options = {};
+                var network = new vis.Network(container, data, options);
+            })();
+        </script>
+    </body>
+</html>
