# Code Review Graph Visualization Formats: 4 Rendering Modes Explained

> Explore 4 code review graph visualization formats full community file and auto rendered as interactive HTML files with D3.js using the code-review-graph library.

- Repository: [Tirth Kanani/code-review-graph](https://github.com/tirth8205/code-review-graph)
- Tags: tutorial
- Published: 2026-07-19

---

**The code-review-graph library supports four graph visualization formats—full, community, file, and auto—rendered as self-contained interactive HTML files using D3.js.**

The `tirth8205/code-review-graph` repository provides specialized tools for visualizing code review knowledge graphs. Understanding the available **graph visualization formats** helps developers choose the right level of detail for analyzing codebases of varying sizes and complexity.

## Overview of Supported Graph Visualization Formats

The package ships a self-contained interactive visualizer built on **D3.js**. All **graph visualization formats** output a single HTML file that embeds the graph data as JSON. This approach ensures zero external dependencies beyond the bundled D3 library loaded from `https://d3js.org/d3.v7.min.js`.

The underlying data structure is always a **JSON-serializable dictionary** containing nodes, edges, statistics, flows, and optional community information. In [`code_review_graph/visualization.py`](https://github.com/tirth8205/code-review-graph/blob/main/code_review_graph/visualization.py), the `export_graph_data` function produces this payload, which gets inlined into the generated HTML via the `__GRAPH_DATA__` placeholder for runtime consumption by the D3 script.

## The Four Rendering Modes

The visualizer supports four distinct logical rendering modes, each optimized for different analysis scenarios.

### Full Mode

The `full` mode renders every node and edge exactly as they appear in the knowledge graph. This format provides complete granularity but becomes unwieldy for large datasets. The system defaults to this mode automatically when the graph contains fewer than 3,000 nodes.

### Community Mode

The `community` mode collapses nodes into community super-nodes, enabling high-level structural analysis. Users can drill down into each community to reveal full internal detail. This format activates automatically for large graphs or when explicitly requested via the `mode` parameter.

### File Mode

The `file` mode aggregates symbols by their source file, converting each file into a single node sized proportionally to its symbol count. This **graph visualization format** excels at providing source-level architectural overviews without exposing individual function-level details.

### Auto Mode

The `auto` mode intelligently selects between `full` and `community` modes based on graph complexity. When the total node count exceeds the configurable `max_full_nodes` threshold (defaulting to 3000), the visualizer switches to community aggregation. Otherwise, it falls back to the full representation. This serves as the default rendering strategy for end-user convenience.

## Generating Visualizations in Practice

The `generate_html` function in [`code_review_graph/visualization.py`](https://github.com/tirth8205/code-review-graph/blob/main/code_review_graph/visualization.py) creates these visualizations. Below is a practical demonstration of invoking all four **graph visualization formats**:

```python
from pathlib import Path
from code_review_graph.visualization import generate_html
from code_review_graph.graph import GraphStore

# 1️⃣ Build a GraphStore (example – the actual population is project‑specific)

store = GraphStore(Path("my_project"))

# 2️⃣ Generate a full graph (everything rendered)

html_path = generate_html(store, output_path="graph_full.html", mode="full")
print(f"Full‑mode HTML written to {html_path}")

# 3️⃣ Generate a community‑aggregated view (good for >3 k nodes)

html_path = generate_html(
    store,
    output_path="graph_community.html",
    mode="community",
    max_full_nodes=3000,
)
print(f"Community‑mode HTML written to {html_path}")

# 4️⃣ Generate a file‑level overview

html_path = generate_html(store, output_path="graph_file.html", mode="file")
print(f"File‑mode HTML written to {html_path}")

# 5️⃣ Let the visualizer decide automatically (auto‑mode)

html_path = generate_html(store, output_path="graph_auto.html", mode="auto")
print(f"Auto‑mode HTML written to {html_path}")

```

All four calls produce a stand-alone HTML file compatible with any modern browser.

## Key Implementation Files

The visualization system relies on several core modules within the `tirth8205/code-review-graph` repository:

- **[`code_review_graph/visualization.py`](https://github.com/tirth8205/code-review-graph/blob/main/code_review_graph/visualization.py)** – Contains the `generate_html` and `export_graph_data` functions that build JSON exports and render final HTML for all **graph visualization formats**.
- **[`code_review_graph/graph.py`](https://github.com/tirth8205/code-review-graph/blob/main/code_review_graph/graph.py)** – Provides the `GraphStore` class that supplies nodes, edges, files, and community IDs to the visualizer.
- **[`code_review_graph/communities.py`](https://github.com/tirth8205/code-review-graph/blob/main/code_review_graph/communities.py)** – Supplies community detection results utilized when rendering in community mode.
- **[`code_review_graph/flows.py`](https://github.com/tirth8205/code-review-graph/blob/main/code_review_graph/flows.py)** – Adds execution-flow data that can be highlighted in the interactive UI.

## Summary

- The **code-review-graph** package supports four **graph visualization formats**: full, community, file, and auto.
- All formats output as self-contained interactive HTML files powered by D3.js.
- The `export_graph_data` function in [`code_review_graph/visualization.py`](https://github.com/tirth8205/code-review-graph/blob/main/code_review_graph/visualization.py) generates the underlying JSON payload.
- **Auto mode** automatically switches between full and community views based on the `max_full_nodes` threshold (default 3000).
- **File mode** provides high-level architectural overviews by aggregating symbols at the file level.

## Frequently Asked Questions

### What output format does code-review-graph use for visualizations?

The tool generates self-contained **HTML files** with embedded JSON data. The `generate_html` function creates a single document that includes the D3.js library and the graph data inlined via the `__GRAPH_DATA__` placeholder, requiring no external server or additional assets.

### How does the auto mode decide which visualization to render?

Auto mode checks the total node count against the `max_full_nodes` parameter (defaulting to 3000) as implemented in [`code_review_graph/visualization.py`](https://github.com/tirth8205/code-review-graph/blob/main/code_review_graph/visualization.py). If the graph exceeds this threshold, it renders in **community** mode; otherwise, it displays the **full** graph.

### Can I visualize code review data at the file level instead of function level?

Yes. The **file** rendering mode aggregates all symbols by their source file, creating nodes sized by symbol count. Invoke this by passing `mode="file"` to the `generate_html` function.

### What library powers the interactive graph visualizations?

The visualizations rely on **D3.js** (version 7), loaded from a CDN within the generated HTML. The interactive features—including zooming, panning, and community drill-down—are implemented using D3.js as defined in the visualization module.