Diff for "Cytoscape_User_Manual/Visual_Styles"

What is a Visual Style?

One of Cytoscape's strengths in network visualization is the ability to allow users to encode any attribute of their data (name, type, degree, weight, expression data, etc.) as a visual property (such as color, size, transparency, or font type). A set of these encoded or mapped attributes is called a Visual Style and can be created or edited using the Cytoscape VizMapper. With the VizMapper, the visual appearance of your network is easily customized. For example, you can:

• 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 as different node shapes.

  • attachment:NodeShapeMapping.png

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

  • attachment:DegreeSize.png

• ...or, set the font size of the node labels instead.

  • attachment:DegreeLabelSize.png

• Set node widths and heights based on label size.

  • attachment:LabelWidthAndHeight.png

• Visualize gene expression data along a color gradient.

  • attachment:ColorGradient.png

• Control edge transparency (opacity) using edge weights.

  • attachment:OpacityForEdges.png

• Browse extremely-dense networks by controlling the opacity of nodes.

  • attachment:OpacityForNodesAndEdges.png

The VizMapper can be accessed by going to View → Open VizMapper or by clicking on the VizMapper icon attachment:VizMapIcon.png. Also, starting in Cytoscape 2.5, direct access to the VizMapper is provided via a tab on the Control Panel at the left-hand side of the screen (formerly known as CytoPanel 1).

Introduction to the VizMapper User Interface

As of Cytoscape 2.5, the VizMapper has undergone a complete interface redesign. There are three types of components in the new VizMapper:

1. Main Panel

   • attachment:VizMapperMainPanel.png

   • This panel allows you to create/delete/view/switch between different visual styles using the Current Visual Style options. The Visual Mapping Browser at the bottom displays the mapping details for a given visual style and is used to edit these details as well.
2. Default Appearance Editor

   • attachment:DefaultEditorPanel.png

   • Clicking on the section labelled "Defaults" on the Main Panel will bring up this editor, which allows users to visually edit the default appearance of nodes and edges for the selected visual style.
3. Continuous Editors
   • These are editors for continuous mapping, which is a mapping from numerical value to visual attributes. They are accessed through the Visual Mapping Browser on the Main Panel. Using 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

These editors will be discussed in further detail below.

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

The following tutorials are introduction to basic functions of VizMapper. They are independent to each other, and you can start from any of those.

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

The goal of this tutorial is learning how to create new Visual Style and set some default values.

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

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

3. 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. From this panel, you can create node/edge mappings for all visual properties.

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

   attachment:InitialDefaultEditor.png

5. 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. You can edit other default values by clicking on visual attribute names on the list. In this example, shape is set to Triangle and node color is set to blue (shown below.)

   attachment:TriangleDefaultEditor.png

6. 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 (shown below.)

   attachment:Tut1GalFiltered.png

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 VS2”.

4. Double click the Edge Color cell listed below Unused Properties. Edge Color cell will be moved on the top of the list. Now Edge Color is listed under Edge Visual Mapping category (shown below.)

   attachment:EdgeMapping1.png

5. Select interaction from the pull-down menu in the cell next to Edge Color.

6. Select Discrete Mapping for Mapping Type. Then all available attribute values for interaction will be displayed (shown below.)

   attachment:EdgeMapping2.png

7. Click the cell empty cell next to pd (Protein-DNA interactions). On the right side of the cell, ... and X will appear.

   attachment:CellEditor1.png

8. Click on ... button. Popup window will appear and you can select blue from the dialog.

9. The change immediately appears on the network window.

10. Repeat 7-8 for pp (Protein-Protein interactions). For pp, select red instead.

11. Repeat 4-10 for Edge Line Style. For Edge Line Style, you can select line style (dashed or solid) from pull-down menu.

Now your network should show pd interactions as blue-dashed lines, and pp interactions as red-solid lines. (Sample screenshot is below.)

attachment:NewVizMapperInteractionsRedBlue.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

Tutorial 4: How to Use Utilities for Discrete Mappers

(Under construction!)

The following tutorial demonstrats new features in Cytoscape 2.5. The new VizMapper user interface some utilities to help users editing discrete mappings. The goal of this section is learning how to set and adjust values for discrete mappings automatically.

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

2. Apply layout to the network: From the main menu, select Layout → Cytoscape Layouts → Degree Sorted Circle Layout. This layout algorithm sort nodes in a circle by degree of the nodes. Degrees will be stored as node attribute names Degree after you applied this algorithm.

attachment:CircleLayout1.png

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

2. Click Defaults panel on the VizMapper main panel. Default Appearence Editor pops up (see below.)

attachment:DefaultEditor.png

1. Edit the following visual properties and press Apply. Since you changed opacity of the node, you can see the nodes bihind the front node (see below.)

   • Node Oppacity - 100
   • Edge Color - White
   • Background Color - Black

attachment:Opacity1.png

1. Cretate a Discrete Node Color Mapping. Click on the

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.