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

TL;DR

GNN101 is an interactive, web-based visualization tool designed to help non-experts understand the complex structures and operations of Graph Neural Networks through animated visualizations and multiple abstraction levels.

Contribution

This paper introduces GNN101, a novel educational visualization tool that integrates mathematical formulas with visualizations for interactive learning of GNNs in web browsers.

Findings

GNN101 improves understanding of GNNs among students and teaching assistants.

The tool is effective in educational settings and enhances learning outcomes.

GNN101 is accessible and easy to use without installations.

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.