Network customization using ipycytoscape

Question

I am using ipycytoscape for building networks, but it is not clear to me how to let node size being dependent on node's degree and add labels to each node. My network has two columns, one for Nodes and one for Target.

Data
Nodes      Target
A           B
B           C
B           D
C           B
E          nan


G = nx.from_pandas_edgelist(df, source='Nodes', target='Target') 

Currently I am building the graph as follows:

cytoscapeobj = ipycytoscape.CytoscapeWidget()
cytoscapeobj.graph.add_graph_from_networkx(G, labels) # labels however is not adding any label to the node, so probably the location is wrong
cytoscapeobj

I know about customization using set style:

cytoscapeobj.set_style(my_style)

but I do not know how to change it in order to visualize labels and node's size depending on node's degree. Has anyone ever had experience with ipycytoscape?

Answer 1

To be able to visualize the labels, you will need to add the node attributes to your networkx graph and set the appropriate style. For the style, you can define one for all nodes to display the label. To control the size of the nodes based on degree, you will need to add a degree column to the node dataframe. You can do this by using networkx degree API. You will first need to create the graph, then recreate the node dataframe based on networkx degree API and add the node attributes that contain the degree attribute to be able render the graph taking the degree information into account.

Here is the complete solution:

import ipycytoscape as cy
import networkx as nx
import pandas as pd

edge_data = {
    'source': ['A', 'B', 'B', 'C'],
    'target': ['B', 'C', 'D', 'B'],
}
link_df = pd.DataFrame.from_dict(edge_data)
node_data = {
    'id': ['A', 'B', 'C', 'D', 'E']
}
node_df = pd.DataFrame.from_dict(node_data)

G = nx.from_pandas_edgelist(link_df)
node_df = pd.DataFrame(G.degree(), columns=['id', 'degree'])
nx.set_node_attributes(G, node_df.set_index('id').to_dict('index'))
cytoscapeobj = cy.CytoscapeWidget()
cytoscapeobj.graph.add_graph_from_networkx(G)

cytoscapeobj.set_style(
    [
        {
             'selector': 'node',
             'style': {
                 'font-family': 'helvetica',
                 'font-size': '20px',
                 'label': 'data(id)'
             }
        },
        {
             'selector': 'edge',
             'style': {
                 'font-family': 'helvetica',
                 'font-size': '20px'
             }
        },
        {
             'selector': 'node[degree>0]',
             'style': {
                 'width': '100px',
                 'height': '100px'
             }
        },
        {
             'selector': 'node[degree>1]',
             'style': {
                 'width': '150px',
                 'height': '150px'
             }
        },
        {
             'selector': 'node[degree>2]',
             'style': {
                 'width': '200px',
                 'height': '200px'
             }
        }
    ]
)
cytoscapeobj

You can use % instead of px in the width and height if you want relative instead of absolute values.