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

Team Members

Yilin Lu, Chongwei Chen, Kexin Huang, Marinka Zitnik, Qianwen Wang

Paper

Link to arXiv: https://arxiv.org/abs/2411.17849

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.

Getting Started

First, install all dependencies by using:

npm install

Then, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.