Graph Visualization Tool (2023) https://nodevis.netlify.app/

Introduction

NodeVis is an interactive platform designed to visually explore the complex relationships in IMDb movie data. By leveraging graph visualization techniques, it allows users to uncover hidden patterns between films, actors, directors, and genres. The tool takes IMDb datasets and transforms them into an intuitive, analyzable graph format, presenting both high-level metrics and detailed insights into individual movies.

Key Design Decisions and Rationale:

Multiple Layouts for Graph Representation

• The decision to offer multiple layout styles, such as the Force-Directed Layout and Hierarchical Edge Bundling, enhances flexibility in exploring the data. The Force-Directed Layout emphasizes organic clustering and relationships between nodes, making it ideal for exploring smaller clusters. In contrast, Hierarchical Edge Bundling groups similar nodes together in a more structured, circular format, allowing for easier exploration of larger and more connected graphs.

Hierarchical Edge Bundling Layout

Force Directed Layout

Node Interaction and Dynamic Analysis

• Users can interact directly with the graph by hovering on nodes to reveal movie-specific details (e.g., poster, ranking, genre, release year). This reduces the cognitive load on the user by presenting details only when needed, rather than overwhelming the viewer with all information upfront. The seamless interaction makes it easy to traverse the movie network and discover connections between seemingly unrelated films.
• Additionally, node modification options (such as adding, modifying, or deleting nodes) allow users to manipulate the dataset in real-time, supporting a customizable and personalized exploration of the graph.

After searching for Rank 1 movie, you can hover the highlighted cell to see more details.

Visual Aids for Node and Edge Tracking

• To help users keep track of changes and new information, NodeVis uses color-coding for Sample Nodes, New Nodes, and Recent Changes. This helps the user focus on specific areas of interest without losing context. By clearly distinguishing between nodes, the user can explore relationships in a more structured and efficient way and also create new connections or nodes.
• The right-click functionality offers quick access to actions like Modify Node, Delete Node, or Delete Edge, enhancing the exploratory experience without navigating away from the main visualization.

Orange nodes show a new connection user has made between two existing nodes

Right-clicking on a node allows options to modify/delete the node or edge.

Summary Metrics for Graph Overview

• At any given time, users can view summary metrics about the graph, such as Average Node Degree, Number of Connected Components, Graph Density, and more. These high-level statistics provide an overall sense of the graph’s structure and complexity, guiding the user in their exploration.
• For example, metrics like Graph Density and Largest Component Diameter help users understand how interconnected the dataset is, whether it's sparse or dense with relationships.