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:
- Load a sample network: From the
main menu, select File Load Graph, and select
sampleData/galFiltered.sif.
- 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:
- 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.
- 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).
- 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. |
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:
- 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.
- 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.
- Continuous Mapper:
continuous graph attributes are mapped to visual attributes. Depending
on the visual attribute, there are two types of continuous mappers:
- continuous to continuous mapper:
for example, you can map a continuous value (0..1) to a color gradient
(red..green) or node/font size (10..100).
- continuous to discrete mapper:
for example, all values below 0 are mapped to square nodes, and all
values above 0 are mapped to circular nodes. However, there is no way
to smoothly morph between circular nodes and square nodes.
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.)

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.
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.
- Load a sample network: From the
main menu, select File Load Graph, and select sampleData/galFiltered.sif.
- Select Visualization Set Visual
Properties.
- Select “New” to create a new Visual
Style. Name your new style: “Sample3”.
- Click the “Define” button to define
the newly created Visual Style.
- In the “Set Visual Properties”
Dialog box, select Edge Attributes
Edge Color.
- Click the New button in the mapping
panel.
- 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”.
- 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).
- Click
the “pd” button and select a blue color.
- Click the “pp” button and select a
red color.
- Click the “Apply to Graph” button.
- 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.

- Load a sample network: From the
main menu, select File Load Graph, and select
sampleData/galFiltered.sif.
- Load a sample set of expression
data: From the main menu, select File
Load Expression Matrix File, and
select sampleData/galExpData.pvals.
- Select Visualization Set Visual
Properties.
- Select “New” to create a new Visual
Style. Name your new style: “Sample4”.
- Click the “Define” button to define
the newly created Visual Style.
- In the “Set Visual Properties”
Dialog box, select Node Attributes
Node Color.
- Click the New button in the mapping
panel.
- 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”.
- From the “Map Attribute” pull-down
menu, select “gal1RGexp.”
- Click the “Add Point” button twice
to add two data points.
- Set the first point to “-1”, Below
= Yellow, Equal = White.
- Set the second point to “2”, Equal
= Red, Above = Black.
- 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.