PassthroughMapper

This is an untyped object that represents a Passthrough Mapper type.

The values of network attributes are passed directly through to visual attributes.

The most common use case is using this mapper to specify node/edge labels. For example, a passthrough mapper can label all nodes with their gene symbols.

When defining a passthrough mapper, you just need to specify the name of the node or edge data attribute that contains the visual style values.

Examples

// Create the mapper and set it to a Visual Style's nodes.label property;
var style = {
        nodes: {
            label: { passthroughMapper: { attrName: "symbol" } }
        }
};

// Set the new style to the Visualization:
vis.visualStyle(style);

See Also

CustomMapper

This is a special type of mapper that allows you to register a callback function that will be called for each associated element (nodes or edges). The function will then be responsible for returning the desired property value.

The callback function should expect a data object as argument.

You could, for example, use a custom mapper to create a better tooltip text.

Fields

functionName {String} : The name of the JavaScript function that will return the visual style value for each node or edge. The callback function always receives the node's or edge's data object as argument.

Examples

// 1. First, create a function and add it to the Visualization object.
vis["customTooltip"] = function (data) {
    var value = Math.round(100 * data["weight"]) + "%";
    return 'The confidence level of this link is: ' +
           '<font color="#000099" face="Courier" size="14">' + value + '</font>';
};

// 2. Now create a new visual style (or get the current one) and register
//    the custom mapper to one or more visual properties:
var style = vis.visualStyle();
style.edges.tooltipText = { customMapper: { functionName: "customTooltip" } },

// 3. Finally set the visual style again:
vis.visualStyle(style);

See Also

DiscreteMapper

This object represents a Discrete Mapper type, but is just an untyped object.

Discrete network attributes are mapped to discrete visual attributes.

For example, a discrete mapper can map node colors to gene annotations.

Fields

attrName {String} : The name of the data attribute that will be mapped to a visual style's property.

entries {Array} : An array of objects used to map data attributes to visual style values. Each entry object must define:

attrValue: The edge or node data attribute value.
value: The visual style value (e.g. a color code).

Examples

// Create the mapper:
var colorMapper = {
        attrName: "molecular_function",
        entries: [ { attrValue: "catalytic", value: "#ff0000" },
                   { attrValue: "transporter", value: "#00ff00" },
                   { attrValue: "binding", value: "#0000ff" } ]
};

// Set the mapper to a Visual Style;
var style = {
        nodes: {
            color: { discreteMapper: colorMapper }
        }
};

// Set the new style to the Visualization:
vis.visualStyle(style);

// Now, if ( node.data["molecular_function"] == "binding" ),
// then the node will be blue

See Also

ContinuousMapper

This object represents a Continuous Mapper type, although it is just an untyped object.

Depending on the visual attribute, there are two 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-to-continuous mapping. Continuous numerical values are mapped to a color gradient.

Notice that:

Continuous-to-Discrete mappers are not supported yet (e.g. all values below 0 are mapped to square nodes, and all values above 0 are mapped to circular nodes).
Only numerical attributes and colors can be mapped with continuous mappers. For example, there is no way to smoothly morph between circular nodes and square nodes.
The mapping algorithm uses a linear interpolation to calculate the values.
Continuous mappers ignore filtered out elements.

Fields

attrName {String} : The name of the data attribute that will be mapped to a visual style's property.

maxAttrValue {Number} : An optional maximum value for the linear scale. If you don't specify it, Cytoscape Web gets the highest attribute value from the rendered nodes or edges (filtered-out elements are ignored). And if an element's data value is higher than the specified maximum, that element's visual property is simply scaled down to the maximum value.

maxValue : The maximum value of the visual style's property. It is usually a number (e.g. edge width), but accepts strings if the visual property is a color.

minAttrValue {Number} : An optional minimum value for the linear scale. If you don't specify it, Cytoscape Web gets the lowest attribute value from the rendered nodes or edges (filtered-out elements are ignored). And if an element's data value is lower than the specified minimum, that element's visual property is simply scaled up to the minimum value.

minValue : The minimum value of the visual style's property. It is usually a number (e.g. edge width), but accepts strings if the visual property is a color.

Examples

// A mapper that could be used to set the sizes of the nodes between 12 and 36 pixels:
var sizeMapper = { attrName: "weight",  minValue: 12, maxValue: 36 };

// This one could be used to create a color range from yellow to green:
var colorMapper = { attrName: "score",  minValue: "#ffff00", maxValue: "#00ff00" };

// This edge width mapper specifies the minimum and maximum data values for the scale.
// Weights lower than 0.1 are given a width of 1, and weights higher than 1.0 are given a width of 4.
var widthMapper = { attrName: "weight",  minValue: 1, maxValue: 4, minAttrValue: 0.1, maxAttrValue: 1.0 };

See Also