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 automatically loads several predefined visual styles to get you started when you start Cytoscape by using one of the “cytoscape.sh” or “cytoscape.bat” scripts. To demonstrate these styles, try out the following example:
  1. Load a sample network: From the main menu, select File => Graph, and select sampleData/galFiltered.sif.
  2. Layout the network: select Layout->yFiles->Organic.
  3. 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 loaded from a file called vizmap.props. The location of this file can be specified from the command line (-vp). If it is not specified through the command line, then Cytoscape looks for this file in the user’s home directory (in the ".cytoscape" directory). If you start Cytoscape for the first time, and you do not start it using one of the start-up scripts (cytoscape.sh or cytoscape.bat), then, a very simple visual style will be automatically created. When you exit Cytoscape, any modifications you made to the visual styles, and any new visual styles you created, are automatically saved to the originally loaded vizmap.props file in the .cytoscape directory in the user’s home directory.

[!] If you are upgrading from Cytoscape 2.1: If you are upgrading from Cytoscape 2.1, you may want to use your vizmap.props file that is located in your home directory, since this file was used in 2.1 to store visual styles. To do this, you can either specify its location in the command line (edit cytoscape.sh or cytoscape.bat), or copy the file to the .cytoscape directory located in your home directory (on Windows XP, this is the “Documents and Settings” directory, on Linux or Mac this is your home directory, for example, /Users/iavila, or ~/).


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 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, network 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 network 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 network 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: network 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 network 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

 -

X

X

 Node Border Color

 -

X

X

 Node Border Type

 -

X

o

 Node Shape

 -

X

o

 Node Size

 -

X

X

 Node Label

X

X

o

 Node Font Family

 -

X

o

 Node Font Size

 -

X

X

Edge Properties

 

 

 

 Edge Color

 -

X

X

 Edge Line Type

 -

X

o

 Edge Source Arrow

 -

X

o

 Edge Target Arrow

 -

X

o

 Edge Label

X

X

o

 Edge Font Family

 -

X

o

 Edge Font Size

 -

X

X

 

Legend

 -

Mapping is not supported for specified visual property.

 X

Mapping is fully supported for specified visual property.

 o

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.

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 Network" 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. Your 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 superimpose 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 below.