Graph Visualizations

Lociator offers four visualization modes built with D3.js, each optimized for different types of structural analysis. All layouts share the same underlying graph data (nodes = pages, edges = links) and can be switched instantly.

Layout Modes Overview

Layout	Best For	Key Insight
Rings	Depth analysis	Click distance from homepage
Tree	Hierarchy	Parent-child BFS relationships
Force	Cluster discovery	Natural page groupings
Silos	Content architecture	URL-based silo structure and cross-linking

Rings Layout

Pages are arranged in concentric circles around the homepage. Each ring represents a depth level:

Center ring (depth 0) = homepage
Each successive ring = one more click from root
Pages are evenly distributed around each ring
Node radius reflects in-degree (more incoming links = larger node)

// Rings positioning logic
radius = depth * constant
angle = index * (2π / pagesAtThisDepth)

Tree Layout

A hierarchical tree using D3's tree algorithm. This view shows the BFS parent-child relationships tracked during crawling. Each page is connected to its BFS parent — the page that first linked to it during the breadth-first traversal.

💡Use the Tree layout to verify your navigation structure and identify pages nested too deep. Pages without a BFS parent (orphans) appear disconnected.

Force Layout

A physics-based simulation using d3.forceSimulation(). Pages that link to each other are attracted, naturally revealing content clusters:

Tightly connected pages form visible clusters
Isolated or orphan pages drift to the edges
Hub/pillar pages appear at cluster centers with many connections
The simulation stabilizes after a few seconds of animation

Silos Layout

Pages are organized in vertical columns by depth with the most advanced layout logic. This view reveals content silo structure and cross-silo linking patterns based on URL path segments.

Graph Interactions

All graph layouts support interactive features:

Hover: Custom HTML tooltip showing page URL, depth, in-degree, and out-degree.
Click: Floating detail panel with full page info, metrics, and connection list. Node stays highlighted.
Zoom: Scroll to zoom in/out on the graph canvas.
Pan: Click and drag the background to move the viewport.
Highlight: Clicking a node highlights its direct connections and dims unrelated nodes.

Node & Link Colors

Visual encoding conveys information:

Node color: Based on depth level (green = depth 0, blue = depth 1, purple = depth 2, orange = depth 3+).
Node size: Proportional to in-degree (more incoming links = larger).
Link color — cyan: Parent → child links (forward BFS direction).
Link color — orange: Backlinks (links pointing to pages at a lower or equal depth).