Skip to content

GRAPHI is a web-based tool for visualizing graphs using custom D3.js layouts. It allows users to upload adjacency matrices, analyze graph types, and select from layout options like Grid, Chord, Sugiyama, and Tree structures.

Notifications You must be signed in to change notification settings

areeba0/graphe_layout_using_d3.js

Repository files navigation

GRAPHI - Graph Layout Website

Overview

GRAPHI is a software for visualizing graph layouts using custom algorithms in D3.js. It enables users to upload an adjacency matrix, classify the graph type, and visualize it using various layout options tailored to the graph's characteristics.

graphi_homepage

The project is divided into several components, each handling a different type of graph layout. This README overviews the project structure, setup instructions, and a brief component description.

Technologies

  • html
  • CSS
  • javascript
  • D3.js

Features

  • File Upload: Upload adjacency matrix files for graph visualization. grAPHI_fileupload

  • Graph Analysis: Identify cycles, check connectivity, and classify the graph as a General Graph, Directed Acyclic Graph (DAG), or a Tree.

  • Custom Layouts: -General Graph: Grid Layout, Chord Diagram. -DAG: Sugiyama Layout, Radial Sugiyama Layout. -Tree: Rheingold Tilford Layout, Icicle Layout.

General Graph

  • Grid Layout: Nodes are arranged in a grid based on chosen criteria such as alphabetical order or node degree. grid

  • Chord Diagram: Nodes are arranged in a circular layout with edges represented as SVG curves. chord1

Directed Acyclic Graph (DAG)

  • Sugiyama Layout: Nodes are layered based on the heuristic discussed in class, ignoring crossing minimization. sg

  • Radial Sugiyama Layout: Similar to Sugiyama Layout but with nodes arranged radially. Screenshot 2024-06-16 181304

Tree

  • Rheingold Tilford Layout: Bottom-up traversal using Depth First Search, with subtrees merged as discussed in class. RT

  • Icicle Layout: Nodes are arranged in an icicle plot with equal-sized leaf nodes. ICICDE

About

GRAPHI is a web-based tool for visualizing graphs using custom D3.js layouts. It allows users to upload adjacency matrices, analyze graph types, and select from layout options like Grid, Chord, Sugiyama, and Tree structures.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages