GNN101: Visual Learning of Graph Neural Networks in Your Web Browser

TL;DR

GNN101 tackles the challenge of teaching graph neural networks by delivering an in browser interactive visualization that tightly couples mathematical formulas with visual representations across hierarchical detail levels. It combines model overviews, layer level computations, and two complementary views node-link and adjacency matrix, along with bidirectional math visualization linking, animated transitions, and real data exploration. The authors validate the approach through expert-informed design, classroom deployments, a quantitative learning study, and observational studies, reporting significant learning gains and strong usability. The work demonstrates the potential of cohesive visualizations to bridge theory and practice in AI education and gestures toward broader adoption and extension in collaborative, modular educational tools.

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, this study presents \name{}, an educational visualization tool for interactive learning of GNNs. GNN 101 introduces a set of animated visualizations that seamlessly integrate mathematical formulas with visualizations via multiple levels of abstraction, including a model overview, layer operations, and detailed 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 was designed and developed based on close collaboration with four GNN experts and deployment in three GNN-related courses. We demonstrated the usability and effectiveness of GNN 101 via use cases and user studies with both GNN teaching assistants and students. To ensure broad educational access, GNN 101 is open-source and available directly in web browsers without requiring any installations.

Figures (8)

• Figure 1: (a) Traditional methods for learning GNNs. (b) GNN101 enhances understanding of GNNs through a hierarchical breakdown of details (B1), complementary views (B2), and the integration of mathematical concepts with visualizations (B3).
• Figure 3: Matrix View: The matrix view complements the node-link view (\ref{['fig:interface']}) and provides similar click-to-expand interactions (a-b). The computation process inside a layer is visualized as a horizontal flowchart, where heatmaps represent vectors and matrices (B1), and the connecting curves illustrate the computation process (B2).
• Figure 4: Bidirectional Math-Visualization Linking: Users can hover over parts of the mathematical formulas to highlight the corresponding visualizations (a), or hover over visualizations to reveal the computation process for obtaining the exact value (b).
• Figure 5: Manipulating Input Data using Graph Editor: Users can manipulate the input data using a graph editor to choose between node operation (b) or edge operation (c) in the editor menu (a), after the operations, users can click the "Click to Predict" button to run inference with the new modified data (d).
• Figure 6: Comparing GNN variants: GNN101 supports the comparisons between GCN (a), GAT (b), and GraphSAGE (c) by visualizing how each model aggregates information from neighboring nodes. Curved edges indicate that parts of the visualization have been omitted from the figure due to space constraints.