algorithms-visualized/graph-editor.html at main · oscar-jiang/algorithms-visualized · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>


<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Graph Editor | Algorithms Visualized</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="styles/graph-page.css">
    <link rel="stylesheet" href="styles/header.css">
    <link rel="stylesheet" href="styles/general.css">
    <link rel="stylesheet" href="styles/sidebar.css">
  </head>

  <body>
    <div class="header">
        <div class="left-section">
            <p class="home-algorithms">Algorithms Visualized</p>
        </div>

        <div class="middle-section">
            <button class="base-button-header js-home-button">Home</button>
            <button class="base-button-header js-about-button">
              <div class="about-github-container">
                <span class="about-button-about-text">About</span>
                <img src="images/github.svg">
              </div>
            </button>
        </div>
    </div>

    <div class="sidebar">
        <button class="base-button-sidebar js-graph-editor-button"><img src="images/graph-editor-icon.svg"> Graph Editor</button>
        <button class="base-button-sidebar js-h-h-button"><img src="images/havel-hakimi-icon.svg">Havel-Hakimi Game</button>
        <button class="base-button-sidebar js-sorting-button"><img src="images/sorting-algo-icon.svg"> Sorting</button>
    </div>

    <div class="main-dashboard">
      <h1>Graph Editor</h1>

      <div class="center-canvas">
        <div class="canvas"><svg id="graph" width="600" height="400"></svg>
      </div>

        <div class="js-control-panel">
          <div class="control-panel-info-board">
            <h2 class="control-panel-heading">🔧Controls</h1>
            <p class="left-paragraph">Current drawing mode: ✏️Draw</p>
            <p class="js-control-panel-info-about-buttons">In ✏️Draw mode you can click anywhere on the canvas to place a node.</p>

            <p class="extra-info">You can play around with the nodes by moving them around, deleting them, or creating a edge between nodes. Use the buttons below to change modes. The current mode is displayed at the top.</p>
          </div>
          <div class="js-tool-buttons">
            <div class="js-tool-buttons-draw-buttons">
              <button class="base-control-tool-buttons base-draw-buttons js-draw-button">✏️Draw</button>
              <button class="base-control-tool-buttons base-draw-buttons js-delete-button">🗑️Delete</button>
              <button class="base-control-tool-buttons base-draw-buttons js-link-button">🔗Link</button>
            </div>

            <div class="js-tool-buttons-reset-button">
              <button class="base-control-tool-buttons js-reset-button">🔄 RESET CANVAS</button>
            </div>
          </div>
        </div>
      </div>

      <div class="graph-editor-about-section">
        <div>
          <h2 class="about-heading">👋About</h2>
        </div>
        <div>

        </div>
          <!-- <p class="right-paragraph">This undirected graph editor was created inspired by another graph editor I encounted in my data structures and algorithms class, UBC CPSC 221. Having created this project using JavaScript with the D3.js library, I aimed to challenge myself to improve my understanding of graphs and the Havel-Hakimi algorithm by extending this project into a game. Start graphing!!!</p> -->
          <p class="right-paragraph">
            This undirected graph editor was inspired by a tool I encountered in my data structures and algorithms class, UBC CPSC 221. Built using JavaScript and the D3.js library, it offers an interactive canvas where users can create, manipulate, and visualize graphs.
          </p>
          <p class="right-paragraph">
            The editor supports multiple modes: drawing new nodes, linking nodes with edges, and deleting elements. It allows you to drag nodes around for better layout control.
          </p>
          <p class="right-paragraph">
            Start graphing!
          </p>
      </div>
    </div>


    <script src="//d3js.org/d3.v7.min.js"></script>

    <script src="scripts/general/random-color.js"></script>
    <script src="scripts/general/header-sidebar-buttons.js"></script>

    <script src="scripts/graph-editor/canvas.js"></script>
    <script src="scripts/graph-editor/buttons.js"></script>
  </body>
</html>