Skip to content

Graphity is a modern web interface for graph exploration that enables students and researchers to create, visualize, and analyze graph-like structures in an intuitive manner.

Notifications You must be signed in to change notification settings

waiwasabi/hack2023

Repository files navigation

Instructions

Graph Creation

Node Tool - Left click on any empty space to create a disconnected node

Edge Tool - Left click on any two nodes to create an edge between them, or delete the edge if one already exists

Eraser Tool - Left click on any node to delete it.

Serialized Graph Generation

Trigger the Generate button to generate a serialized representation of the graph.

Graph Visualization

User input in the text editor is transformed into a JavaScript function, which can be used to run an algorithm on the graph in real-time. The user need not need include a class header, only the body of the following function:

function traverse(graph: Graph): void {
	/* User input goes here */
}

At each step the user would like to visualize, visit() should be called on the node they would like highlighted. Additional documentation can be found below.

Documentation

Graph object

The exposed graph variable is of type graphology.Graph. Please see https://graphology.github.io/ for relevant documentation.

class Graph {
	/* Returns the array of all Node objects in the graph */
	getNodes(): GraphNode[];

	/* Returns the array of all Edge object in the graph */
	getEdges(): DirectedEdge[];

	/* Adds a new GraphNode object into the Graph */
	addNode(node: GraphNode): void;

	/* Adds a new Edge object between two pre-existing nodes */
	addEdge(from: GraphNode, to: GraphNode): void;
}

Examples

Below are example use cases of the shell.

Basic Analysis

/* print the number of nodes in the graph */
console.log(graph.order);
/* print the order of a node in the graph */
console.log(graph.degreeWithoutSelfLoops("q"));

Traversal

/* Perform Breadth-First Search on the graph */
const visited = new Set();
const queue = ["q"];
while (queue.length) {
  const node = queue.shift();
  if (visited.has(node)) {
    continue;
  }
  visited.add(node);
  console.log(node);
  for (const neighbor of graph.neighbors(node)) {
    queue.push(neighbor);
  }
}
/* Perform Depth-First Search on the graph */
const visited = new Set();
  
function dfs(node) {
  visited.add(node);
  console.log("Visited node: " + node);

  graph.forEachNeighbor(node, (neighbor) => {
    if (!visited.has(neighbor)) {
      dfs(neighbor);
    }
  });
}

dfs("x");

About

Graphity is a modern web interface for graph exploration that enables students and researchers to create, visualize, and analyze graph-like structures in an intuitive manner.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •