Visual Styles

With the Cytoscape Visual Style feature, you can easily customize the visual appearance of your network. For example, you can specify a default color and shape for all nodes, use specific line types to indicate different types of interactions, or visualize gene expression data using a color gradient. All these features are available by selecting Visualization Set Visual Properties from the main menu or clicking on the color wheel in the main button bar menu.

Introduction to Visual Styles

The Cytoscape distribution you have downloaded includes three predefined visual styles to get you started. To demonstrate these styles, try out the following example:
  1. Load a sample network: From the main menu, select File Load Graph, and select sampleData/galFiltered.sif.
  2. Load a sample set of expression data: From the main menu, select File Load Expression Matrix File, and select sampleData/galExpData.pvals.
By default, the Visual Style labeled “default” will be automatically applied to your network. This default style has a blue background, circular pink nodes, and blue edges (see sample screenshot below).

Figure: Using the default Visual Style.

The vizmap.props File: All Cytoscape Visual Style settings are automatically stored in a file called vizmap.props. Upon startup, Cytoscape will first try to locate the vizmap.props file in the “user home” directory. For example, on Windows XP, this corresponds to the user “Documents and Settings” directory, e.g. c:\Documents and Settings\cerami. On Linux or Mac OS X, this corresponds to the user home directory, e.g. /Users/cerami or ~. If no vizmap.props file is found in the user’s home directory, Cytoscape will next search the current local directory. Note: vizmap.props is a text file that can be edited, but it is not recommended. If you do edit this file, make sure it is saved in text format and not that of any other editor.

[!] If you are upgrading from Cytoscape 1.1: If you are upgrading from Cytoscape 1.1, you may have an existing vizmap.props file in your home directory. If this is the case, you will not have the sample1 and sample2 visual styles described below. To get around this issue, backup your current vizmap.props file to safe place, and copy the new Cytoscape 2.1 vizmap.props file to your home directory.


You can flip through different visual styles by making a selection from the Visual Style pull down menu. For example, if you select “Sample1”, a new visual style will be applied to your network, and you will see a green background and round blue nodes. Additionally, protein-DNA interactions (specified with the label: pd) are drawn with dashed edges, whereas protein-protein interactions (specified with the label: pp) are drawn with drawn with a light yellow color which is difficult to discern on the green background (see sample screenshot below). The background can be changed through the Visualization menu.

Figure: Using the Sample1 Visual Style. Protein-Protein interactions (solid lines) are now distinguishable from Protein-DNA interactions (dashed lines).


Finally, if you select “Sample2”, gene expression values for each node will be colored along a color gradient between red and green (where red represents a low expression ratio, and green represents a high expression ratio - with thresholds set for the gal1RGexp experiment bundled with Cytoscape in the sampleData/galExpData.pvals file). See sample screenshot below:

Figure: Using the Sample2 Visual Style. Gene expression values are now displayed along a red/green color gradient.

Visual Attributes, Graph Attributes and Visual Mappers

The Cytoscape Visual Mapper has three core components: visual attributes, graph attributes and visual mappers:
  1. A visual attribute is any visual setting that can be applied to your network. For example, you can change all nodes to squares by setting the node shape visual attribute.
  2. A graph attribute is any attribute associated with a node or an edge. For example, each edge in a network may be associated with a label, such as “pd” (protein-DNA interactions), or “pp” (protein-protein interactions).
  3. A visual mapper maps graph attributes to visual attributes. For example, a visual mapper can map all protein-DNA interactions to the color blue, and all protein-protein interactions to the color red.
Cytoscape includes a large number of visual attributes. These are summarized in the tables below.

Visual Attributes Associated with Nodes:


Node Color

Node Border Color

Node Border Type. The following options are available:


Node Shape. The following options are available:


Node Size: width and height of each node.

Node Label: the text label for each node.

Node Font: node font and size.


Visual Attributes Associated with Edges:

Edge Color

Edge Line Type. The following options are available:


Edge Source Arrow. The following options are available:


Edge Target Arrow. The following options are available:


Edge Label: the text label for each edge.

Edge Font: edge font and size.


Global Visual Properties:

Background Color


For each visual attribute, you can specify a default value or define a visual mapping. Cytoscape currently supports three different types of visual mappers:
  1. Passthrough Mapper: graph attributes are passed directly through to visual attributes. A passthrough mapper only works for node / edge labels. For example, a passthrough mapper can draw the common gene name on all nodes.
  2. Discrete Mapper: discrete graph attributes are mapped to discrete visual attributes. For example, a discrete mapper can map all protein-protein interactions to the color blue.
  3. Continuous Mapper: continuous graph attributes are mapped to visual attributes. Depending on the visual attribute, there are two types of continuous mappers:
