Diff for "Cytoscape_User_Manual/Visual_Styles"

What is a Visual Style?

With the Cytoscape Visual Style feature, you can easily customize the visual appearance of your network. The following is a few examples you can do by editing Visual Styles:

• Specify a default color and shape for all nodes.

  • attachment:DefaultColorAndShape.png

• Use specific line types to indicate different types of interactions.

  • attachment:LineTypes.png

• Encode specific physical entities into different node shapes.

  • attachment:NodeShapeMapping.png

• Set node size based on degree of the nodes. You can visually see the hub of a network.

  • attachment:DegreeSize.png

• ...or, set node label font size instead.

  • attachment:DegreeLabelSize.png

• Set node width and height based on label size.

  • attachment:LabelWidthAndHeight.png

• Visualize gene expression data along a color gradient.

  • attachment:ColorGradient.png

• Control edge transparency (opacity) based on edge weights.

  • attachment:OpacityForEdges.png

• Browse extremely-densed network using opacity control.

  • attachment:OpacityForNodesAndEdges.png

The idea is, users can encode any attribute (name, type, degree, weight, expression data, etc.) into visual proprety such as color, size, transparency, or font type. A set of visual attribute mappings is called Visual Style and you can control it through VizMapper user interface. All these features are available by selecting the View → Open VizMapper menu item or clicking on the Viz Mapper icon attachment:VizMapIcon.png button on the main button bar. From Cytoscape 2.5, VizMapper is a part of Control Panel (origially called CytoPanel 1, the floatable panel on the left side of desktop). Instead of clicking icons or select from menu, you can directly access VizMapper by selecting tab on Control Panel.

Introduction to VizMapper User Interface

In Cytoscape 2.5, VizMapper user interface is completely redesigned. There are three types of components in the new VizMapper.

1. Main Panel

   • attachment:VizMapperMainPanel.png

   • This is the main controller for all visual styles and mappings. You can view/create/delete/switch visual styles from this panel. The table on the bottomois called Visual Mapping Browser. Users can directly edit discrete mappings and call Continuous Editors from this table.

2. Default Appearence Editor

   • attachment:DefaultEditorPanel.png

   • Users can visually edit default appearence of nodes and edges through this editor window.
3. Continuous Editors
   • These are editors for continuous mapping, which is a mapping from numerical value to visual attributes. From these windows, users can edit continuous mapping more intuitively.
   • Color Gradient Editor

     • attachment:GradientEditorPanel.png

   • Continuous-to-Discrete Editor
     • attachment:C2DPanel.png
   • Continuous-to-Continuous Editor
     • attachment:C2CPanel.png

Details for these windows will be discussed in the following sections.

Introduction to Visual Styles

The Cytoscape distribution includes several 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 → Import → Network, and select sampleData/galFiltered.sif.

• Layout the network: select Layout → yFiles → Organic.

• Load a sample set of expression data: From the main menu, select File → Import → Attribute Matrix 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).

attachment:VizMapperDefaultStyle.png Figure: Using the default Visual Style.

You can change visual styles by making a selection from the Visual Style pull down menu (available directly to the right of the attachment:VizMapIcon.png icon).

For example, if you select “Sample1”, a new visual style will be applied to your network, and you will see a white background and round blue nodes. Additionally, if you zoom in closer, you can see that protein-DNA interactions (specified with the label: pd) are drawn with dashed red edges, whereas protein-protein interactions (specified with the label: pp) are drawn with a light blue color (see sample screenshot below).

attachment:VizMapperSample1Style.png Figure: Using the Sample1 Visual Style. Protein-Protein interactions (solid blue lines) are now distinguishable from Protein-DNA interactions (dashed red 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:

• attachment:VizMapperSample2Style.png

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:

• 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 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).

• 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.

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:

  • 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. Basically this is a mapping to specify node/edge labels.

• 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.

• Continuous Mapper:

  • Continuous graph attributes are mapped to visual attributes. Depending on the visual attribute, there are three kinds of continuous mappers:

    • Continuous-to-Continuous Mapper: for example, you can map a continuous numerical value to a node size.

    • Color Gradient Mapper: This is a special case of continuous-continuous mapper. Continuous nemerical values are mapped to color gradient.

    • 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.

• Legend

Visual Styles Tutorials

Tutorial 1: Creating a Basic Visual Style and Set Default Values

To create a new visual style, select the View → Open Viz Mapper menu item, or select the Viz Mapper icon in the main button bar. You will now see a VizMapper Main Panel (shown below.)

attachment:NewVizMapper.png

Click the Options attachment:VizMapOptionIcon.png button, and select Create new visual style... Then enter a name for your new visual style when prompted. You will see an empty visual style in VizMapper Main Panel (shown below.)

attachment:EmptyVisualStyle.png

Since no mapping is set up yet, all visual attributes are listed below Unused Properties and they are grayed-out. From this panel, you can create node/edge mappings for all visual properties.

To edit default values, you can use open Default Appearence Editor by clicking on the Defaults graphics window (shown below.)

attachment:InitialDefaultEditor.png

For example, to set the default node shape to triangles, click Node Shape on the Default Visual Properties list. Then list of available node shapes will be shown in a window. Click Triangle icon and press Apply button. Default Appearence Editor window will be automatically updated (shown below.)

