Directed Graph Examples

This page demonstrates examples of generating interactive directed graphs.

Example 1: A Simple Directed Graph with Arrows

This example shows a basic directed graph where edge directions are indicated by arrows.

Simple Directed Graph

The Python code to generate the graph data:

import networkx as nx

DG = nx.DiGraph()
DG.add_edges_from(
    [
        (1, 2, {"label": "Rel A"}),
        (1, 3, {"label": "Rel B"}),
        (2, 4, {"label": "Rel C"}),
        (3, 4, {"label": "Rel D"}),
        (4, 1, {"label": "Rel E (Cycle)"}),  # Creates a cycle
    ]
)

# Add some node properties
for i in DG.nodes():
    DG.nodes[i]["label"] = f"DNode {i}"
    DG.nodes[i]["title"] = f"This is directed node {i}"
    if i == 1:
        DG.nodes[i]["color"] = "lightcoral"
        DG.nodes[i]["shape"] = "star"
    if i == 4:
        DG.nodes[i]["color"] = "lightgreen"

The vis_options used (as a Python dictionary in the generation script):

{
    "edges": {
        "arrows": {
            "to": {"enabled": True, "scaleFactor": 1, "type": "arrow"}
        },
        "font": {"align": "middle", "size": 10},
        "smooth": {"enabled": True, "type": "curvedCW", "roundness": 0.2}
    },
    "nodes": {
        "font": {"size": 14}
    },
    "physics": {"enabled": True},
    "layout": {
        "hierarchical": False,
        "randomSeed": 789
    },
    "interaction": {"navigationButtons": True, "hover": True}
}

---

Example 2: Course Prerequisites (Hierarchical Layout)

This example demonstrates a directed graph representing course prerequisites, using a hierarchical layout to show dependencies.

Course Prerequisites

The Python code to generate the graph data:

import networkx as nx

DG = nx.DiGraph()
courses = {
    "CS101": {
        "label": "Intro to CS",
        "level": 1,
        "title": "Fundamentals of Computer Science",
    },
    "CS102": {
        "label": "Data Structures",
        "level": 2,
        "title": "Basic Data Structures and Algorithms",
    },
    "MA101": {
        "label": "Calculus I",
        "level": 1,
        "title": "Differential Calculus",
    },
    "CS201": {
        "label": "Algorithms",
        "level": 3,
        "title": "Advanced Algorithm Design",
    },
    "CS202": {
        "label": "Operating Systems",
        "level": 3,
        "title": "Principles of Operating Systems",
    },
    "CS301": {
        "label": "Compilers",
        "level": 4,
        "title": "Compiler Construction",
    },
}
for course_id, attrs in courses.items():
    DG.add_node(course_id, **attrs)

# Edges: (prerequisite, course)
DG.add_edges_from(
    [
        ("CS101", "CS102"),
        ("MA101", "CS102"),
        ("CS102", "CS201"),
        ("CS102", "CS202"),
        ("CS201", "CS301"),
        ("CS202", "CS301"),
    ]
)

The vis_options used (as a Python dictionary in the generation script):

{
    "nodes": {
        "shape": "box",
        "font": {"size": 12, "face": "Arial"},
        "margin": 10
    },
    "edges": {
        "arrows": {"to": {"enabled": True, "scaleFactor": 0.8, "type": "arrow"}},
        "smooth": {"enabled": True, "type": "cubicBezier", "forceDirection": "vertical", "roundness": 0.4}
    },
    "layout": {
        "hierarchical": {
            "enabled": True,
            "direction": "UD",
            "sortMethod": "directed",
            "levelSeparation": 150,
            "nodeSpacing": 120
        }
    },
    "physics": {"enabled": False},
    "interaction": {"hover": True, "dragNodes": False, "zoomView": True, "dragView": True}
}