DG Comics is a novel comic authoring tool for dynamic graphs that allows users to semi-automatically build the comic and annotate it. The tool uses a hierarchical clustering algorithm that we newly developed for segmenting consecutive snapshots of the dynamic graph while preserving their chronological order. It also provides rich information on both individuals and communities extracted from dynamic graphs in multiple views, where users can explore dynamic graphs and choose what to tell in comics.

• You can add your own processed data to the directory backend/data/<your data name>
• Use data_processing.ipynb to check our preprocessing pipeline
• Your processed data should contains the following files:

• The formating details of each file can be found in the following sections

• The file graph.json contains the information of the dynamic graph: a list of node-link data of the graph at each timestamp. Each element of the list should contain:

• The Node object should contains

For more details on the category feature, please check our academic paper and the file backend/data/vispub-coauthor/graph.json

• The Link object should contains

The file backend/data/vispub-coauthor/hierarchy_overview.json responsible for creating the default dendrogram in the system that computes the hierarchical clustering of the whole graphs. The file consists of the following HierarchyNode structure:

The file backend/data/vispub-coauthor/distance_matrix.json simply contains the distance matrix between all pairs of the graphs.

The file backend/data/vispub-coauthor/comm_lists.json contains the lists of communities of each graph. The file should comply the following format

{
    "<timestamp>": {
        "<timestamp>-<communinty id>": [
            "A list of nodes' label"
        ]
    }
}

The file backend/data/vispub-coauthor/partition_lists.json contains the community that a node is a member of in each graph. The purpose of this file is similar to that of community list. It acts as a reverse mapping of comm_lists. The file should comply the following format

{
    "<timestamp>": {
        "Node's label": "Community ID"
    }
}

The file backend/data/vispub-coauthor/sankey.json contains the community transition between two consecutive timestamp. The sankey data itself is a graph consisting of two objects: SankeyNode and SankeyLink.

• The SankeyNode object:

• The SankeyLink object:

The file backend/data/vispub-coauthor/table.json contains the nodes' features from each graph. The file should comply the following format

{
    "Node's id": [
        {
            // Nodes' features following the `Node` structure,
            "time": "timestamp"
        }
    ]
}

The specification of the Node object can be found in the aforementioned section.

In DG Comics, we support two level of neighboring graph:

• Level 1 (ego network): consists of the main character node and its neighrboring nodes and the connecting links.
• Level 1.5 (neighbor network): same as the previous level but links among the neighboring nodes are added.

At each level we calculated the dissimilarity of each main character's neighboring network, resulting in two files:

• backend/data/vispub-coauthor/dissim.json:

{
    "metadata": [{
        "max": "The maximum dissimilarity (float)",
        "min": "The minimum dissimilarity (float)"
    }],
    "Node's label": [
        "List of node's dissimilarity information `NodeDissim`"
    ],
}

NodeDissim should contains

• backend/data/vispub-coauthor/year_lists.json:

{
    "from": "Timestamp to compare (int)",
    "to": "Timestamp to compare (int)",
    "distance": {
        "Node's id": "Distance (float)",
    }
}

• npm 8.11+

npm install 

npm run dev

This command will start a web service on port 3000 for development. You can access DG Comics at http://localhost:3000/

• Python 3.9+
• gcc 6.5+

cd backend

• Activate your virtual environment, i.e., virtualenv or conda (not required)
• Install all python dependencies with the following commands

python -m pip install -r requirements.txt
pip install pybind11

• To install the optimized version of data procressing, do the following

cd data
make

This will compiled the C++ implementation of the graph similarity algorithm in the paper.

• Type the following command to serve the backend API on the desired port

uvicorn main:app --reload --port [port]

• Refer to this link to install ollama

• Or (more preferably) install with docker with the following tutorial

• CPU only:

docker run -d -v ollama:/root/.ollama -p 11434:11434 --name ollama ollama/ollama

• With NVIDIA GPU (Remember to install the Nvidia container toolkit):

docker run -d --gpus=all -v ollama:/root/.ollama -p 11434:11434 --name ollama ollama/ollama

• If you want to run ollama with specific NVIDIA GPU:

docker run -d --gpus='"device=[gpu devices, e.g., 0,1,3 or all]"' -v ollama:/root/.ollama -p 11434:11434 --name ollama ollama/ollama

• Run the model with

docker exec -it ollama ollama run [model_name, e.g., mixtral]

• Create a .env file in the root directory of DG Comics and add the following lines

LLM_API_URL=[your LLM endpoint, usually http:localhost:11434]
LLM_MODEL_NAME=[your LLM model name, we use mixtral in our prototype]

• Run the front-end

npm run dev

• Install all dependencies:

npm install

• Build the website:

npm run build

• Start the service:

pm2 start "npm run deploy" --name "DGComics-Frontend"

• Firstly, install all dependencies in the same manner as above
• Run the server with out --reload option

pm2 start "uvicorn main:app --host 0.0.0.0 --port 4040" --name "DGComics-Backend"