first commit

.gitignore

@@ -0,0 +1 @@
+.idea

README.md

@@ -0,0 +1,2 @@
+# Algorithm Visualizer
+http://parkjs814.github.io/AlgorithmVisualizer

algorithm/category.json

@@ -0,0 +1,9 @@
+{
+  "graph_search": {
+    "name": "Graph Search",
+    "list": {
+      "dfs": "DFS",
+      "bfs": "BFS"
+    }
+  }
+}

algorithm/graph_search/dfs/config.json

@@ -0,0 +1,27 @@
+{
+  "def": "Depth-first search (DFS) is an algorithm for traversing or searching tree or graph data structures. One starts at the root (selecting some arbitrary node as the root in the case of a graph) and explores as far as possible along each branch before backtracking.",
+  "apps": [
+    "Finding connected components.",
+    "Topological sorting.",
+    "Finding 2-(edge or vertex)-connected components.",
+    "Finding 3-(edge or vertex)-connected components.",
+    "Finding the bridges of a graph.",
+    "Generating words in order to plot the Limit Set of a Group.",
+    "Finding strongly connected components.",
+    "Planarity testing",
+    "Solving puzzles with only one solution, such as mazes. (DFS can be adapted to find all solutions to a maze by only including nodes on the current path in the visited set.)",
+    "Maze generation may use a randomized depth-first search.",
+    "Finding biconnectivity in graphs."
+  ],
+  "cpx": {
+    "time": "O(|E|)",
+    "space": "O(|V|)"
+  },
+  "refs": [
+    "https://en.wikipedia.org/wiki/Depth-first_search"
+  ],
+  "files": {
+    "sample1": "Visiting all connected nodes without making any circuit",
+    "sample2": "Going through all paths without making any circuit"
+  }
+}

algorithm/graph_search/dfs/sample1/code.js

@@ -0,0 +1,19 @@
+var D; // D[i] indicates whether the i-th node is discovered or not
+
+function DFS(v, p) { // v = current node, p = previous node
+    tracer.visit(v, p);
+    D[v] = true; // label v as discovered
+    G[v].forEach(function (w) { // G[v] contains edges starting from v
+        if (!D[w]) { // if w is not labeled as discovered
+            DFS(w, v); // recursively call DFS
+        }
+    });
+    tracer.leave(v, p);
+}
+
+for (var i = 0; i < G.length; i++) { // start from every node
+    tracer.print('start from ' + i);
+    D = new Array(G.length);
+    DFS(i);
+    tracer.clear();
+}

algorithm/graph_search/dfs/sample1/data.js

@@ -0,0 +1,9 @@
+var tracer = new GraphTracer();
+var G = [
+    [3, 4], // connected nodes from node 0
+    [2, 4],
+    [1],
+    [1],
+    [2]
+];
+tracer.setData(G);

algorithm/graph_search/dfs/sample2/code.js

@@ -0,0 +1,20 @@
+var D; // D[i] indicates whether the i-th node is discovered or not
+
+function DFS(v, p) { // v = current node, p = previous node
+    tracer.visit(v, p);
+    D[v] = true; // label v as discovered
+    G[v].forEach(function (w) { // G[v] contains edges starting from v
+        if (!D[w]) { // if w is not labeled as discovered
+            DFS(w, v); // recursively call DFS
+        }
+    });
+    D[v] = false; // label v as undiscovered
+    tracer.leave(v, p);
+}
+
+for (var i = 0; i < G.length; i++) { // start from every node
+    tracer.print('start from ' + i);
+    D = new Array(G.length);
+    DFS(i);
+    tracer.clear();
+}

algorithm/graph_search/dfs/sample2/data.js

@@ -0,0 +1,9 @@
+var tracer = new GraphTracer();
+var G = [
+    [1,2,3,4], // connected nodes from node 0
+    [0,2,3,4],
+    [0,1,3,4],
+    [0,1,2,4],
+    [0,1,2,3]
+];
+tracer.setData(G);

css/stylesheet.css

@@ -0,0 +1,234 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+body {
+    background: rgb(60, 63, 65);
+    font-family: 'Roboto', sans-serif;
+    color: rgb(187, 187, 187);
+}
+
+a {
+    text-decoration: none;
+}
+
+* {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+    color: inherit;
+}
+
+button {
+    border: none;
+    height: 100%;
+    padding: 0 12px;
+    margin: 0;
+    background: none;
+    font-size: 12px;
+    outline: none;
+}
+
+button:hover {
+    background: rgba(0, 0, 0, .15);
+}
+
+button.active {
+    background: rgb(44, 44, 44);
+}
+
+button.indent {
+    padding-left: 24px;
+}
+
+.divider {
+    position: absolute !important;
+    z-index: 3;
+}
+
+.divider.vertical {
+    cursor: ew-resize;
+}
+
+.divider.horizontal {
+    cursor: ns-resize;
+}
+
+nav {
+    height: 30px;
+    width: 100%;
+    padding: 0 16px;
+}
+
+nav h3 {
+    display: inline;
+}
+
+.nav-arrow {
+    padding: 0 4px;
+}
+
+.buttons {
+    float: right;
+    height: 100%;
+}
+
+.sidemenu {
+    top: 30px;
+    bottom: 0;
+    left: 0;
+    right: 85%;
+    visibility: hidden;
+}
+
+.sidemenu.active {
+    visibility: visible;
+}
+
+#list > button {
+    display: block;
+    width: 100%;
+    height: 30px;
+    text-align: left;
+}
+
+.workspace {
+    position: absolute;
+    top: 30px;
+    bottom: 0;
+    left: 15%;
+    right: 0;
+}
+
+nav,
+section {
+    position: absolute;
+    border: 1px solid rgb(44, 44, 44);
+    box-sizing: border-box;
+}
+
+.viewer_container,
+.editor_container {
+    position: absolute;
+}
+
+.viewer_container {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 50%;
+}
+
+.editor_container {
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    right: 0;
+}
+
+.visualize_container {
+    top: 0;
+    bottom: 50%;
+    left: 0;
+    right: 0;
+}
+
+.tab_container {
+    top: 50%;
+    bottom: 30px;
+    left: 0;
+    right: 0;
+}
+
+.tab {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: scroll;
+    visibility: hidden;
+}
+
+.tab > .wrapper {
+    padding: 16px;
+    box-sizing: border-box;
+}
+
+.tab.active {
+    visibility: visible;
+}
+
+.tab_bar {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 30px;
+}
+
+.files_bar {
+    left: 0;
+    right: 0;
+    height: 30px;
+}
+
+.explanation_container {
+    top: 30px;
+    left: 0;
+    right: 0;
+    height: 30px;
+    background: rgb(44, 44, 44);
+    padding: 0 8px;
+    line-height: 30px;
+    font-size: 12px;
+}
+
+.data_container {
+    top: 60px;
+    bottom: 70%;
+    left: 0;
+    right: 0;
+}
+
+.code_container {
+    left: 0;
+    top: 30%;
+    right: 0;
+    bottom: 0;
+}
+
+pre {
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    border: 1px solid rgb(81, 81, 81);
+    background: rgb(43, 43, 43);
+    outline: none;
+    resize: none;
+}
+
+.toast_container {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 12px;
+    z-index: 2;
+}
+
+.toast {
+    width: 280px;
+    border: 1px solid;
+    border-radius: 4px;
+    padding: 16px;
+    margin: 16px;
+}
+
+.toast.error {
+    border-color: rgb(150, 0, 0);
+    background: rgba(120, 0, 0, .8);
+}