I just started looking into Cytoscape

I was looking at the example here. My goal is to have a weighted directed graph (pretty much like a dendrogram, except weighted). I need to have the edges reflect the weight (either in terms of length, or color but some sort of visual denotion). However, from the example, irrespective of what the edge weight is, I see no change in the graph. Does anyone know how I can achieve that?

Alternately, if there are other JS libraries that can help me visualize a weighted graph, I'd appreciate pointers on that as well.

I just started looking into Cytoscape

I was looking at the example here. My goal is to have a weighted directed graph (pretty much like a dendrogram, except weighted). I need to have the edges reflect the weight (either in terms of length, or color but some sort of visual denotion). However, from the example, irrespective of what the edge weight is, I see no change in the graph. Does anyone know how I can achieve that?

Alternately, if there are other JS libraries that can help me visualize a weighted graph, I'd appreciate pointers on that as well.

• javascript
• graph
• cytoscape.js
• graph-visualization
• cytoscape

2 Answers 2

Simply set your edge style appropriately in your stylesheet, with a mapper.

mappers are used to allow a per-element style encoding. http://js.cytoscape/#style/mappers

what is unfortunately missing from the documentation is a more detailed explanation of what kind of values it can map as well as an example of how/where to apply such a mapper:

style: [
{
  selector: 'node',
  style: {
    'content': 'data(name)',
    'font-family': 'helvetica',
    'font-size': 14,
    'text-outline-width': 3,
    'text-outline-color': '#999',
    'text-valign': 'center',
    'color': '#fff',
    'width': 'mapData(weight, 30, 80, 20, 50)',
    'height': 'mapData(height, 0, 200, 10, 45)',
    'border-color': '#fff'
  }
}]

supported values for interpolation (the last two input parameters) are: colors (as described in the docs), and numbers (as seen in the example above).