attachment:TriangleDefaultEditor.png

You can edit other default values by clicking on visual attribute names on the list. When you finish editing, hit the Apply button, available in the bottom of the editor panel. Your new Visual Style will be applied to the current network.

Tutorial 2: 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 as blue-dashed lines, and Protein-Protein interactions as red-solid lines.

1. Load a sample network: From the main menu, select File → Import → Network, and select sampleData/galFiltered.sif.

2. Click the VizMapper attachment:VizMapIcon.png button on the tool bar.

3. Press Option button and select Create new Visual Style to create a new Visual Style. Name your new style: “Tutorial 2”.

4. Double click the Edge Color cell listed below Unused Properties. Edge Color cell will be moved on the top of the list.

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 to the text above) Select “discrete mapper”, and enter a descriptive name. For example, enter: Interaction_Type_Color.
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 Network" button.

You network should now show “pd” interactions in blue, and “pp” interactions in red. Sample screenshot is below

attachment:VizMapperInteractionsRedBlue.png

Tutorial 3: 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.

• Load a sample network: From the main menu, select File → Import → Network, and select sampleData/galFiltered.sif.

• Load a sample set of expression data: From the main menu, select File → Import → Attribute Matrix and select sampleData/galExpData.pvals.

• Click the VizMap attachment:VizMapIcon.png button on the tool bar.

• 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 to the section above) Select “continuous mapper”, and enter a descriptive name. For example, enter: Color_Gradient.
• 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 Network" 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 below.

attachment:VizMapperExpRedBlack.png

Advanced Topics

Editing Discrete Mappings

From version 2.5, several utility functions are available for Discrete Mappings. You can use those functions by right clicking anywhere on the Visual Mapping Browser (shown below.)

attachment:VizMapperPopupMenu.png

Automatic Value Generators

• Generate Discrete Values - Functions in this menu category are value generator for discrete mappings. Users can set values for discrete mappings automatically by these functions.

  • Rainbow 1 and Rainbow 2 - These

• Modify Discrete Values

Edit Selected Values at Once

Working with Continuous Mapping Editors

There are three kinds of Continuous Mapping Editors. Each of them are associated with a specific visual attributes:

Managing Visual Styles

All Cytoscape Visual Style settings are initially loaded from a a default file called vizmap.props that cannot be altered by users. When users make changes to the visual properties, a vizmap.props file is saved in the session file. This means that assuming you save your session, you will not lose your visual properties. No other vizmap.props files are saved during normal operation.

Saving Visual Styles

Visual styles are automatically saved with the session they were created in. Before Cytoscape exits, you will be prompted to make sure you save the session before quitting. It is also possible to save your visual styles in a file separate from the session file. To do this, navigate to the File → Export → Vizmap Property File... menu and choose the file the properties should be saved to. This feature can be used to share visual styles with other users.

Importing Visual Styles

To import existing visual styles navigate to the File → Import → Vizmap Property File menu option and select a vizmap.props file. Imported properties will supplement existing properties or override existing properties if the properties have the same name. You can also specify a visual properties file using the -V command line option (cytoscape.sh -V myVizmap.props). Visual properties loaded from the command line will override any default properties.

Default Visual Styles

It is possible to change the default visual properties for all sessions of cytoscape. To do this, navigate to the Edit → Preferences... menu, check the "Make Current Visual Styles Default" box in the "Default Visual Styles" section, and click "Ok". This will save the current visual styles as a vizmap.props file to your .cytoscape directory (found in your home directory). These visual styles will be loaded each time Cytoscape is started.

Bypassing Visual Styles

Cytoscape has a new feature that allows users to override visualizations created by the vizmapper for individual nodes and edges. This feature is available by right-clicking on a node or edge and then clicking on the Visual Mapping Bypass menu.

attachment:VizmapBypass.png

Each visual property of the node or edge is displayed. When a property is overridden, a checkmark appears next to the property and a [Reset <Property Name>] menu item appears below the checked property. By clicking the [Reset <Property Name>] option the bypass will be removed and the attribute will be displayed as defined by the VizMapper. At the bottom of the menu a Reset All option appears. When clicked, this will be remove all bypasses for the specified node or edge. In the example above you can see the the selected node size, color, and shape have been overridden. This is apparent in the appearance of the node itself and by the check marks in the popup menu.

It is important to realize that the the Visual Mapping Bypass only works for individual nodes and edges and not for all nodes or edges of a specific type. Using bypass is not particularly resource intensive, meaning you can use it as much as you like. However, if you ever find yourself repeating the same bypasses, then you should consider using the VizMapper instead.

Bypass is accomplished using special attributes with names like node.fillColor and node.shape. These are normal Cytoscape attributes and can be seen an editted in the Attribute Browser. The value of the attribute is a string representation of a property. For example, color is represented by 3 integers representing the RGB (red, green, blue) value of the color. Different types of properties have different string representations. When in doubt, just use the right click menu to create valid attribute values.

Because bypass values are specified using normal attributes, these attributes will persist between sessions as long as you save your session! If you don't save your session, you will lose whatever bypass values you set.