The matrix below shows visual mapper support for each visual property.

Passthrough Mapper Discrete Mapper Continuous Mapper
Node Properties


Node Color
Node Border Color
Node Border Type
Node Shape
Node Size
Node Label
Node Font Family
Node Font Size
Edge Properties


Edge Color
Edge Line Type
Edge Source Arrow
Edge Target Arrow
Edge Label
Edge Font Family
Edge Font Size

Legend
Mapping is not supported for specified visual property.
Mapping is fully supported for specified visual property.
Mapping is partially supported for specified visual property. Support for “continuous to continuous” mapping is not supported.

Tutorial: Creating a New Visual Style

To create a new visual style, select Visualization

Set Visual Properties from the main menu, or select the color wheel icon in the main button bar. You will
 now see a new Visual Styles dialog box (shown at right.)

Visual Styles

Click the New button, and enter a name for your new visual style when prompted. Then click the Define button. You will now see the main Visual Styles Properties dialog box.

Visual Property Categories

From this dialog box, you can flip between Node Attributes, Edge Attributes, and Global Defaults. You can also specify default values for any visual property, or define a new custom mapping. 

For example, to set the default node shape to triangles, select Node Attributes Node Shape. Then, click the “Change Default” button, and select the Triangle icon from the selection list.

Applying Changes to the Network

To apply your visual style to your network, hit the “Apply to Graph” button, available in the bottom of the dialog panel.

Saving a Visual Style

When you exit Cytoscape, new visual styles or newly modified visual styles will automatically be saved in the vizmap.props file. You can therefore create a new visual style and apply it to all future networks.

Tutorial: Creating a New Visual Style with a Discrete Mapper


The following tutorial demonstrates how to create a new visual style with a discrete mapper. The goal is to draw Protein-DNA interactions with blue edges, and Protein-Protein interactions with red edges.
  1. Load a sample network: From the main menu, select File Load Graph, and select sampleData/galFiltered.sif.
  2. Select Visualization Set Visual Properties.
  3. Select “New” to create a new Visual Style. Name your new style: “Sample3”.
  4. Click the “Define” button to define the newly created Visual Style.
  5. In the “Set Visual Properties” Dialog box, select Edge Attributes Edge Color.
  6. Click the New button in the mapping panel.
  7. You will be prompted to select a mapping type: passthrough mapper, discrete mapper or continuous mapper (for an overview of the differences between these mappers, please refer back to section 8.2.) Select “discrete mapper”, and enter a descriptive name. For example, enter: “InteractionTypeColor”.
  8. From the “Map Attribute” pull-down menu, select “interaction.” You should now see two buttons, one for pd (Protein-DNA interactions), and one for pp (Protein-Protein interactions).
  9. Click the “pd” button and select a blue color.
  10. Click the “pp” button and select a red color.
  11. Click the “Apply to Graph” button.
  12. You network should now show “pd” interactions in blue, and “pp” interactions in red. Sample screenshot is shown above.

Tutorial: Visualizing Expression Data on a Network

The following tutorial demonstrates how to create a new continuous mapper. The goal is to superpose gene expression data onto a network, and to display gene expression values along a color gradient.


  1. Load a sample network: From the main menu, select File Load Graph, and select sampleData/galFiltered.sif.
  2. Load a sample set of expression data: From the main menu, select File Load Expression Matrix File, and select sampleData/galExpData.pvals.
  3. Select Visualization Set Visual Properties.
  4. Select “New” to create a new Visual Style. Name your new style: “Sample4”.
  5. Click the “Define” button to define the newly created Visual Style.
  6. In the “Set Visual Properties” Dialog box, select Node Attributes Node Color.
  7. Click the New button in the mapping panel.
  8. You will be prompted to select a mapping type: passthrough mapper, discrete mapper or continuous mapper (for an overview of the differences between these mappers, please refer back to section 8.2.) Select “continuous mapper”, and enter a descriptive name. For example, enter: “ColorGradient”.
  9. From the “Map Attribute” pull-down menu, select “gal1RGexp.”
  10. Click the “Add Point” button twice to add two data points.
  11. Set the first point to “-1”, Below = Yellow, Equal = White.
  12. Set the second point to “2”, Equal = Red, Above = Black.
  13. Click the “Apply to Graph” button.


This visual mapper will set all nodes with a gal1RGexp value less than –1 to Yellow, and all nodes with a gal1RGExp value greater than 2 to Black. Additionally, all values between –1 and 2 will be painted with a white/red color gradient. Sample screenshot is shown at right.