Introductions

• Director, Bioinformatics Core
• Executive director, National Resource for Network Biology
• Cytoscape team since 2006
• Author of over three dozen Cytoscape apps

Introductions

Introductions

What are your network visualization challenges?

Advanced Visualization in Cytoscape

Typically, we don't have enough time to discuss all of the capabilities of Cytoscape visualizations. This module tries to fill in some of the gaps. Here are the topics we're going to cover:

• More about styles
• Working with text
• Controlling node position
• Adjusting the view (Node Position Tools)
• Tuning layouts
• Graphical annotations (marks)
• Working with palettes
• Add graphics to nodes
• Animations made easy
• Using Charts to visualize enrichment results

Advanced Visualization in Cytoscape

1. More about styles

• There are many styles that are not shown by default
• Style columns are Def. (default), Map. (mapping), and Byp. (bypass)
• Bypass is used to override (bypass) both the mapping (if any) and the default
• To set a node or edge bypass
  1. select the nodes or edges you want to set the visual property
  2. click on the bypass column for the visual property you want to set
  3. set the value as appropriate
• Now, those properties will be permanently set for those nodes or edges
• To clear the value, select the nodes or edgges again, right-click on the bypass column and select Remove Bypass

Advanced Visualization in Cytoscape

1. More about styles

• Column styles:
  • Column styles control the way data values are shown in the various tables (node, edge, network)
  • Like node and edge styles, column styles can be mapped using column data values
  • In order to use column styles, you need to add each column and then set the style for that column

Try it!

Advanced Visualization in Cytoscape

2. Working with fonts

• Cytoscape has several label/font properties that are not shown by default
• The following properties are available:
  • Label: usually used to set up a passthrough mapping for the label text
  • Label Autorotate: (for edges only) rotate the label to be parallel with the edge
  • Label Font Face: this is the font face to use -- usually a very long list
  • Label Font Size: the font size, can also be a passthrough mapping
  • Label Position: where the font should be placed
  • Label Transparency: the transparency of the font
  • Label Width: the maximum width of the label. Labels longer than this will be wrapped
  • Label Rotation: the angle of the text in degrees
  • Label Background Color: the color of the text background
  • Label Background Shape: the shape of the text background
  • Label Background Transparency: the transparency of the text background
• Label position and rotation can also be done interactively for node and edge labels.

Advanced Visualization in Cytoscape

2. Working with fonts

Try it!

Advanced Visualization in Cytoscape

3. Controlling node and edge position (depth)

• Nodes and edges with the same Z order are drawn at the same time
• This can lead to important information being obscured
• Z order can be set by the Z Location visual property
• Nodes or edges with larger Z are drawn closer to the viewer (on top)
• Setting lots of different Z Location values can slow down graphics performance
• Best approach is to use a few different Z Location values or to set it manually using a Bypass

Advanced Visualization in Cytoscape

3. Controlling node and edge position (depth)

Try it!

Advanced Visualization in Cytoscape

4. Adjusting the view

• Node layout tools (Layout→Node Layout Tools) provide important tools to help "tweak" the final look of a network

Advanced Visualization in Cytoscape

5. Tuning layouts

Advanced Visualization in Cytoscape

5. Tuning layouts

Try it!

Import galFiltered.sif

Play with both the node layout tools and layout tuning

Advanced Visualization in Cytoscape

6. Working with annotations (marks)

