How to set node size and color in bokeh network graph?

Question

If we take the standard Karate Club example, how do I change the color and size of the nodes according to their degree?

import networkx as nx

from bokeh.io import show, output_file
from bokeh.models import Plot, Range1d, MultiLine, Circle, HoverTool, TapTool, BoxSelectTool
from bokeh.models.graphs import from_networkx, NodesAndLinkedEdges, EdgesAndLinkedNodes
from bokeh.palettes import Spectral4

G=nx.karate_club_graph()

plot = Plot(plot_width=400, plot_height=400,
            x_range=Range1d(-1.1,1.1), y_range=Range1d(-1.1,1.1))
plot.title.text = "Graph Interaction Demonstration"

plot.add_tools(HoverTool(tooltips=None), TapTool(), BoxSelectTool())

graph_renderer = from_networkx(G, nx.circular_layout, scale=1, center=(0,0))

graph_renderer.node_renderer.glyph = Circle(size=15, fill_color=Spectral4[0])
graph_renderer.node_renderer.selection_glyph = Circle(size=15, fill_color=Spectral4[2])
graph_renderer.node_renderer.hover_glyph = Circle(size=15, fill_color=Spectral4[1])

graph_renderer.edge_renderer.glyph = MultiLine(line_color="#CCCCCC", line_alpha=0.8, line_width=5)
graph_renderer.edge_renderer.selection_glyph = MultiLine(line_color=Spectral4[2], line_width=5)
graph_renderer.edge_renderer.hover_glyph = MultiLine(line_color=Spectral4[1], line_width=5)

graph_renderer.selection_policy = NodesAndLinkedEdges()
graph_renderer.inspection_policy = EdgesAndLinkedNodes()

plot.renderers.append(graph_renderer)

output_file("interactive_graphs.html")
show(plot)

I tried storing the node degrees in a list and inputting that list into the graph renderer, but I got the following error:

# adjust node size according to degree, etc
d = nx.degree(G)
node_sizes = []
for i in d:
    _, value = i
    node_sizes.append(5*value)
...
graph_renderer.node_renderer.glyph = Circle(size=node_sizes, fill_color=Spectral4[0])

>>> ValueError: expected an element of either String, Dict(Enum('expr', 'field', 'value', 'transform', 'units'), Either(String, Instance(Transform), Instance(Expression), Float)) or Float, got <the list>

And for the color, I tried replacing this line:

graph_renderer.node_renderer.glyph = Circle(size=15, fill_color=Spectral4[0])

with this line from here:

from bokeh.transform import linear_cmap
graph_renderer.node_renderer.glyph = Circle(size=15, fill_color=linear_cmap('name', 'Spectral8', min(G.nodes()), max(G.nodes())))

But it gives the following error:

ERROR:bokeh.core.validation.check:E-1001 (BAD_COLUMN_NAME): Glyph refers to nonexistent column name: name [renderer: GlyphRenderer(id='ca38c587-0e5e-4bcb-a433-85602d3f66ab', ...)]
ERROR:bokeh.core.validation.check:E-1001 (BAD_COLUMN_NAME): Glyph refers to nonexistent column name: name [renderer: GlyphRenderer(id='def645fc-ecae-41b1-94e0-2baec74976f5', ...)]
ERROR:bokeh.core.validation.check:E-1010 (CDSVIEW_SOURCE_DOESNT_MATCH): CDSView used by Glyph renderer must have a source that matches the Glyph renderer's data source: GlyphRenderer(id='ac3d58b0-7a97-43c1-bfce-8e99b4286fa5', ...)
ERROR:bokeh.core.validation.check:E-1001 (BAD_COLUMN_NAME): Glyph refers to nonexistent column name: name [renderer: GlyphRenderer(id='02b10671-1446-452b-81a9-9ba34dab2317', ...)]
ERROR:bokeh.core.validation.check:E-1001 (BAD_COLUMN_NAME): Glyph refers to nonexistent column name: name [renderer: GlyphRenderer(id='62aa25ea-25a6-45ec-9931-25eca9870d6a', ...)]
ERROR:bokeh.core.validation.check:E-1001 (BAD_COLUMN_NAME): Glyph refers to nonexistent column name: name [renderer: GlyphRenderer(id='723305c7-3e97-4c25-8418-5a916f18a6c4', ...)]
ERROR:bokeh.core.validation.check:E-1001 (BAD_COLUMN_NAME): Glyph refers to nonexistent column name: OWNER_CLIENT_NO [renderer: GlyphRenderer(id='3fbaedfd-f2d9-48ea-bf7b-e86868c8438b', ...)]
ERROR:bokeh.core.validation.check:E-1001 (BAD_COLUMN_NAME): Glyph refers to nonexistent column name: name [renderer: GlyphRenderer(id='ca38c587-0e5e-4bcb-a433-85602d3f66ab', ...)]

and produces a blank HTML.

EDIT: I figured out how to color the nodes.

# add different colors for each node
graph_renderer.node_renderer.data_source.data['color'] = list(G.nodes)

graph_renderer.node_renderer.glyph = Circle(size=15, fill_color=linear_cmap('color', 'Spectral8', min(G.nodes), max(G.nodes)))

This produces:

So, now I only need to figure out how to change the node sizes.

Answer 1

You are doing thins nearly right :)

Instead of manual list creation, you should create a data_source of renderer and use its name for automatic attribute selection (the other part of my code is in your another question):

gr = from_networkx(
    G,
    nx.circular_layout,
    scale=1,
    center=(0,0)
)
gr.node_renderer.data_source.data['index'] = list(reversed(range(len(G))))
gr.node_renderer.data_source.data['colors'] = Spectral8

gr.node_renderer.glyph = Circle(
    size='index',
    fill_color='colors'
)

will draw you: