Network Graph

The Network Graph is the primary visualization tool for exploring relationships in your data.

Overview

The network graph displays nodes (entities) connected by edges (relationships). It supports both 2D and 3D views with interactive controls.

Graph Types

2D Graph

• Flat network visualization
• Best for smaller networks (< 500 nodes)
• Supports map background overlay

3D Graph

• Three-dimensional network visualization
• Better for larger, complex networks
• Rotate, zoom, and pan in 3D space

Configuration Options

Sidebar Controls

The sidebar provides quick access to data selection and filtering:

Source & Target Columns

Select which columns represent the source and target of each relationship.

Color By (Department)

Choose a column to color-code nodes by category. Useful for identifying clusters by team, department, or type.

Time Controls

When your dataset contains date/time columns, a time selector and range slider appear automatically. These controls are hidden for datasets without temporal data.

Graph Settings Page

Access advanced display options via Settings → Graph Settings:

Graph Type

• 2D: Flat network visualization, best for smaller networks
• 3D: Three-dimensional view for larger, complex networks

Edge Direction

• Directed: Arrows show direction of relationship
• Undirected: Bidirectional connections

Edge Width

• Activity: Width based on number of interactions

Background

• Midnight: Dark background (default)
• Map: Geographic map overlay (requires lat/lon columns)

Background Image

Choose a decorative background image behind your network graph. Select from built-in samples (Starry Night, Street Market, Nebula, Circuit Board, Golden Gate) or use None to disable.

• Thumbnail picker: Click a thumbnail to select it; a larger preview appears below
• Opacity slider: Controls how strongly the image shows through (5%–80%, default 30%)
• Changes apply live — no need to re-generate the graph
• Works in both 2D and 3D modes
• Background images are included in HTML exports

Node Labels

• Off: Labels hidden (default)
• On: Display labels on all nodes

Graph Dimension

Control how nodes are grouped and displayed:

• Individual Nodes: Default view showing each entity as a separate node
• Aggregated Groups: Collapse nodes into group-level (e.g., House/Department), showing only inter-group connections. Node size reflects total group activity. Click on any group node to expand it and see its individual members. Click again on a member to collapse back to the group view.
• Clustered Layout: Keep individual nodes but position them in visual clusters by group. Members of the same group are pulled together spatially while maintaining individual node detail.

Group By

When using Aggregated or Clustered mode, select which column to use for grouping. Defaults to the same column as "Color By".

Group and Color By Feature

Suppose your dataset has columns like:

Source	Target	Department
Alice	Bob	Finance
Carol	Dave	Engineering
Alice	Carol	Finance

To see departments as expandable groups:

1. Set Source = Source (the individual person column)
2. Set Target = Target (the individual person column)
3. Set Graph Dimension = Aggregated Groups
4. Set Group By = Department
5. Click Generate Graph

The graph now shows group nodes like Finance (2) and Engineering (1). Click a group to fan out its individual members with all their connections visible. Click any member to collapse back.

Common mistake: If you set Source and Target to the group-level column itself (e.g., Source = Department, Target = Department), the graph nodes are already groups — each "group" contains only itself, so expanding does nothing useful. Always use individual-level columns for Source/Target and use Group By for the grouping column.

Physics

Tune the force simulation to spread out dense "bird's nest" graphs. All changes apply live — no need to re-generate the graph.

Control	Default	Range	Description
Repulsion	-150	-500 to -10	How strongly nodes push apart. Stronger negative values spread the graph out more.
Link Distance	80	10 to 300	Preferred distance between connected nodes. Increase to space nodes further apart along edges.
Link Strength	0.5	0 to 1	How rigidly links enforce their distance. Higher = stiffer connections.
Gravity	0.1	0 to 1	Pull towards the center. Increase to keep the graph compact; decrease for a looser layout.
Collision Radius	0 (off)	0 to 30	Minimum spacing between nodes. Prevents overlapping when set above 0.

Tips for dense networks:

• Start by increasing Repulsion (e.g., -300 to -400) to push nodes apart
• Increase Link Distance (e.g., 150-200) so edges stretch out
• Add a small Collision Radius (e.g., 5-10) to prevent node overlap
• Increase Gravity if the graph flies too far apart

The simulation uses the Barnes-Hut approximation internally for efficient force calculation on large networks.

Cluster Hulls

• Off: Standard graph display (default)
• On: Enables community detection and visual clustering

When enabled, the Louvain community detection algorithm analyzes the network structure to discover natural communities based on connection patterns (not just metadata). Nodes are:

1. Recolored by their detected community
2. Pulled together spatially using clustering forces, so members of the same community group visually
3. Surrounded by convex hull backgrounds — semi-transparent colored shapes drawn behind each community group

The legend updates to show detected communities, labeled by their dominant department (e.g., "Sales (12)" or "Sales/Marketing (15)" when two departments share significant presence). This provides insight into how organizational structure aligns with actual communication patterns.

Cluster Hulls are only rendered in 2D mode.

Export

Click the download icon in the header bar to export the current graph.

• JPG Image: Static screenshot including the legend overlay. Respects the current light/dark mode.
• Interactive HTML: Self-contained HTML file with full interactivity (hover tooltips, zoom, drag, click highlighting). Includes cluster hulls, node labels, and background images if enabled. Opens in any browser with no dependencies.

3D Export Features

When exporting a 3D graph, the HTML file includes additional controls:

• Orbit button: Starts an automatic camera orbit that cycles through all axes (X, Y, Z) using a Lissajous path for smooth, varied viewing angles
• Speed slider: Controls orbit speed (1–20)
• Record GIF button: Captures frames during orbit and encodes an animated GIF client-side
  1. Click Orbit to start the camera moving
  2. Click Record GIF — recording begins immediately (the status shows frame count)
  3. Let it run for 5–10 seconds (50–100 frames)
  4. Click Stop — the GIF encodes and downloads automatically as network-3d.gif

Background images are composited into GIF frames so the exported animation includes the full visual.

Timeline Playback

When a time column is configured, you can animate the graph over time:

1. Use the progress slider to scrub through time
2. Play/pause animation with video-style controls
3. Adjust playback speed (0.5x to 4x)

Timeline playback respects the sidebar time range slider — animation only covers the selected date range, not the full dataset.

Filtering

Use the source and target filters to focus on specific nodes.

The filter lists are collapsible - click the label to expand or collapse the list, saving sidebar space when you've made your selections.

Interactions

• Hover: View node details
• Click: Highlight connected nodes and edges
• Drag: Reposition nodes
• Scroll: Zoom in/out

Browser Compatibility

Brave Browser Issue (2D Graph)

The 2D graph uses Canvas color-picking for detecting mouse interactions with nodes. Brave browser's fingerprinting protection interferes with this detection, causing some nodes to not respond to hover or click events.

Symptoms:

• Some nodes show tooltips on hover, others don't
• Clicking certain nodes doesn't highlight their edges
• The same nodes consistently fail to respond
• 3D graph works correctly (uses different detection method)

Solutions:

1. Disable Brave Shields for this site:

   • Click the Brave Shields icon (lion) in the address bar
   • Toggle shields OFF for this domain

2. Use an alternative browser:

   • Chrome, Firefox, Safari, and Edge all work correctly

Recommended Browsers

Browser	2D Graph	3D Graph
Chrome	✅ Full support	✅ Full support
Firefox	✅ Full support	✅ Full support
Safari	✅ Full support	✅ Full support
Edge	✅ Full support	✅ Full support
Brave	⚠️ Requires shields disabled	✅ Full support