• Cytoscape has three separate drawing surfaces:
  • Network canvas (where nodes and edges are drawn)
  • Background canvas (drawing surface behind the nodes and edges
  • Foreground canvas (drawing surface in front of the nodes and edges
• Annotations are drawn on either the foreground or background canvases
• Annotations are exported as objects, so are high quality graphically^*
• Annotation types:
  • Shapes, Text, Bounded Text, Images, Arrows
  • Groups, which group annotations together
• The Annotation Panel makes working with annotations easy and intuitive!

Advanced Visualization in Cytoscape

6. Working with annotations (marks)

Try it!

Advanced Visualization in Cytoscape

7. Palettes

• Cytoscape now supports palettes for choosing colors
• Three palette types are supported:
  • Sequential: used for gradients with only positive or negative values
  • Divergent: used for gradients with both positive and negative values
  • Qualitative: used for discrete color mapping
• The following palettes are provided by default:
  • ColorBrewer: provides all three palette types
  • Viridis: provides sequential palettes
  • Built-in: built-in Rainbow, Rainbow OSC, and Random qualitative palettes, and a variety of built-in divergent palettes
• Palettes are also used to select colors, when a current palette is defined

Advanced Visualization in Cytoscape

8. Adding graphics to nodes

• Sometimes, we want to map graphics onto nodes
• This should be done very sparingly
• Using Cytoscape's built-in charts
  • Image/Chart 1 is included by default
  • Additional charts can be added via Properties→Paint→Custom Paint...
  • Mappings aren't really supported for charts, so select either the Default, or (if one or more nodes are selected, by Bypass) column.
  • This will bring up the Graphics panel
  • Click on Charts or Gradients as desired

Advanced Visualization in Cytoscape

8. Adding graphics to nodes

• enhancedGraphics was written before Cytoscape charts were added to the core
• The format is not nearly as convenient, but allows for greater flexibility and specificity
• Adding a chart to a node is simple:
  1. Create a new text column in the node table
  2. Add the chart instructions (see below for samples)
  3. Set up a visual style that uses the column you created as a passthrough mapping for one of the CustomGraphics styles.

Advanced Visualization in Cytoscape

8. Adding graphics to nodes

• Some example chart instructions:
  • Basic charts:
    • linechart: colorlist="up:blue,down:red" attributelist="Values"
    • piechart: attributelist="Values" colorlist="contrasting" labellist="First,Second,Third,Fourth,Fifth"
    • piechart: attributelist="a,b,c,d" colorlist="red,green,blue,yellow"
    • barchart: attributelist="a,b,c,d" colorlist="up:yellow,down:green"
    • stripechart: colorlist="red,white,blue"
    • heatstripchart: separation="1" valuelist=".2,-1,3,1" labellist="cond1,cond2,cond3,cond4"
  • Circos charts:
    • circoschart: firstarc=.5 arcwidth=.4 colorlist="red, green, blue, white" showlabels=false attributelist="Circle1,Circle2"
    • circoschart: arcstart=90 firstarc=.5 arcwidth=.3 range="-5,5" colorlist="up:yellow,down:blue,zero:black" valuelist="1,1,1,1" showlabels=false attributelist="Circle1,Circle2"
  • "Label" charts:
    • label: attribute=name labelsize=10 outline=true background=true color=white dropShadow=true

Advanced Visualization in Cytoscape

8. Adding graphics to nodes

• Apps that create custom paints:
  • chemViz2: draws chemical structure onto nodes
  • enhancedGraphics: used to draw charts and labels onto nodes
  • stringApp: uses custom paint for the "glass sphere" look, calls chemViz2 for chemical drawings, enhancedGraphics for "fancy" labels
  • OmicsVisualizer: uses enhancedGraphics for rings of data

Advanced Visualization in Cytoscape

9. Animations made easy

• The CyAnimator app is a key frame animation tools for Cytoscape
• To use, bring up the interface (Apps→CyAnimator)
• Add a frame to the animation by clicking the + button

Advanced Visualization in Cytoscape

10. Using Charts to visualize enrichment results

• The Enrichment Table App provides the functionality of functional enrichment analysis for any network loaded into Cytoscape.
• To use, bring up the interface (Tools→Enrichment Table→Perform Gene Enrichment)
• Add a chart to the network by clicking the Draw Chart button

Advanced Visualization in Cytoscape

Try it out!

Advanced Visualization in Cytoscape

Questions?

Additional examples: Step-by-step protocols

Working with Groups in Cytoscape

Cytoscape groups are:

• Collections of nodes (no additional enforced semantics)
• May be hierarchical (i.e. a group can be a member of another group)
• May share nodes, however:
  • Compound node visualization won't work properly
  • Expand/collapse are not determnistic, so shared nodes might be included or not
• Groups are nodes themselves!

Working with Groups in Cytoscape

Manipulating groups

• Create a group:
  • Highlight a group of nodes
  • Right-click over a node or empty space
  • Select Group→Group selected nodes
• Collapse a group:
  • Double-click on any member of the group
• Expand a group:
  • Double-click on the collapsed group node
• Delete a group:
  • Right-click on the group, or any node in the group
  • Select Group→Ungroup Selected Nodes

Working with Groups in Cytoscape

Some apps that create groups

• setsApp
  • Define sets of nodes by selection, attribute value, or by importing them
  • Right-click on the set and select Create group from set nodes
  • Set aware layouts are also available
• clusterMaker2
  • Provides the option to create groups from network clusters

Working with Groups in Cytoscape

Group visualization

• None: no visualization for the group. Grouped nodes look the same as other nodes.
• Compound Node: visualize the group as a compound node, essentially a node (the group) that contains other nodes (the members of the group). Individual member nodes can be individually selected and manipulated.
• Show Group Node: the group node itself is added to the network and "membership edges" are added between the group node and each group member
• Single Node: similar to compound node in that all of the member nodes are visible, but member nodes can not be individually selected or manipulated. Essentially, the entire group is treated as a single node.

Working with Groups in Cytoscape

• Cytoscape groups can optionally aggregate member node data.
• Aggregations can occur on all columns, or only specified columns
• Aggregation options:
  • Numeric columns: None, Average, Minimum value, Maximum value, and Sum
  • String columns: None, Comma-separated Values, Tab-separated Values, Most Common Value, and Unique Values
  • Boolean columns: None, Logical AND, and Logical OR
  • List columns:
    • For numeric lists, same options as numeric columns plus Concatenate and Unique Values
    • For String lists, None, Unique Values and Concatenate

Working with Groups in Cytoscape

Configuring Groups

Groups are configured using the Group Preferences dialog (Edit→Preferences→Group Preferences)

Working with Groups in Cytoscape

Try it out!

Open up Cytoscape, and select the Ivacaftor Coauthor network. Play around with grouping either by creating groups manually or by installing the setsApp and creating groups based on the node type column.

Ten Simple Rules

Rule 1: Determine first the network specifics: purpose, data, scale, salient aspects

Must decide:

• the purpose of the figure
• the data components of the network
• any additional constraints on the figure
• the relative weight of these requirements

Ten Simple Rules

Rule 2: Depending on scale, consider alternative layouts to node-link diagrams

• Node-link diagrams aren't always the best representation for a network
• In particular, with lots of nodes and edges, they tend to turn into "hairballs"
• Alternative representations include:
  • matrices
  • hive plots
  • biofabric

Ten Simple Rules

Rule 3: Beware of unintended spatial interpretations

Whether intended or not, viewers will interpret spatial relationships:

• proximity: things that are closer are more similar/related
• centrality: things in the center are more relevant than those on the periphery
• direction: up is good, down is bad, and information flows horizontally (left to right in western cultures)

Ten Simple Rules

Rule 4: Provide readable labels and captions

• Any text in the figure should support the purpose of the figure (see Rule #1)
• Not all nodes/edges need to be labeled. If it can't be read, it isn't useful.
• Rule of thumb: Font sizes for labels should be no smaller than the caption font.
• Labels should be properly placed in close proximity to the subject.

Ten Simple Rules

Rule 5: Consider aggregation to show only what is required; choose the right level of detail

One way to reduce the complexity of a network is to use aggregation. For example:

• Group very similar nodes together as a single "metanode"
• Group nodes based on co-location
• Combine members of a complex into a single node
• Ceate multiple figures showing different node sets
• Use dimensionality reduction (e.g. PCA) to remove nodes

Ten Simple Rules

Rule 6: Use color responsibly

Color is a big topic, too complex to address completely now. However, some key ponts are:

• Color is perceived, so might be slightly different for each individual
• Color blindness effects a significant (8%) population, so avoid red-green color scales
• Intensity (luminance) is more readily perceived than hue or saturation (chromaticity).
• Saturated colors draw attention
• Palettes have been designed to "do the right thing" -- use them (e.g. Brewer color palettes, Viridis, etc.).
• Three different types of palettes:
  • Divergent: color gradients with a natural midpoint (e.g. log2 fold change values)
  • Qualitative: categorical data (e.g. protein family)
  • Sequential: color gradients from low to high values (e.g. node degree)

Ten Simple Rules

Rule 7: Use other visual marks and channels appropriately: dots and arrows, size, shape, position

• Marks are geographical elements (dots, shapes, and lines)
  • Dots and glyphs should be used to represent items
  • lines and arrows should be used to represent relationships
  • Blobs are used to represent regions or grouping
• Channels define how those are rendered (position, color, shape, size, tilt, area, and volume).
  • Position, color, and shape are used for identity or categorization
  • Size, area, color (with caveats -- see rule #6), and volume are used to distinguish quantities or attribute strength
  • Channels can be combined to overcome encoding limitations (e.g. color "red" + shape "stop sign")

Ten Simple Rules

Rule 8: Use layering and separation

The goal is to increase the prominence of the important information by imagining it as sitting on a higher layer. We do this by:

• Adjusting the weight, luminance, saturation, opacity, or size of the layers (e.g. decrease the luminance and opacity of the unimportant parts of the figure)
• Using spatial cues (e.g. grouping) to highlight relationships

Ten Simple Rules

Rule 9: Use multiple figures instead of one

Sometimes its difficult to adhere to all of the above rules in a single figure. So, use multiple figures!

Ten Simple Rules

Rule 10: Do not use unjustified 3D

Three dimensions can be very helpful for perceiving data which corresponds directly to 3-dimensional objects (animals, organs, molecules, physical space), but can be distracting and difficult to perceive correctly when applied to other data sets

Transcriptomics Dataset

Sample data set: BRCA.exp.547.med.txt: TCGA Breast Cancer expression data

Proteomics Dataset

Sample data set: JX_90min_prot.txt: Protein prospector output

Thank You!