gJGF¶
This Jupyter notebook provides an example of using the Python package gravis and its custom format called gravis JSON Graph Format (gJGF). The .ipynb file can be found here.
[1]:
import gravis as gv
Empty graph¶
[2]:
graph1 = {
'graph': {}
}
gv.d3(graph1, graph_height=150)
[2]:
Details for selected element
Directed graph¶
Reproduced from Wikipedia: Directed graph
[3]:
graph2 = {
'graph': {
'label': 'Directed graph',
'nodes': {
'a': {},
'b': {},
'c': {},
},
'edges': [
{'source': 'a', 'target': 'b'},
{'source': 'b', 'target': 'c'},
{'source': 'c', 'target': 'a'},
],
'metadata': {
'node_color': '#007fff',
'node_border_size': 1.5,
'node_size': 16,
}
}
}
gv.d3(graph2, graph_height=150, show_node_label=False)
[3]:
Details for selected element
Undirected graph¶
Reproduced from Wikipedia: Graph
[4]:
graph3 = {
'graph': {
'label': 'Undirected graph',
'directed': False,
'nodes': {
1: {},
2: {},
3: {},
4: {},
5: {},
6: {},
},
'edges': [
{'source': 1, 'target': 2},
{'source': 1, 'target': 5},
{'source': 2, 'target': 5},
{'source': 2, 'target': 3},
{'source': 3, 'target': 4},
{'source': 4, 'target': 5},
{'source': 4, 'target': 6},
],
'metadata': {
'node_color': 'white',
'node_size': 30,
'node_border_size': 2,
'node_label_size': 20
}
}
}
gv.d3(graph3, graph_height=200)
[4]:
Details for selected element
Multigraph¶
A multigraph with multiedges in red and self-loops in blue, reproduced from Wikipedia: Multigraph
[5]:
graph4 = {
'graph': {
'label': 'Multigraph',
'directed': False,
'nodes': {
1: {'metadata': {'hover': 'Node 1', 'x': 0, 'y': -60}},
2: {'metadata': {'hover': 'Node 2', 'x': 65, 'y': -20}},
3: {'metadata': {'hover': 'Node 3', 'x': 40, 'y': 60}},
4: {'metadata': {'hover': 'Node 4', 'x': -40, 'y': 60}},
5: {'metadata': {'hover': 'Node 5', 'x': -65, 'y': -20}},
6: {'metadata': {'hover': 'Node 6', 'x': 0, 'y': 5}},
},
'edges': [
{'source': 1, 'target': 2},
{'source': 2, 'target': 3},
{'source': 2, 'target': 2, 'metadata': {'color': 'blue'}},
{'source': 3, 'target': 4},
{'source': 3, 'target': 3, 'metadata': {'color': 'blue'}},
{'source': 4, 'target': 5},
{'source': 4, 'target': 4, 'metadata': {'color': 'blue'}},
{'source': 5, 'target': 1, 'metadata': {'color': 'red'}},
{'source': 5, 'target': 1, 'metadata': {'color': 'red'}},
{'source': 1, 'target': 6, 'metadata': {'color': 'red'}},
{'source': 1, 'target': 6, 'metadata': {'color': 'red'}},
{'source': 6, 'target': 1, 'metadata': {'color': 'red'}},
{'source': 2, 'target': 6},
{'source': 3, 'target': 6, 'metadata': {'color': 'red'}},
{'source': 6, 'target': 3, 'metadata': {'color': 'red'}},
{'source': 4, 'target': 6, 'metadata': {'color': 'red'}},
{'source': 6, 'target': 4, 'metadata': {'color': 'red'}},
{'source': 5, 'target': 6},
],
'metadata': {'node_color': '#aaa', 'node_border_size': 1.2, 'edge_size': 1.2}
}
}
gv.d3(graph4, graph_height=200, edge_curvature=0.3, show_node_label=False)
[5]:
Details for selected element
Annotated graph¶
Enzyme image Protein ADH5 PDB 1m6h.png with CC BY 3.0 license from Wikipedia: Alcoholdehydrogenase
Molecule images with CC BY 4.0 license from RHEA:25290
Bansal et al., Rhea, the reaction knowledgebase in 2022. Nucleic Acids Res. Epub:gkab1016 (2021). PMID:34755880, DOI:10.1093/nar/gkab1016
[6]:
img_alcoholdehydrogenase = gv.convert.image_to_data_url(
'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Protein_ADH5_PDB_1m6h.png/320px-Protein_ADH5_PDB_1m6h.png')
img_ethanol = gv.convert.image_to_data_url(
'https://www.rhea-db.org/chebi/CHEBI:16236', 'svg')
img_nad = gv.convert.image_to_data_url(
'https://www.rhea-db.org/chebi/CHEBI:57540', 'svg')
img_acetaldehyde = gv.convert.image_to_data_url(
'https://www.rhea-db.org/chebi/CHEBI:15343', 'svg')
img_proton = gv.convert.image_to_data_url(
'https://www.rhea-db.org/chebi/CHEBI:15378', 'svg')
img_nadh = gv.convert.image_to_data_url(
'https://www.rhea-db.org/chebi/CHEBI:57945', 'svg')
default_color = 'black'
highlight_color = 'blue'
highlight_size = 1.5
background_color = '#f5f5f5'
graph5 = {
'graph': {
'label': 'Annotated graph',
'directed': True,
'metadata': {
'arrow_color': 'black',
'arrow_size': 5,
'background_color': background_color,
'node_color': background_color,
'node_opacity': 0.8,
'node_size': 25,
'node_shape': 'hexagon',
'node_border_color': default_color,
'node_border_size': 0.8,
'node_label_color': default_color,
'node_label_size': 6,
'node_hover': 'Molecule: $label',
'node_click': '$hover',
'node_x': 0,
'node_y': 0,
'node_z': 0,
'edge_color': default_color,
'edge_opacity': 0.8,
'edge_size': 1,
'edge_label_color': 'black',
'edge_label_size': 5,
'edge_hover': '$label',
'edge_click': '$label',
},
'nodes': {
1: {
'label': 'Alcohol dehydrogenase',
'metadata': {
'color': 'white',
'opacity': 1.0,
'size': 50,
'shape': 'circle',
'border_color': highlight_color,
'border_size': highlight_size,
'label_color': highlight_color,
'label_size': 7,
'hover': 'Enzyme: $label',
'click': '$hover',
'image': img_alcoholdehydrogenase,
}
},
2: {
'label': 'Ethanol',
'metadata': {
'size': 30,
'color': 'white',
'shape': 'rectangle',
'border_color': highlight_color,
'border_size': highlight_size,
'label_color': highlight_color,
'image': img_ethanol,
'x': -100,
'y': 50,
}
},
3: {
'label': 'NAD+',
'metadata': {
'image': img_nad,
'x': -100,
'y': 0,
}
},
4: {
'label': 'Acetaldehyde',
'metadata': {
'size': 30,
'color': 'white',
'shape': 'rectangle',
'border_color': highlight_color,
'border_size': highlight_size,
'label_color': highlight_color,
'image': img_acetaldehyde,
'x': 100,
'y': 50,
}
},
5: {
'label': 'NADH',
'metadata': {
'image': img_nadh,
'x': 100,
'y': 0,
}
},
6: {
'label': 'Proton',
'metadata': {
'image': img_proton,
'x': 100,
'y': -50,
}
},
},
'edges': [
{
'source': 2,
'target': 1,
'label': '1 mol',
'metadata': {
'color': highlight_color,
'opacity': 1.0,
'size': highlight_size,
'label_color': highlight_color,
'label_size': 6,
},
},
{
'source': 3,
'target': 1,
'label': '1 mol',
},
{
'source': 1,
'target': 4,
'label': '1 mol',
'metadata': {
'color': highlight_color,
'size': highlight_size,
'label_color': highlight_color,
'label_size': 6,
},
},
{
'source': 1,
'target': 5,
'label': '1 mol',
},
{
'source': 1,
'target': 6,
'label': '1 mol',
},
],
}
}
gv.d3(graph5, node_label_data_source='label', edge_label_data_source='label', show_edge_label=True, zoom_factor=2)
[6]:
Details for selected element
Multiple graphs¶
gJGF can also be used to define multiple graphs in one dictionary (or JSON object). The visualization shows the first graph, while the other graphs can be selected in the menu on the right side in the category Data selection.
[7]:
graphs = {
'graphs': [
{
'label': 'First graph',
'nodes': {
'a': {},
'b': {},
},
'edges': [
{'source': 'a', 'target': 'b'},
],
},
{
'label': 'Second graph',
'directed': False,
'nodes': {
1: {},
2: {},
},
'edges': [
{'source': 1, 'target': 2},
],
},
]
}
gv.d3(graphs, graph_height=200)
[7]:
Details for selected element
[8]:
# reuse previous graphs: remove the "graph" key from each one, instead add a "graphs" key for the collection
graphs = [graph2, graph3, graph4, graph5]
gjgf = {'graphs': [g['graph'] for g in graphs]}
gv.d3(gjgf, graph_height=200)
[8]:
Details for selected element