Graph Visualization tool

🚀Website

Documentation

Supported Graph Types

1. Adjacency List

NOTE: All these are assuming bi-directional, the directed option should be pretty self explanatory

Options
The bidirectional option doesn't apply here

Unweighted
Format: ith line contains all the nodes i is connected to

Input	Result
2 3 1 3 4 1	1: (2, 1), (3, 1) 2: (1, 1), (3, 1) 3: (4, 1), (1, 1)

Weighted
Format: ith line contains [n1] [w1] [n2] [w2] ..., where n is the node its connected to and w is the weight

Input	Result
2 1 3 2 1 5 3 1 4 3 1 2	1: (2, 1), (3, 2) 2: (1, 5), (3, 1) 3: (4, 3), (1, 2)

2. Edge List

Options
The startingIndex option doesn't apply here

Unweighted
Format: For every line of input [a] [b], means there is a edge connecting node a to node b.

Input	Result
1 2 1 3 2 6 4 6 5 6	1: (2, 1), (3, 1) 2: (1, 1), (6, 1) 3: (1, 1) 4: (6, 1) 5: (6, 1)

Weighted
Format: For every line of input [a] [b] [w], means that there is a edge connecting node a to node b with weight w.

Input	Result
1 2 1 1 3 5 2 6 3 4 6 2 5 6 3	1: (2, 1), (3, 5) 2: (1, 1), (6, 3) 3: (1, 5) 4: (6, 2) 5: (6, 3)

3. Adjacency Matrix

Format: For every ith line, the nth number in that line (space separated) means there is a edge connecting node i to node n. If the graph is weighted, then the weight of the edge connecting node i to node n is the nth number at the ith row.

Options
Both the bidirectional and the weighted options doesn't apply here. If the graph is bidirectional, the matrix should be symmetrical

Input	Result
0 1 5 0 0 0 1 0 0 0 0 3 5 0 0 0 0 0 0 0 0 0 0 2 0 0 0 0 0 3 0 3 0 2 3 0	1: (2, 1), (3, 5) 2: (1, 1), (6, 3) 3: (1, 5) 4: (6, 2) 5: (6, 3)

Weight Representation

1. Thickness: If checked, this displays the weight of the graph through the thickness of the edges
2. Default Thickness: This slider value affects the thickness of the edges when the "thickness" checkbox is unchecked
3. Length: If checked, this allows the weight of the edges to be represented by the length of the edges (or more specifically, the Rest Length)
4. Default Length: This will affect the Length of the graph edges (if the Length checkbox is unchecked, this will directly affect the length of each edge, otherwise, this will be a multiplier to the weight for exaggeration of the weights)

Dev instructions

Build and Run

npm install
npm run dev

Build

npm run build

To Test

npm test

TODO

Actual stuff

• Help/Documentation box

Potential Features

• Support for multiple edges / self edges
• Figure out what to do when graph is too big for screen:
  • scale out OR
  • ability pan around OR
  • both

Bugs

• Weights not showing for AdjList graph
• Fix [Error] CanvasRenderingContext2D.save() has been called without a matching restore [Error] CanvasRenderingContext2D.save() has been called without a matching restore() too many times. Ignoring save().