Quick Tutorial: Building and Styling a Network in Cytoscape

From Cytoscape’s User Manual:

One of Cytoscape’s strengths in network visualization is the ability to allow users to encode any table data (name, type, degree, weight, expression data, etc.) as a property (such as color, size of node, transparency, or font type) of the network.

This guide walks you through:

  • Preparing your data
  • Importing CSV or Excel files
  • Choosing a layout
  • Applying visual encodings (color, size, shape)
  • Improving readability and interpretability

The goal is not just to “make it look good,” but to ensure that visual structure communicates biological or relational meaning.

Preparing Your Data

Cytoscape requires two core tables:

A. Edge Table (Required)

Each row represents one interaction (edge).

Minimum required columns:

  • Source (node 1)
  • Target (node 2)

Optional:

  • Weight (e.g., number of collaborations)
  • Interaction type (e.g., collaboration, friendship, co-author)
  • Directed flag (if applicable)

Example:

Source Target Weight Type
A B 3 co-star
A C 1 co-star

B. Node Table (Optional but Recommended)

Each row represents one node.

Example:

Node Category Group Popularity
A Actor Drama 85
B Actor Comedy 60

You can create these in:

  • Any spreadsheet, like MS Excel (.xlsx)
  • Or export as CSV (.csv)

2. Importing Data into Cytoscape

Importing a CSV File

  1. Open Cytoscape
  2. Go to File → Import → Network from File
  3. Select your CSV file
  4. Confirm:
    • Source column is mapped to “Source”
    • Target column is mapped to “Target
  5. Click OK

See Create network from csv file.

Cytoscape automatically creates nodes from the edge list.

Importing an Excel (.xlsx) File

  1. File → Import → Network from File
  2. Select the .xlsx file
  3. Choose the appropriate worksheet
  4. Confirm column mapping

If your node attributes are in a separate file:

  • Go to File → Import → Table → File
  • Choose your node table
  • Map using the Node ID column

3. Choosing an Appropriate Layout

A layout determines how nodes are positioned.

Go to: Layout menu > Common Layouts > Force-Directed (e.g., “Prefuse Force Directed”)

Force directed.

Best general-purpose layout.

  • Connected nodes cluster naturally
  • Hubs move toward center
  • Good for most social and biological networks

While versatile and popular for showing clusters and organic structures, it is primarily optimized for undirected networks. Use this as your default unless you have a reason not to.

Circular Layout.

  • Good for small, evenly connected networks
  • Highlights symmetry

This layout places nodes on a circle or concentric rings. It is best for showing cyclic processes or emphasizing central hubs and symmetries, but it does not easily represent the linear flow or hierarchical rank inherent in many directed networks.

Grid Layout.

  • Useful for initial organization
  • Not ideal for interpretation

This is a simple arrangement where nodes are placed in rows and columns. It is useful for comparing node attributes or managing very large datasets, but it burries the relationship/connection logic among the nodes.

Hierarchical Layout.

Best when:

  • Edges are directed
  • There is flow (e.g., signaling cascade)

Also called a layered or Sugiyama layout. A better alternative than forced-directed where the latter would be appropriate. Hierarchical layout is a good choice for visualizing directed networks because it specifically organizes nodes into layers to emphasize the direction or flow of connections.

How to Decide

Ask:

  • Is the network directed?
  • Do I want to highlight hubs?
  • Is clustering important?

Recommend: For most student assignments: Use a force-directed layout.

4. Applying Visual Encodings

Visualization is not decoration — it encodes data (cf discussion in Tufte 2001).

Open the Style Panel (usually on left side).

You will see options for:

  • Node color
  • Node size
  • Node shape
  • Edge width
  • Edge color
  • Labels

A. Mapping Color to Categories (Discrete Mapping)

Example: Node category (Actor, Director, Musician)

  1. Click Node → Fill Color
  2. Change from “Passthrough” to “Discrete Mapping”
  3. Choose the attribute (e.g., Category)
  4. Assign colors to each category
  5. Use color for:
  • Categorical data
  • Groups or communities

B. Mapping size to quantitative data (continuous mapping)

Example: Popularity score, degree, or weight

  1. Click Node → Size
  2. Select “Continuous Mapping”
  3. Choose attribute (e.g., Popularity)
  4. Adjust min and max size

Use size for:

  • Quantitative magnitude
  • Centrality measures
  • Weight

C. Node shape for additional categories

Example:

  • Circle = Actor
  • Triangle = Director
  1. Node → Shape
  2. Select Discrete Mapping
  3. Map attribute to shapes

Limit shape categories to 2–4 types maximum.

D. Edge width for strength

  1. Edge → Width
  2. Continuous Mapping
  3. Map to weight column

Thicker edges = stronger relationships.

5. Adjusting labels and styling for interpretability

A good network should be readable without zooming excessively.

A. Adding node labels

  1. Node → Label
  2. Select the column containing names

Adjust:

  • Font size
  • Label color
  • Label position

Avoid overly large labels that overlap excessively.

B. Reducing clutter

Strategies:

* Increase node size slightly
* Reduce edge opacity
* Use curved edges if overlap is heavy
* Apply layout again after styling

C. Improving contrast

Make sure:

* Node colors contrast with background
* Labels contrast with node fill
* Edge color does not overpower nodes

White or light background is usually best.

6. Interpreting What You See

Once styled, ask:

  • Who are the hubs (largest nodes)?
  • Are there clusters?
  • Are there bridges connecting communities?
  • Does the layout reveal structure you didn’t anticipate?

What we are looking for: Network structure emerges from relationships — not from aesthetics.

7. Common Mistakes to Avoid

  • Overusing too many colors
  • Encoding the same attribute twice
  • Making everything large and bold
  • Choosing a layout that hides structure
  • Failing to define what nodes and edges represent

8. For students, a checklist before submitting

  • Nodes and edges clearly defined
  • Appropriate layout selected
  • At least one visual encoding of category
  • At least one visual encoding of quantity
  • Labels readable
  • Network interpretable at a glance

 

Readings and references

Chapter 12. Styles, Cytoscape user manual. https://manual.cytoscape.org/en/stable/Styles.html .

Tufte, E. R. (2001). The visual display of quantitative information (2nd ed.). Graphics Press .