Konigsberg

A 3D-Graph Drawing and Visualization Tool

Built with A-Frame, an open-source web framework for building VR experiences.

Introduction

Graphs are formally defined as a series of of objects that share relations. These objects are properly described as nodes, and the relationships depicting these nodes are called edges, or lines. Graphs are commonly used for information visualization, with extensive applications in cartography, linguistics, social network analysis, crime scene investigation analysis, neural networking, et cetera. The name of the project is a reference to the problem of the Seven Bridges of Konigsberg. The problem was to find the path through the city that would cross each of the bridges once, and only once. In 1736, Leonhard Euler concluded that there is no answer to the problem. His analysis and ideas in his paper, as well as Alexandre-Theophile Vandermonde's paper on the knight problem, were the early beginnings of graph theory and topology. Konigsberg is the historical name for the present-day city of Kaliningrad, Russia.

Demo available at https://zysberg.github.io/Demos/Konigsberg/index.html

Controls

W - Forward

S - Backward

A - Pan Left

D - Pan Right

Left-click-hold & drag - Rotate Camera

Building an Edge between Nodes X and Y

Hover over X, it should be white. Click on X; it should have highlighted green. Repeat for Y.

Deleting a Node

Click on the delete button. When you hover over a node, it should highlight red. Click on the node to delete it.

Deleting an Edge

Click on the Delete Edge button, white boxes should appear through each edge. Hover over the one you want to delete; it should turn red, then click.

Future Updates

• Deleting specific edges
• Name-tagging for each node
• Animations depicting directionality of edges
• Draggable re-adjusting for nodes
• Implementing self-loops and k-hypergraphs
• Undo and Redo buttons
• Highlighting for shortest-path tree and minimum-spanning trees
• Implementing Colouring

Built With

• css
• html
• javascript