GRAPH VISUALIZER

Report Bug

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Installation Steps
3. Running the Server
4. Plugins
   • JSON Data Source
   • Python Data Source
   • RDF Data Source
   • Simple Visualizer
   • Block Visualizer
5. Authors

About The Project

Graph Visualizer is a modular and extensible web platform designed to load and render graphs. It allows you to visualize complex data structures using plugin-based data sources and visual renderers. The backend is powered by Django, while the core logic is implemented in Python.

Built With

This project uses the following core technologies:

Getting Started

Before running the project, ensure you have Python 3.10+ installed.

Check your version:

python --version

Installation Steps

1. Clone the repository:

git clone https://github.com/lazarnagulov/graph-visualizer.git
cd graph-visualizer

2. Create and activate virtual environment (optional but recommended):

chmod +x venv.sh && ./venv.sh   # Linux / macOS
call venv.bat                   # Windows (use CMD, not integrated terminal) 

3. Install dependencies:

chmod +x install.sh && ./install.sh   # Linux / macOS
call install.bat                      # Windows (use CMD) 

Running the Server

Run the Django server:

chmod +x run.sh && ./run.sh     # Linux / macOS
call run.bat                    # Windows (use CMD)

Default server URL: 📍 http://localhost:8000

Plugins

Graph Visualizer uses a plugin-based architecture. There are two plugin types:

Data Source Plugins

These convert raw files into graph data.

• JSON
• Python
• RDF

Visualizer Plugins

These render the graph in different ways.

• Block Visualizer
• Simple Visualizer

JSON Data Source

The JSON plugin supports cyclic graph definitions using a custom referencing system.

🔗 Syntax Overview

Each node can include a unique ID field (default: "@id"). To create edges, use references with the prefix "&" followed by the target node's ID. Example:

[
  {
    "@id": "YWtvX292b19jaXRhc19jYXJfc2k=",
    "name": "Joe",
    "friends": ["&amFfc2FtX3N2ZXRza2lfbWVnYV9jYXI="]
  },
  {
    "@id": "amFfc2FtX3N2ZXRza2lfbWVnYV9jYXI=",
    "name": "Jane",
    "friends": ["&YWtvX292b19jaXRhc19jYXJfc2k=", "&bmFjZXNfbmlzdGFfemFuaW1saml2b19uYWNpX292ZGU="]
  },
  {
    "@id": "bmFjZXNfbmlzdGFfemFuaW1saml2b19uYWNpX292ZGU=",
    "name": "Bob",
    "friends": ["&YWtvX292b19jaXRhc19jYXJfc2k="]
  }
]

Important

References must be defined!

⚙️ Custom Configuration

Customize ID field and reference prefix:

json_loader init
json_loader --id <your_id_field>
json_loader --ref-prefix <your_prefix>

Or modify directly in config.json:

{
  "id-field": "@id",
  "ref-prefix": "&"
}

Python Data Source

The Python plugin generates graphs by analyzing the AST, representing functions and classes as nodes and calls as edges.

RDF Data Source

The RDF plugin supports loading RDF graphs in standard serialization formats, with primary support for Turtle syntax.

Parsing and handling of RDF data is performed using the rdflib library.

Important

No extended syntax or transformation is applied. Input must be valid RDF.

Simple Visualizer

Displays nodes arranged in a circular layout, labeled with their respective IDs. An example using a JSON data source from README is shown below:

Block Visualizer

Displays nodes in a structured, table-like format. An example using a JSON data source from README is shown below:

Authors:

• Lazar Nagulov
• Filip Tot
• Stefan Lekić
• Leon Jurić

(back to top)