added MG, DG and edge properties

Ashton-Sidhu · Mar 28, 2020 · 9e1b096 · 9e1b096
1 parent 4602667
commit 9e1b096
Show file tree

Hide file tree

Showing 9 changed files with 368 additions and 94 deletions.
diff --git a/README.md b/README.md
@@ -21,6 +21,8 @@ Interactive Graph Visualization (igviz) is a library to help visualize graphs in
 
 ## Usage
 
+Example notebooks can be found [here](https://github.com/Ashton-Sidhu/plotly-graph/tree/master/examples).
+
 ### Basic
 
 ```python
@@ -43,7 +45,7 @@ The default plot colors and sizes the nodes by the Degree but it is configurable
 ig.plot(
     G, # Your graph
     title="My Graph",
-    sizing_method="static", # Makes node sizes the same
+    size_method="static", # Makes node sizes the same
     color_method="##ffcccb", # Makes all the node colours black,
     node_text=["prop"], # Adds the 'prop' property to the hover text of the node
     annotation_text="Visualization made by <a href='https://github.com/Ashton-Sidhu/plotly-graph'>igviz</a> & plotly.", # Adds a text annotation to the graph
@@ -55,7 +57,7 @@ ig.plot(
 ig.plot(
     G,
     title="My Graph",
-    sizing_method="prop", # Makes node sizes the size of the "prop" property
+    size_method="prop", # Makes node sizes the size of the "prop" property
     color_method="prop", # Colors the nodes based off the "prop" property and a color scale,
     node_text=["prop"], # Adds the 'prop' property to the hover text of the node
 )
@@ -65,7 +67,7 @@ ig.plot(
 
 #### How to add your own custom sizing method and colour method
 
-To add your own custom sizing and color method, just pass a list to the `sizing_method` and `color_method`.
+To add your own custom sizing and color method, just pass a list to the `size_method` and `color_method`.
 
 ```python
 color_list = []
@@ -80,7 +82,7 @@ for node in G.nodes():
 ig.plot(
     G,
     title="My Graph",
-    sizing_method=sizing_list, # Makes node sizes the size of the "prop" property
+    size_method=sizing_list, # Makes node sizes the size of the "prop" property
     color_method=color_list, # Colors the nodes based off the "prop" property and a color scale,
     node_text=["prop"], # Adds the 'prop' property to the hover text of the node
 )
@@ -118,6 +120,52 @@ ig.plot(
 )
 ```
 
+#### Directed & Multi Graphs
+
+Igviz also plots Directed and Multigraphs with no configuration chages. For Directed Graphs the arrows are shown from node to node. For Multi Graphs only one edge is shown and it is recommended to set `show_edgetext=True` to display the weights of all edges between 2 Multi Graph nodes.
+
+Note: `show_edgetext=True` also works for vanilla and Directed Graphs.
+
+##### Directed Graph
+
+```python
+def createDiGraph():
+    # Create a directed graph (digraph) object; i.e., a graph in which the edges
+    # have a direction associated with them.
+    G = nx.DiGraph()
+
+    # Add nodes:
+    nodes = ['A', 'B', 'C', 'D', 'E']
+    G.add_nodes_from(nodes)
+
+    # Add edges or links between the nodes:
+    edges = [('A','B'), ('B','C'), ('B', 'D'), ('D', 'E')]
+    G.add_edges_from(edges)
+    return G
+
+DG = createDiGraph()
+
+ig.plot(DG, size_method="static")
+```
+![](docs/images/dg.png)
+
+##### Multi Graph
+
+```python
+MG = nx.MultiGraph()
+MG.add_weighted_edges_from([(1, 2, 0.5), (1, 2, 0.75), (2, 3, 0.5)])
+
+ig.plot(
+    MG,
+    layout="spring",
+    size_method="static",
+    show_edgetext=True,
+    colorscale="Rainbow"
+)
+```
+
+![](docs/images/mg.png)
+
 ## Installation
 
 `pip install igviz`

diff --git a/docs/images/dg.png b/docs/images/dg.png
diff --git a/docs/images/mg.png b/docs/images/mg.png
diff --git a/examples/DiGraphs.ipynb b/examples/DiGraphs.ipynb
@@ -0,0 +1,80 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import networkx as nx\n",
+    "import igviz"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "NameError",
+     "evalue": "name 'nx' is not defined",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
+      "\u001b[0;31mNameError\u001b[0m                                 Traceback (most recent call last)",
+      "\u001b[0;32m<ipython-input-2-81a9d21988fb>\u001b[0m in \u001b[0;36m<module>\u001b[0;34m\u001b[0m\n\u001b[1;32m     13\u001b[0m     \u001b[0;32mreturn\u001b[0m \u001b[0mG\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m     14\u001b[0m \u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m---> 15\u001b[0;31m \u001b[0mDG\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mcreateDiGraph\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m",
+      "\u001b[0;32m<ipython-input-2-81a9d21988fb>\u001b[0m in \u001b[0;36mcreateDiGraph\u001b[0;34m()\u001b[0m\n\u001b[1;32m      2\u001b[0m     \u001b[0;31m# Create a directed graph (digraph) object; i.e., a graph in which the edges\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m      3\u001b[0m     \u001b[0;31m# have a direction associated with them.\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m----> 4\u001b[0;31m     \u001b[0mG\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mnx\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mDiGraph\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m      5\u001b[0m \u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m      6\u001b[0m     \u001b[0;31m# Add nodes:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
+      "\u001b[0;31mNameError\u001b[0m: name 'nx' is not defined"
+     ]
+    }
+   ],
+   "source": [
+    "def createDiGraph():\n",
+    "    # Create a directed graph (digraph) object; i.e., a graph in which the edges\n",
+    "    # have a direction associated with them.\n",
+    "    G = nx.DiGraph()\n",
+    "\n",
+    "    # Add nodes:\n",
+    "    nodes = ['A', 'B', 'C', 'D', 'E']\n",
+    "    G.add_nodes_from(nodes)\n",
+    "\n",
+    "    # Add edges or links between the nodes:\n",
+    "    edges = [('A','B'), ('B','C'), ('B', 'D'), ('D', 'E')]\n",
+    "    G.add_edges_from(edges)\n",
+    "    return G\n",
+    "\n",
+    "DG = createDiGraph()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "ig.plot(DG, size_method=\"static\")"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.6.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}
diff --git a/examples/Multigraphs.ipynb b/examples/Multigraphs.ipynb
@@ -0,0 +1,54 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import networkx as nx\n",
+    "import igviz"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "MG = nx.MultiGraph()\n",
+    "MG.add_weighted_edges_from([(1, 2, 0.5), (1, 2, 0.75), (2, 3, 0.5)])"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "ig.plot(MG, layout=\"spring\", size_method=\"static\", show_edgetext=True)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.6.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}
diff --git a/examples/tutorial.ipynb b/examples/tutorial.ipynb
@@ -1,15 +1,5 @@
 {
  "cells": [
-  {
-   "cell_type": "code",
-   "execution_count": 1,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "%load_ext autoreload\n",
-    "%autoreload 2"
-   ]
-  },
   {
    "cell_type": "code",
    "execution_count": 2,
@@ -7513,7 +7503,7 @@
     }
    ],
    "source": [
-    "ig.plot(G, layout=\"kamada\")"
+    "ig.plot(G)"
    ]
   },
   {
@@ -14486,7 +14476,7 @@
     "ig.plot(\n",
     "    G, # Your graph\n",
     "    title=\"My Graph\",\n",
-    "    sizing_method=\"static\", # Makes node sizes the same\n",
+    "    size_method=\"static\", # Makes node sizes the same\n",
     "    color_method=\"#ffcccb\", # Makes all the node colours black,\n",
     "    node_text=[\"prop\"], # Adds the 'prop' property to the hover text of the node\n",
     "    annotation_text=\"Visualization made by <a href='https://github.com/Ashton-Sidhu/plotly-graph'>igviz</a> & plotly.\", # Adds a text annotation to the graph\n",
@@ -21607,7 +21597,7 @@
     "ig.plot(\n",
     "    G,\n",
     "    title=\"My Graph\",\n",
-    "    sizing_method=\"prop\", # Makes node sizes the size of the \"prop\" property\n",
+    "    size_method=\"prop\", # Makes node sizes the size of the \"prop\" property\n",
     "    color_method=\"prop\", # Colors the nodes based off the \"prop\" property and a color scale,\n",
     "    node_text=[\"prop\"], # Adds the 'prop' property to the hover text of the node\n",
     ")"
@@ -28736,7 +28726,7 @@
     "ig.plot(\n",
     "    G,\n",
     "    title=\"My Graph\",\n",
-    "    sizing_method=sizing_list, # Makes node sizes the size of the \"prop\" property\n",
+    "    size_method=sizing_list, # Makes node sizes the size of the \"prop\" property\n",
     "    color_method=color_list, # Colors the nodes based off the \"prop\" property and a color scale,\n",
     "    node_text=[\"prop\"], # Adds the 'prop' property to the hover text of the node\n",
     ")"