iGraph.js

Data

Choose from different graph data sets.

Select a dataset
Visual Encoding

Adjust how nodes and edges are visualized.

Use node size to visualize the node degree.

Use node color to visualize the node degree.

Color Scale for Nodes

Select the color scale to be used for visualizing the node degree.

Select color scale

Use edge width to visualize the edge weight.

Labeling

Place labels for nodes and edges.

Number of labels

Adjust how many labels should be placed in the visualization.

Size of labels

Adjust the font size of labels depending on your display size.

Interactive Lens

An interactive lens can locally change the graph visualization in various ways. Compatible lens effects can be combined.

Local-Edge Filter

Filter edge clutter depending on whether one or both nodes of an edge are inside the lens.

Filter Mode
An edge will only be shown if
Bring-Neighbors Transformation

Transform the graph layout so that neighbors of in-lens nodes are brought toward the lens, effectively creating a local neighborhood overview.

Fish-Eye Magnification

Apply a fish-eye magnification to untangle dense and cluttered parts of the graph layout.

Bring-Similar Transformation

Transform the graph layout to arrange similar nodes on concentric circles within the lens, effectively aiding in their comparison.

Similarity Threshold

Only nodes that meet the threshold will be shown inside the lens.

Similarity

Similarity is computed based on the selected node attributes.

Select attributes
Comparison Guides

Guides can be activated to aid in comparing nodes.

Select guide type
Radar View

The radar projects off-screen nodes to the window border to provide a preview of the information that can be reached when navigating in a certain direction.

Information

iGraph.js is a software for interactive graph visualization. It implements four graph lenses, a radar view, and dynamic labeling as interactive tools to support the exploration of graph data. iGraph.js is based on ideas published in [1], [2], and [3].

Data Exploration Interactions
Wheel to zoom layout
Right drag to pan layout
Node Interactions
Left drag to move node
Shift + Left drag to move and lock node
Ctrl + Right click to center node
Lens Interactions
Left drag to move lens
Shift + Wheel to resize lens
Right click to place lens on node
Radar View Interactions
Left drag arc in widget to rotate radar
Shift + Wheel arc in widget to resize radar
Left drag widget to move it
Shift + wheel on widget to resize it
Third-Party Libraries
Bootstrap • Fomantic-UI • D3 Force • chroma.js • RBush • jQuery

iGraph.js is maintained with ❤️ by ct