GraphAlgorithmsVisualization/index.html at master · akench/GraphAlgorithmsVisualization · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Graph Algorithms Visualization</title>
    <link rel="stylesheet" type="text/css" href="static/index.css">
</head>

<body>
    <div class="row">
        <div class="column">
            <div>Format = src -> dst : weight</div>
            <button onclick="renderGraph()">Render Graph</button>
            <button onclick="prevState()">Back</button>
            <button onclick="nextState()">Next</button>
            <button onclick="playOrPause()">Play/Pause</button>
            <button onclick="showRandomGraph()">Generate random graph</button>


            <textarea id="graph-input" spellcheck="false"></textarea>

            <select id="algo-selector">
                <option value="dfs">DFS</option>
                <option value="bfs">BFS</option>
                <option value="dijkstra">Dijkstra</option>
                <option value="allPairsSP">All Pairs Shortest Path</option>
            </select>

            <div id="dfs" class="algo-input">
                <input type="text" placeholder="start node" id="start_node_dfs">
                <button onclick="runDFS()">Run DFS</button>
            </div>
            <div id="bfs" class="algo-input" style="display: none;">
                <input type="text" placeholder="start node" id="start_node_bfs">
                <button onclick="runBFS()">Run BFS</button>
            </div>
            <div id="dijkstra" class="algo-input" style="display: none;">
                <input type="text" placeholder="start node" id="start_node_dijkstra">
                <button onclick="runDijkstra()">Run Dijkstra</button>
            </div>
            <div id="allPairsSP" class="algo-input" style="display: none;">
                <button onclick="runAllPairsSP()">Run All Pairs Shortest Path</button>
            </div>
        </div>

        <div class="column" id="algo-info-column">
            <div id="queue"></div>
            <div id="distances-table-container"></div>
            <div id="matrix-container"></div>
            <div id="min-heap-container"></div>
            <br />
            <pre id="log"></pre>
        </div>


        <div class="column" id="graph-column">
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
    <script src="https://d3js.org/d3-selection-multi.v1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/heap-js@1.4.1/dist/heap-js.umd.js"></script>
    <script src="scripts/staticValues.js"></script>
    <script src="scripts/parseInput.js"></script>
    <script src="scripts/d3/graphDisplay.js"></script>
    <script src="scripts/d3/heapDisplay.js"></script>
    <script src="scripts/index.js"></script>
    <script src="scripts/algos/MinHeap.js"></script>
    <script src="scripts/algos/dfs.js"></script>
    <script src="scripts/algos/bfs.js"></script>
    <script src="scripts/algos/dijkstra.js"></script>
    <script src="scripts/algos/allPairsSP.js"></script>
    <script src="scripts/randomGraph.js"></script>
</body>

</html>