GNN 101: Visual Learning of Graph Neural Networks in Your Web Browser

Yilin Lu,Chongwei Chen,Kexin Huang,Marinka Zitnik,Qianwen Wang
2024-11-27
Abstract:Graph Neural Networks (GNNs) have achieved significant success across various applications. However, their complex structures and inner workings can be challenging for non-AI experts to understand. To address this issue, we present \name, an educational visualization tool for interactive learning of GNNs. GNN 101 seamlessly integrates mathematical formulas with visualizations via multiple levels of abstraction, including a model overview, layer operations, and detailed animations for matrix calculations. Users can easily switch between two complementary views: a node-link view that offers an intuitive understanding of the graph data, and a matrix view that provides a space-efficient and comprehensive overview of all features and their transformations across layers. GNN 101 not only demystifies GNN computations in an engaging and intuitive way but also effectively illustrates what a GNN learns about graph nodes at each layer. To ensure broad educational access, GNN 101 is open-source and available directly in web browsers without requiring any installations.
Human-Computer Interaction
What problem does this paper attempt to address?
The problem that this paper attempts to solve is: How to help non - AI experts better understand and learn the complex structures and internal working principles of Graph Neural Networks (GNNs). Although existing educational resources (such as online blogs, lecture videos, and computational notebooks) provide some help, they mainly rely on mathematical formulas, abstract diagrams, and programming code, and these methods are difficult to intuitively convey the detailed internal operation mechanisms of GNNs. To solve this problem, the authors proposed an educational visualization tool named GNN101. GNN101 enhances the understanding of GNNs in the following ways: 1. **Multi - level detail display**: GNN101 seamlessly integrates animations from the overall model architecture to operations at each layer and detailed matrix calculations, helping users gradually understand the details at each level. 2. **Complementary views**: It provides two complementary perspectives, the node - link view and the matrix view. The former shows the graph structure in an intuitive way, and the latter provides a compact and comprehensive feature overview. 3. **Interactive links between mathematical formulas and visualizations**: Users can interactively link each part of the mathematical formula with the corresponding visual elements, thus understanding complex mathematical concepts more clearly. 4. **Data, task, and model exploration**: Users can easily select different GNN models, tasks, and input graphs for comparison and exploration, further deepening their understanding of GNNs. Through these designs, GNN101 not only makes the GNN calculation process more transparent and easier to understand, but also effectively shows the graph node information learned by GNN at each layer. In addition, as an open - source Web tool, GNN101 can be directly used in the browser without installing any software, ensuring wide educational accessibility.